The HTML is only a slight adjustment to the two column layout so you’ll need to simply add another column before the main content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><title>3 Column Fluid Layout</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><div id="container"><div id="header"><h1>Page Title</h1></div><ul id="navigation"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li><li><a href="#">Link 4</a></li><li><a href="#">Link 5</a></li></ul><div id="additional"><p>Morbi convallis lectus a elit. Morbi augue. Aenean quis ipsum non dui interdum egestas. Suspendisse quis turpis. Suspendisse et sem in neque dictum hendrerit. Nulla pede.</p></div><div id="content"><h2>Page Content</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pulvinar eros eu diam. Quisque ut orci ut nunc lobortis aliquam. Praesent metus. Pellentesque luctus. Suspendisse nisl.</p><p>Morbi convallis lectus a elit. Morbi augue. Aenean quis ipsum non dui interdum egestas. Suspendisse quis turpis. Suspendisse et sem in neque dictum hendrerit. Nulla pede.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pulvinar eros eu diam. Quisque ut orci ut nunc lobortis aliquam. Praesent metus. Pellentesque luctus. Suspendisse nisl.</p></div><div id="footer"><p>© <a href="http://www.dave-woods.co.uk">Dave Woods</a></p></div></div></body></html>CSS
You should already have the following CSS from the two column tutorial.
* {
padding: 0;
margin: 0;
}
body {
font-size: 100%;
font-family: arial, verdana, helvetica, sans-serif;
background-color: #CCC;
}
h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.4em;
}
a, a:link {
color: #CCC;
}
a:hover {
color: #FFF
}
#content p {
margin-bottom: 10px;
}
#container {
padding: 20px;
font-size: 0.8em;
}
#header {
background-color: #C99;
padding: 30px;
border: 1px solid #000;
margin-bottom: 20px;
}
#navigation {
float: left;
width: 200px;
padding: 10px;
background-color: #66C;
border: solid 1px #000;
list-style: none;
}
#content {
margin-left: 242px;
border: solid 1px #000;
padding: 10px;
background-color: #FFF;
}
#footer {
background-color: #66C;
padding: 10px;
border: 1px solid #000;
margin-top: 20px;
text-align: center;
}
Now we need to add the CSS rules for the new additional column
#additional {
float: right;
width: 200px;
padding: 10px;
background-color: #99CC99;
border: solid 1px #000;
}
And finally, we need to modify the #content div by providing a right margin to cater for this additional column.
#content {
margin-left: 242px;
border: solid 1px #000;
padding: 10px;
background-color: #FFF;
margin-right: 242px;
}
0 komentar:
Post a Comment