We will be using XHTML 1.0 Strict and CSS for this. First off, we create our basic structure.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>CSS Layout Tutorial</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="menu"></div> <div id="content"> </div> <div id="footer"></div> </div> </body> </html>We are using an external style sheet, which we link to from style.css
Then we get onto making the style sheet. It's a simple style sheet, mainly used for just images, widths and heights.
*{
margin: 0;
padding: 0;
}
body{
background: #262626;
color: #c3c3c3;
font-family: tahoma, arial, verdana, sans-serif;
font-size: 11px;
}We first set everything to having no padding or margin.Then we get a background colour for the page, set the font attributes and the colour.
#container{
background: #161616 url('images/background.jpg') repeat-y;
width: 479px;
margin: 0 auto;
padding: 0 11px;
}The container, this holds everything in and it also has the background image for the bars. Using the site as an example, the background would be 500px in width with the bars on both side of the image. We then find out how large these bars are in width so we can set a padding to the container so we don't go over these bars with any other images or text. The ones I did was 11px wide, so we use the padding 0 11px;0 = top and bottom
11px = left and right
And because of these, you need to change the width of the container to match 500px. So 11+11 = 21... 500 - 21 = 479, so 479px. Our margin will center the layout.
#header{
background: url('images/header.jpg') no-repeat;
width: 478px;
height: 152px;
}The header style, we use another image for the header. Because it's not that important, and want the main information to load first, we make it into a background. Width and height as usual.#menu{
background: url('images/menu.jpg') no-repeat;
width: 477px;
height: 38px;
padding: 0 5px;
}The same with menu. We add the padding in this so our images or text doesn't get straight to end, makes it look more clean 
#content{
padding: 2px;
width: 474px;
text-align: justify;
}Content, we hadd a padding of 2 so we have some space between everything. I've justified the text, that's up to you.#footer{
background: url('images/footer.jpg') no-repeat;
width: 477px;
height: 30px;
text-align: center;
font-size: 10px;
margin-top: 5px;
}The footer is a larger one, we have the background image. width, height. the text is centered, and the size is lowered by one px. And also to separate the footer and content even more, added a margin-top: 5px;a{
color: #c3c3c3;
text-decoration: underline;
}
a:hover{
color: #c3c3c3;
text-decoration: underline;
}Style the links...Now for the content.
<div id="header"><!-- --></div>Well we have our image...
<div id="menu"><img src="images/menuroot.jpg" alt="root" /></div>You can see the image in the attachment.
<div id="content"><div class="subsection">Lorem Ipsum</div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean ante. Maecenas tempus orci vel neque. Quisque rutrum. Integer id magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur egestas enim. Phasellus consectetuer euismod nisl. Vestibulum eu urna. Nam gravida dapibus diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis porttitor, sem porttitor gravida rhoncus, nulla elit condimentum leo, eget iaculis turpis turpis quis massa. Sed feugiat, velit et mattis pharetra, nunc mi pharetra magna, euismod venenatis elit odio ut urna. Aliquam erat volutpat. Suspendisse potenti. Donec eu est. Nam molestie fermentum ligula. Donec pretium. Quisque molestie tellus sed eros. Nullam dapibus, sem ut sollicitudin euismod, nulla purus fringilla enim, vel commodo lorem mauris eget tellus. <div class="subsection">Praesent varius</div> Pellentesque scelerisque lacus. Morbi metus libero, luctus ultricies, auctor vitae, tempor et, nulla. Praesent bibendum, est et varius placerat, metus tellus imperdiet quam, vitae convallis lectus risus a est. Nunc orci tortor, imperdiet non, nonummy vitae, auctor faucibus, est. Donec non eros. Nullam gravida imperdiet dui. In in ante ut velit feugiat molestie. Suspendisse potenti. Maecenas sit amet lectus ac urna congue congue. </div>
Yea long bit, lorem ipsum text for dummy text. But wait, we've added subsection. Yes, this is like a main title thing. The css for this is.
.subsection{
font-size: 18px;
font-weight: bold;
}And last but not least... the footer.
<div id="footer">Copyright © - layout made for tutorial<br /> <a href="#" title="root">root</a></div>
That's it... below is everything I made, including the images, style sheet and the html file.
Attached Thumbnails
Attached Images
Attached Files
-
index.html 1.97KB
462 downloads
-
style.css 853bytes
515 downloads
