x_l6_@hotmail.com Posted December 12, 2007 Share Posted December 12, 2007 Hello, I have come across this code and wondered if someone could explain to me how it works, and whats going on in the code so I can learn how to create layouts like it using CSS. Index page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>CSS Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="css.css" rel="stylesheet" type="text/css"> <!-- link to css file --> </head> <body> <p> </p> <p> </p> <div id="container"><!-- link to css file to display to page --> <div id="header"></div> <!-- link to css file to display to page --> <div id="left"></div> <!-- link to css file to display to page --> <div id="middle"></div><!-- link to css file to display to page --> <div align="center"></div> <!-- link to css file to display to page --> <div id="right"></div> <!-- link to css file to display to page --> <br/> </div> </body> </html> <!-- end of html --> CSS Page: body, html { /*body details */ margin: 0; padding: 0; font: 11px tahoma, arial, serif; } #container { /*container details */ margin: auto; padding: 0; width: 760px; border: 1px solid #000000; } #header { /*header details */ width: 760px; height: 120px; border-bottom: 1px solid #000000; } #left { /*left details */ width: 180px; float: left; height: 500px; } #middle { /*middle details */ width: 398px; float: left; height: 500px; border-left: 1px solid #000000; border-right: 1px solid #000000; } #right {/*right details */ width: 180px; height: 500px; float: left; } br { clear: both; } Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted December 12, 2007 Share Posted December 12, 2007 That example is a bit of a mess, I cleaned it up a bit and put some comments within the code for you to look at. You should also read some of the excellent tutorials out there - http://css.maxdesign.com.au/index.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Title</title> <style type="text/css"> /* CSS RESET ----------------------------------- */ /* this is used to reset all the various and differing browsers default styles. It provides a "fresh canvas" to work on */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, big, cite, code, em, img, q, small, strike, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {padding:0; border:0; margin:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100.01%; font-family:inherit; vertical-align:baseline;} /* YOUR STYLES ----------------------------------- */ body {font-size:11px; font-family:tahoma, arial, serif;} /*sets the font-size and font family to be inherited throughout the document*/ #container {width:760px; border:1px solid #000; margin:0 auto;} /*this is targeting an element with the id of "container". The margin value is shorthand for top-margin:0; right-margin:auto, bottom-margin:0, left-margin:auto. Since the container has a defined width the auto values will center the container in the middle of the page*/ #header {width:760px; height:120px; border-bottom:1px solid #000;} #left {float:left; width:160px; padding:10px;} /*the float property is often used to create column layouts. It creates a block box that is shifted to the left/right as far as possible.*/ #middle {float:left; width:378px; padding:10px; border-left:1px solid #000; border-right:1px solid #000;} #right {float:left; width:160px; padding:10px;} #footer {clear:both; width:750px; padding:10px; border-top:1px solid #000;} /* SELF-CLEARING FLOATS ----------------------------------- */ /*this is a technique to properly clear elements that contain floated elements*/ /*clears in modern browsers only*/ #container:after {content: "."; display:block; height:0; font-size:0; line-height:0; clear:both; visibility:hidden;} /*clears in IE7 only*/ *+html #container {min-height:1px;} /*clears in IE6 only*/ * html #container {min-height:1px;} </style> </head> <body> <div id="container"><!-- the element that contains all the other elements. We can style this element by targeting its id in the css file --> <div id="header"></div> <div id="left"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eleifend metus a elit. Nulla facilisi. Aliquam bibendum velit nec nulla tempor iaculis. Nulla lobortis nibh eget pede. Sed ut nibh. Donec nec lectus vel nulla interdum pharetra. Fusce ligula est, lacinia a, ultrices et, pellentesque non, orci.</p> </div> <div id="middle"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eleifend metus a elit. Nulla facilisi. Aliquam bibendum velit nec nulla tempor iaculis. Nulla lobortis nibh eget pede. Sed ut nibh. Donec nec lectus vel nulla interdum pharetra. Fusce ligula est, lacinia a, ultrices et, pellentesque non, orci. Sed ac elit. Integer non eros. Suspendisse elit lacus, suscipit non, fermentum ut, tristique et, libero. Aenean id mauris gravida libero laoreet eleifend. Ut et nunc ut sem hendrerit dignissim. Nam vel massa in nisi sollicitudin convallis.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eleifend metus a elit. Nulla facilisi. Aliquam bibendum velit nec nulla tempor iaculis. Nulla lobortis nibh eget pede. Sed ut nibh. Donec nec lectus vel nulla interdum pharetra. Fusce ligula est, lacinia a, ultrices et, pellentesque non, orci. Sed ac elit. Integer non eros. Suspendisse elit lacus, suscipit non, fermentum ut, tristique et, libero. Aenean id mauris gravida libero laoreet eleifend. Ut et nunc ut sem hendrerit dignissim. Nam vel massa in nisi sollicitudin convallis.</p> </div> <div id="right"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eleifend metus a elit. Nulla facilisi. Aliquam bibendum velit nec nulla tempor iaculis. Nulla lobortis nibh eget pede. Sed ut nibh. Donec nec lectus vel nulla interdum pharetra. Fusce ligula est, lacinia a, ultrices et, pellentesque non, orci.</p> </div> <div id="footer"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
x_l6_@hotmail.com Posted December 12, 2007 Author Share Posted December 12, 2007 Thanks, I found that really helpful. I will also take a look at the tutorial site. Thanks, Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.