|
Tailslide -> RE: CSS 101 anyone? (11/11/2007 3:34:35)
|
Here you go - here's a very simple CSS two-column layout which works in Firefox, Opera, IE5, IE5.5, IE6, IE7 etc (in the example the CSS is all in the document - obviously you'd remove that to a separate stylesheet):
<!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" lang="en" xml:lang="en">
<head>
<title>CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<!--
body, html, ul {margin:0; padding:0;}
body {background-color:#efefef; font-family: Arial, Helvetica, sans-serif; font-size:100.01%;color:#555;text-align:center;}
#container {text-align:left;margin:1em auto; width:760px; font-size:76%; background-color:white; border:1px solid #777;}
#header {background-color:#ccc;padding:15px;}
#sidebar {float:left; width:22%;margin:10px 0 0 0;display:inline;}
#content {float:right; width:75%;margin:5px 0 5px 0;display:inline;padding:0 8px;}
#footer {clear:both;border-top:1px solid;padding:5px;}
#footer p {margin-left:10px;}
#navigation {margin-left:10px;}
#navigation li{list-style: none;border-bottom:1px solid black;}
#navigation a {font-weight:bold;color:#000;padding:5px;display:block;border-bottom:none;}
#navigation a:link, #navigation a:visited { color:#000 ; display:block;text-decoration: none; }
#navigation a:hover, #navigation a:focus, #navigation a:active {color: #fff;background-color:black;}
a:link {color: black; text-decoration:none; border-bottom:1px solid #ccc;}
a:visited {color: black; text-decoration:none; border-bottom:1px solid #000;}
a:focus, a:hover, a:active {color: white; text-decoration:none; border-bottom:1px solid #fff;background-color:black;}
h1 {margin:0;}
-->
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>This is the Heading</h1>
</div> <!-- end header -->
<div id="sidebar">
<ul id="navigation">
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</div> <!-- end sidebar -->
<div id="content">
<h2>This is the Sub-heading</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris non lectus et libero ornare scelerisque. Quisque adipiscing. Aliquam risus justo, ultrices non, fermentum non, viverra vitae, tortor. Phasellus pellentesque posuere turpis. Integer quis est. Fusce tincidunt massa lacinia arcu. Morbi gravida egestas dui. Phasellus vel metus at nulla fringilla laoreet. Pellentesque at purus id tellus pretium nonummy. Duis nunc. Fusce vel nunc. Maecenas ut dolor. Cras in leo quis elit blandit molestie.</p>
<p>Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec nisi enim, tincidunt at, blandit sit amet, facilisis id, nisl. Cras lacus mauris, vehicula vitae, convallis ac, pharetra quis, nulla. Praesent a purus. Nam elit nunc, bibendum sed, ornare ullamcorper, sollicitudin ut, justo. Duis urna risus, tristique posuere, nonummy consequat, dapibus sit amet, dolor. Praesent varius ante ut lectus. Maecenas gravida, urna in nonummy malesuada, pede quam malesuada metus, vel dictum pede nibh quis mauris. Mauris vitae elit vel augue congue fringilla. Donec lobortis sem eu massa. Duis est mauris, aliquet sed, imperdiet quis, consectetuer sit amet, lorem. Donec purus. Praesent a turpis vel sapien mollis adipiscing.</p>
</div> <!-- end content -->
<div id="footer">
<p>© 2007 Whatever</p>
</div> <!-- end footer -->
</div> <!-- end container -->
</body>
</html>
Now all you need to do to make life a bit easier is to use includes for the header, sidebar and footer to contain content which is repeated on all pages - that way you only need to make changes in the include pages and it will be repeated throughout the site. I use PHP includes but there's nothing wrong with Server-side includes.
|
|
|
|
