The CSS: style.css
Code: Select all
@charset "utf-8";
/* House style has begun, im a happy panda. */ /* These are comments and are not read by the browser*/
body { /* This section defines the automatic values for the website. */
background-color:#82C3EE; /* Defines background colour. */
font:Verdana, Arial, Helvetica, sans-serif; /* Defines the automatic font. */
color:#37636E; /*defines colour of text */
} /* This bracket is to close the section. */
.wrapper { /* This section holds all the content within a defined width. */
width:850px; /* Defines width. */
margin:0 auto; /* Centers the webpage. */
}
.banner { /* This is where the banner is defined */
width:850px; /* Defines width. */
height:125px; /* Defines height */
background-color:#37636E; /* Defines background colour */
}
.spacer1 { /* This is a spacer, it is very subtle on the webpage but it makes a difference. */
width:850px;
height:10px;
background-color:#FFFFFF;
}
.sidebar { /* Where my navigation buttons are stored. */
margin-top:auto;
width:175px;
height:600px;
background-color:#FFFFFF;
float:left; /* Allows other sections to "float" along side. */
}
.content { /* Holds all the main content */
margin-left:auto;
width:673px;
height:600px;
background-color:#FFFFFF;
float:left; /* Allows it to "float" along side the sidebar */
border-left:2px solid #37636E; /* Adds a 2 pixel wide border to the left of the section */
}
.spacer2 { /* My second spacer */
width:850px;
height:10px;
background-color:#FFFFFF;
}
.footer { /* My footer is defined here.*/
width:850px;
height:45px;
background-color:#37636E;
margin:0 auto;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:36px;
color:#EEEEEE;
}
.content p{ /* Within the content area anything within paragraph tags, <p> , will also have the defined features. */
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
.content h{ /* same as before except it changes the heading tags, <h> or <h1> etc. */
margin-top: 10px;
}
.sidebar ul{
display:block;
padding:4px 6px;
background-color:#37636E;
margin-left:10px;
margin-right:10px;
list-style:none;
}
a {
text-decoration:none; /* Removes the underlines from links. */
color:#FFFFFF; /* Sets the colour of links */
}
.sidebar li {
margin-bottom:10px;
text-align:center;
}
a:hover {color:#99FF99} /* When a user hovers over a link it changes colour. */
/* Its all over, I'm a sad panda. */
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>TEMPLATE</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="banner">
<a href="index.html"><img src="../unit21 - designing animations for the www/logo3.png" border="0"/></a>
</div>
<div class="spacer1">
</div>
<div class="sidebar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Home 2</a></li>
</ul>
</br>
<div align="center">
</div>
</div>
<div class="verticalspacer">
</div>
<div class="content">
</br>
<h1 align="center"> Heading </h1>
<p align="left">Welcome to the template.</p>
</div>
<div class="spacer2">
</div>
<div class="footer">
<h1 align="center">Footer TEXT</h1>
</div>
</body>
</html>