Saturday, June 12, 2004

More CSS 4-panel layout using DIVs (attempt #2)

1) Removed the "Main" DIV tag from the previous attempt. (Go look at BlueRobot.com's 2-panel layout.)

2) Decided that I liked the look of CSS Layout Techniques: for Fun and Profit where the side-bar menu is on the right, which allows text to fill the width of the window once you scroll down past the end. That looks more natural then a left side menu with a fixed left margin. Internet Explorer 6 also seems to like that layout a bit better. (BlueRobot.com's 2-panel right menu layout)

HTML and CSS (see what it looks like, short-body version):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS 4-panel layout example #2 (June 2004)</title>
<style media="screen" type="text/css">
body {
background-color: White;
color: Black;
font-family: verdana, arial, helvetica, sans-serif;
}
#TopNav {
background-color: Fuchsia;
padding: 2px;
}
#SideBar {
background-color: Gray;
float: right;
width: 15%;
}
#BlogBody {
background-color: Orange;
padding: 2px;
}
#Footer {
background-color: Purple;
clear: right;
padding: 2px;
}
</style>
</head>
<body>
<div id="TopNav">foo foo foo foo foo foo</div>
<div id="SideBar">sidebar<br>sidebar<br><br>sidebar<br>sidebar<br>sidebar<br>sidebar</div>
<div id="BlogBody">
blog body blog body blog
</div>
<div id="Footer">footer-copyright</div>
</body>
</html>

Bugs:

  1. [IE5/Windows]: It's possible that this layout will not work properly on Internet Explorer 5 for MS-Windows. I suspect that IE5's quirks won't really matter in this particular layout, but I have yet to test it.

No comments: