Here's a sample tutorial on how to create a single column css layout.
this layout includes a heading, content, 3 column adds and a footer. I also include a sample content for you to see the outcome of the layout.
This sample works on IE 6 and other compliant browsers.
---- CSS codes ----
body{
margin:0px 0px 0px 0px;
}
div.container {
margin:auto;
padding: 0px 0px 0px 0px;
}
div.topBackground{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#CC0000;
}
div.top{
width:1000px;
margin:auto;
padding:20px 0px 10px 0px;
font-family:Arial, Helvetica, sans-serif;
}
div.logo{
width:1000px;
margin:auto;
padding:0px;
}
div.image{
width:500px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
div.toplink{
float:right;
width:300px;
margin:0px 0px 0px 0px;
padding-top:0px;
padding-bottom:0px;
font-size:11px;
color:White;
}
div.menus{
clear:both;
width:1000px;
margin:auto;
background-color:black;
height:32px;
}
div.bannerad{
background-image:url('../img/banneradd.jpg');
width:1000px;
height:341px;
margin:auto;
padding:0px;
}
.clear{
clear:both;
margin:auto;
}
div.contentBackground{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-color:#E0E1E1;
}
div.contents{
width:960px;
margin:auto;
padding:20px;
background-color:white;
}
div.otherlinks{
width:960px;
margin:auto;
padding:20px;
background-color:#DDBB99;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
div.footer{
width:960px;
height:25px;
margin:auto;
padding:20px;
background-color:black;
}
div.contentDownloads{
width:960px;
margin:auto;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
}
div.contentDownloads div{
float:left;
margin:0px;
padding:0px;
width:320px;
}
div.contentDownloads div ul{
list-style-type:none;
padding:5px 0px 10px 5px;
margin:0;
font-size:small;
font-weight:bold;
}
div.contentDownloads div ul li{
width:280px;
padding:0px;
display:block;
margin:0;
font-size:small;
font-weight:normal;
text-align:left;
}
HTML code
<div class="container">
<div class="topBackground">
<div class="top">
<div class="logo">
<div class="toplink">Sign-in or Register</div>
<div class="image">
<img alt="" height="29" src="img/logo.jpg" width="136" /></div>
</div>
</div>
<div class="menus">
</div>
<div class="bannerad" >
</div>
</div>
<div class="contentBackground">
<div class="contents">
<div class="contentDownloads">
<div>
<ul>
<li>
<img alt="" src="sampleimage.jpeg" /></li>
<li>Download the trial version of FreeSoftware now and try it for yourself.
You'll be making gorgeous documents, presentations, and spreadsheets in
minutes.</li>
</ul>
</div>
<div>
<ul>
<li>
<img alt="" src="sampleimage.jpeg" /></li>
<li>Download the trial version of FreeSoftware now and try it for yourself.
You'll be making gorgeous documents, presentations, and spreadsheets in
minutes.</li>
</ul>
</div>
<div>
<ul>
<li>
<img alt="" src="sampleimage.jpeg" /></li>
<li>Download the trial version of FreeSoftware now and try it for yourself.
You'll be making gorgeous documents, presentations, and spreadsheets in
minutes.</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div class="otherlinks">Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum
iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.</div>
<div class="footer"></div>
</div>
</div>
0 comments for this post