It displays (at least for me) a strictly "tiered" (stacked) layout:
Navigation is above Main Content, not next to it.
It's specifically getting two columns to extend the height of the longer one
that's got me worked up.
Jim Davis
_____
From: Sandy Clark [mailto:[EMAIL PROTECTED]
Sent: Tuesday, May 25, 2004 7:30 PM
To: CF-Community
Subject: RE: Damn CSS... Damn it to hell!
Hmm.
How bout this?
Note I haven't tested completely for cross browser, but it works fairly
well.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple Layout</title>
<style type="text/css">
/*<![CDATA[*/
body, html{
height: 100%;
top:0;
left:0;}
#container{
width:100%;
left:0;
position:absolute;
top:0;
padding: 0;
}
#content{
width:100%;
margin-top:3ex;
padding:1em;
position:relative;
}
#content div h3{
border-bottom:.1em solid #000000;
}
#footer{
clear:both;
width:100%;
padding:.5em;
margin-top:1.5ex;
border-top:.15em solid #342266;
border-right:.15em solid #342266;
color:#ffffff;
background:#83c2cd;
position:static;
min-height:4em;
}
#heading{
padding-bottom:-2ex;
width:100%;
margin-bottom:2ex;
border-bottom:.15em solid #342266;
border-right:.15em solid #342266;
background:#83c2cd;
left:0;
top:0;
}
#nav{
border-top:.15em solid #342266;
background:#7cc6ac;
font-size:.9em;
padding: .25em;
min-height: 1.5em;
}
#nav ul{
margin: .15em;
padding-left: 4em;
position: absolute;
vertical-align: top;
}
#nav ul.right{
margin-right: 1em;
float: right;
top: 0;
position: relative;
vertical-align: top;
}
#nav ul li{
display: inline;
font-size: .85em;
padding: .5em;
list-style: none;
}
#nav ul li a:link,#nav ul li a:visited{
color: #6a568b;
}
#nav ul li a:link:focus,#nav ul li a:visited:focus{
color: black;
}
#nav ul li a:link:hover,#nav ul li a:visited:hover,
#nav ul li a:link:active,#nav ul li a:visited:active{
color: #999999;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div id="heading">
<h1>Title</h1>
<h2>Subtitle</h2>
<div id="nav">
<ul>
<li>Subnav item 1</li>
<li>Subnav item 2</li>
</ul>
</div>
</div>
<div id="content">
Main Content goes here
</div>
<div id="footer">Footer Information goes here</div>
</div>
</body>
</html>
SandyClark
CSS for Better Sites and Creating Accessible Web Forms Talks at CFUN04.
http://www.cfconf.org/cfun-04/
_____
From: Jim Davis [mailto:[EMAIL PROTECTED]
Sent: Tuesday, May 25, 2004 7:07 PM
To: CF-Community
Subject: Damn CSS... Damn it to hell!
Sorry - just venting.
Every time I get into this it amazes me that CSS made it so damn difficult
to do one of the most common layouts online: a full-width header, two
equal-height (despite content) columns (one for navigation and one for
content), and a full-width footer. In other words, this:
<table>
<tr colspan="2"><td>Header</td></tr>
<tr> <td>Navigation</td>
<td>Content</td>
</tr>
<tr colspan="2"><td>Footer</td></tr>
</table>
How could a group spend upwards of three years defining CSS and not consider
that people might want to use it to build this kind of layout? Especially
when so many (perhaps most) sites use a variation on this theme?
I've yet to find a simple, no hack way to achieve this and it's driving me
nuts. You can do it (sorta) but after you add in all the browser hacks,
goofy code and workarounds you still end up with something that takes 10
times the code of a simple table layout and degrades poorly to older
browsers.
I love the idea of CSS. I love the idea of separating content from
presentation. But Christ-on-a-crutch why can't our replacement technology
elegantly handle the simplest and most common layout ever!
Rant over...
Jim Davis
_____
_____
[Todays Threads] [This Message] [Subscription] [Fast Unsubscribe] [User Settings]
