Johno
20-09-2008, 08:24 PM
Hey,
I'm currently working on a basic layout for something at my school:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
margin: 0px;
width: 100%;
}
#sep {
background-color:#FFFFFF;
height: 3px;
}
#hsep {
background-color:#FFFFFF;
height: 100%;
width: 3px;
float: inherit;
}
#logo {
background-color:#11336a;
height: 40px;
}
#navigation {
background-color:#CC0000;
height: auto;
padding: 5px;
padding-left: 5px;
}
#footer {
vertical-align: baseline;
vertical-align: 60%;
}
body,td,th {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #3976a8;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 80%;
}
</style>
</head>
<body>
<div id="contatiner">
<div id="header">
<div id="logo">
logo in here
</div>
<div id="sep"></div>
<div id="navigation">Home - The Teams - The Gallery - Press - News - Contact Us</div>
<div id="sep"></div>
</div>
<div id="main">Woo, look at all the sexy content!</div>
<div id="footer">
<div id="sep"></div>
Footers
</div>
</div>
</body>
</html>
I have that, and it looks like this:
http://www.tehupload.com/uploads/83477b2d8479077FirefoxScreenSnapz012.png (http://www.tehupload.com/share/7159)
Now, I want there to be two white lines down each side (like vertical lines) the same as the div with id sep (But width: 3px; height 100%;)
Also, I want the footer (The div id sep and the text aligned to the bottom of the page.
Help?
I'm not the best at explaining so ask if you don't understand
I'm currently working on a basic layout for something at my school:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
margin: 0px;
width: 100%;
}
#sep {
background-color:#FFFFFF;
height: 3px;
}
#hsep {
background-color:#FFFFFF;
height: 100%;
width: 3px;
float: inherit;
}
#logo {
background-color:#11336a;
height: 40px;
}
#navigation {
background-color:#CC0000;
height: auto;
padding: 5px;
padding-left: 5px;
}
#footer {
vertical-align: baseline;
vertical-align: 60%;
}
body,td,th {
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #3976a8;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
width: 80%;
}
</style>
</head>
<body>
<div id="contatiner">
<div id="header">
<div id="logo">
logo in here
</div>
<div id="sep"></div>
<div id="navigation">Home - The Teams - The Gallery - Press - News - Contact Us</div>
<div id="sep"></div>
</div>
<div id="main">Woo, look at all the sexy content!</div>
<div id="footer">
<div id="sep"></div>
Footers
</div>
</div>
</body>
</html>
I have that, and it looks like this:
http://www.tehupload.com/uploads/83477b2d8479077FirefoxScreenSnapz012.png (http://www.tehupload.com/share/7159)
Now, I want there to be two white lines down each side (like vertical lines) the same as the div with id sep (But width: 3px; height 100%;)
Also, I want the footer (The div id sep and the text aligned to the bottom of the page.
Help?
I'm not the best at explaining so ask if you don't understand