The layout is now valid HTML 4.01 Strict and valid CSS (but there are still color warnings...). Works in both IE6 and FF, and probably most others.
Final link http://www.jaysfiles.co.uk/index4.html
CSS:
Code: Select all
body {
font: 11px verdana, arial, helvetica, sans-serif;
background-image: url('dot.jpg');
}
h1 {
letter-spacing: 10px;
font-weight: bold;
font-size: 30px;
}
h2 {
margin: 0px 0px 15px 0px;
padding: 0px;
letter-spacing: 5px;
font-size: 28px;
font-weight: bold;
color: #CCCCCC;
}
h3 {
font: bold 12px/14px verdana, arial, helvetica, sans-serif;
color: white;
margin: 0px 0px 5px 0px;
border: 1px solid black;
background-color: #00CC00;
padding: 3px;
}
hr {
border: 1px solid black;
width: 75%;
}
p {
font: 11px/20px verdana, arial, helvetica, sans-serif;
margin: 0px 0px 0px 0px;
}
form {
margin: 0px 0px 0px 0px;
}
a {
color: #00CC00;
text-decoration: none;
}
a:link {
color: #00CC00;
}
a:visited {
color: #00CC00;
}
a:hover {
color: #33FF00;
}
.center {
margin: 0px;
padding: 0px;
text-align: center;
}
.textinput {
border: 1px solid black;
margin: 0px 0px 5px 0px;
}
.submit {
border: 1px solid black;
background-color: #EEEEEE;
color: black;
margin: 5px;
}
.content {
position: relative;
min-width: 120px;
margin: 0px 186px 16px 186px;
border: 1px solid #CCCCCC;
background-color: white;
padding: 10px;
}
.navLeft {
float: left;
left: 20px;
}
.navRight {
float: right;
right: 20px;
}
.navContainer {
border: 1px solid #CCCCCC;
background-color: white;
padding: 10px;
margin: 0px 0px 16px 0px;
width: 150px;
}
.header {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 20px;
border: 1px solid #CCCCCC;
line-height: 11px;
background-color: #EEEEEE;
}
.footer {
clear: both;
margin: 0px;
padding: 5px;
text-align: center;
}Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JaysFiles.co.uk</title>
<style type="text/css" media="screen">@import "layout.css";</style>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</head>
<body>
<div class="header">
<h1><a href="http://www.jaysfiles.co.uk" title="JaysFiles.co.uk">JaysFiles.co.uk</a></h1>
</div>
<div class="navLeft">
<div class="navContainer">
<h3>:: Navigation</h3>
<p>
> <a href="http://www.alistapart.com/" title="A List Apart: For People Who Make Websites">A List Apart</a><br />
> <a href="http://greasyskillet.org/" title="The Website of Dave Elfving">Greasy Skillet</a><br />
> <a href="http://royrosenow.com/" title="Sketches, illustrations, and Voodoo Bob">Roy Rosenow</a><br />
> <a href="http://swankyal.com/" title="A swanky weblog">SwankyAl</a><br />
> <a href="" title="">Fake Link One</a><br />
> <a href="" title="">Nothing Here</a><br />
> <a href="" title="">Links Nowhere</a><br />
> <a href="" title="">Fake Link Four</a><br />
> <a href="" title="">Fifth Fake Link</a><br />
</p>
</div>
</div>
<div class="navRight">
<div class="navContainer">
<h3>:: Login</h3>
<form action="" method="post">
<p>
Username:<br />
<input type="text" name="username" class="textinput" maxlength="20" value="" /><br />
Password:<br />
<input type="password" name="password" class="textinput" maxlength="20" /><br />
</p>
<div class="center"><input type="submit" name="submit" class="submit" value="Login" /></div>
</form>
<div class="center"><a href="lostpassword.php" title="Lost Password">Lost your password?</a></div>
</div>
<div class="navContainer">
<h3>:: User Info</h3>
<p>
# user(s) online.<br />
Most online ever: #<br />
</p>
</div>
</div>
<div class="content">
<h3>:: Flanking Menus</h3>
<p>With the popularity of three column layouts, this layout is bound to be useful to many. You may have seen this technique used at <a href="http://www.wrongwaygoback.com/" title="wrongwaygoback">dynamic ribbon device</a>. In fact, this "flanking menus" technique was devised by BlueRobot for that site. Surprisingly, the technique has caused quite a bit of talk. The concept is simple: a content box with large margins is flanked by two additional (menu) boxes.</p>
<p>An important benefit of this technique is the order of elements in the HTML source. Here, the order is essentially content, menu one, menu two. For old browsers, text-only browsers, screen-readers, and many alternative devices, this means that the content is displayed before the menus. And, after all, most users visit a page for its content.</p>
</div>
<div class="content">
<h3>:: Notes</h3>
<p>This layout fails in IE4.5/Mac. That browser has poor support for CSS absolute positioning, yet it recognizes and executes the CSS @import statement used to hide CSS from broken browsers. Currently, there is no known solution.</p>
</div>
<div class="content">
<a href="default.asp" title="Layouts to make your own...">< Return to the Layout Reservoir</a> :: <a href="view_css.asp?layout=layout3" title="">View the CSS</a>
</div>
<div class="footer">
© Copyright <a href="http://www.jay-designs.co.uk" title="Jay Designs">Jay-Designs.co.uk</a> 2006 | Best viewed in 1024x768 | CSS based on <a href="http://www.bluerobot.com/web/layouts/" title="BlueRobot CSS Layouts">BlueRobot</a>
</div>
</body>
</html>Anyway, thanks for all the help and use my layout as you wish