Forum Moderators: not2easy
At the moment I'm using pixels because it means i can set it to all the right size without something being longer than the other using percentages.
It's a three column layout with a header the three columns and then a footer.
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: center;
margin: 0px;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;}
#wrapper {
width: 999px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
height: auto;
text-align: left;
border: 1px solid #000000;
}
#header {
margin: 0px;
padding: 0px;
height: 130px;
width: auto;
background-color: #3366CC;
}
#picture {
height: 130px;
width: 317px;
float: left;
}
#title {
width: 560px;
height: 25px;
float: left;
padding-left: 120px;
padding-top: 30px;
}
#title2 {
width: 583px;
height: 50px;
padding-top: 20px;
padding-left: 97px;
float: left;
letter-spacing: 10px;
}
#time {
width: 989px;
background-color: #CCFF99;
padding-left: 10px;
padding-top: 5px;
height: 25px;
}
#container {
padding: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-attachment: scroll;
background-repeat: repeat-y;
background-position: 0px 0px;
height: 1%;
width: auto;
}
#left {
margin: 0px;
width: 165px;
float: left;
background-color: #DFEAF7;
padding-left: 5px;
padding-top: 5px;
height: 1120px;
}
#nav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
line-height: 1.8em;
}
#nav li {
margin: 0px;
padding: 0px;
display: block;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
border-bottom: 2px solid #C0DFFD;
width: 100%;
}
#nav li a:link, #nav li a:visited, #nav li a:active {
color: #666666;
text-decoration: none;
display: block;
margin: 0px;
padding-top: 3px;
padding-right: 15px;
padding-bottom: 3px;
padding-left: 15px;
width: 130px;
background-attachment: scroll;
background-image: url(bullet.gif);
background-repeat: no-repeat;
background-position: 0px 50%;
}
#nav li a:hover {
Background-color:#FF6600;
color: #ffffff;
text-decoration: none;
}
#center {
width: 829px;
float: left;
margin-right: 0px;
margin-bottom: 0px;
line-height: 1.6em;
background-color: #d0e9f5;
padding-top: 25px;
height: 1100px;
}
#title3 {
height: 20px;
width: 500px;
margin-right: 0px;
margin-bottom: 0px;
background-color:#719BFD;
padding-left: 10px;
margin-left: 50px;
}
#sub {
height: 20px;
width: 390px;
float: left;
margin-right: 0px;
margin-bottom: 0px;
background-color:#719BFD;
padding-left: 10px;
margin-left: 10px;
}
#text {
width:490px;
background-color:#C8DFEA;
margin-bottom: 20px;
padding-left: 10px;
padding-top: 5px;
margin-left: 50px;
padding-right: 10px;
border-bottom: 2px solid #C0DFFD;
}
h1 {
font-size: 12px;
margin: 0px;
padding: 0px;
font-weight: bolder;
}
h2 {
font-size: 24px;
color:#CCFF99;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
}
h3 {
font-size: 12px;
color:#FF9933;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-decoration: none;
letter-spacing:3px;
}
#right {
height: 599px;
width: 394px;
float: left;
margin-right: 0px;
margin-bottom: 0px;
line-height: 1.6em;
background-color: #d0e9f5;
padding-top: 25px;
padding-left: 20px;
}
#new {
height: 519px;
background-color: #d0e9f5;
float: left;
width: 169px;
padding-left: 20px;
padding-top: 105px;
line-height: 1.8em;
}
.clearer {
font-size: 0px;
line-height: 0px;
display: block;
margin: 0px;
padding: 0px;
clear: both;
height: 0px;
width: auto;
}
#footer {
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
text-align: center;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
background-color: #3366CC;
width: 999px;
}
#footer p {
color: #999999;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}
#footer a:link, #footer a:visited, #footer a:active {
color: #999999;
text-decoration: none;
}
#footer a:hover {
color: #CCCCCC;
text-decoration: none;
}
html
<!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>#</title>
<link rel="stylesheet" type="text/css"
href="#" />
</head><body>
<div id="wrapper">
<div id="header">
<div id="picture"></div>
<div id="title"></div>
<div id="title2">
<div id="time"></div>
<div id="container"></div>
<div id="left"></div>
<div id="center"></div>
<div id="title3"></div>
<div id="text"></div>
<div id="title3"></div>
<div id="text"></div>
</div>
</div>
</div>
<div class="clearer"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Don't look too much at the html as i deleted all the content out of it and closed divs on lines where they should be inside columns.
It's more to do with the css and making it fit all screens.
If there's any decent tutorials that anyone knows of that would be a great help too. I had a look and couldn't really find anything that was helping.
Thanks for the help,
Josh
I'll have to offer a raincheck on that offer, though. I decided to try doing it a different way that might be faster, but I'm still working through the snags.
