Forum Moderators: open
.nav{
position : absolute;
width : 225px;
top : 0px;
left : 0px;
background-color : #FFFFCC;
padding : 10px;
border : none;
color : Teal;
}
i'm sure this was discussed a while back here but can't find the thread
If it's the colored background for the nav that you are worried about and you are using an absolute width, you might be able to achieve the same effect with the background-image technique, like this:
<html>
<head>
<title>Test</title>
<style type="text/css">
.nav {
position: absolute;
width : 225px;
background-color : transparent;
padding : 10px;
color : Teal;
margin-left: -225px;
}
#content {
background : white url(FFC1x225.png) repeat-y; /* where FFC1x225.png is a 1 x 225 px graphic of pale yellow */
padding-left: 225px;
}
</style>
</head><body>
<div id="content">
<div class="nav">
<p>This is the navbar.</p>
</div>
<p>This is body content.</p>
<p>This is body content.</p>
<p>This is body content.</p>
</div>
</body>
</html>
The layout achieved although not liquid, does render the desired way (i.e. content first) in non css compatible browsers.
It involves putting the content and nav bar into a container div so a header and footer can be built in if required, then you can play with the top positioning of the nav element as required, and It puts a coloured border on the right hand side too, but obviously playing with the width of the content div would sort that, if required...
any way here's the code (tested in IE6, NN6 and opera), see what you think...
CSS:
body{
background-color: #fff;
color: #000;
margin: 0;
padding: 0;
}
#container{
background-color: #ffffcc;
color: #000;
margin: 0;
padding: 0;
}
.nav{
position: absolute;
top: 30px;
left: 0;
background-color : transparent;
width: 225px;
padding : 10px;
border : 0;
color : Teal;
}
#content{
position: relative; /* relative to the container div */
top: 0;
left: 225px;
padding: 10px;
width: 68%;
background-color: #fff;
color: #000;
}
#footer, #header{
clear: both;
background-color: #999;
color: #fff;
width: 100%;
}
HTML:<from body tag>
<body>
<div id="header">Header Here</div>
<div id="container"><!-- extra container div -->
<div id ="content">
lots and lots of content here
</div><!-- content -->
<div class="nav">nav here</div>
</div><!-- container -->
<div id ="footer">footer here</div>
</body>
<html>
<head>
<title>test</title>
<style type="text/css">
div#hack {
background: #FFFFCC;
}
div#nav {
float: left;
width: 225px;
padding: 10px;
color : Teal;
border: none;
}
div#content {
margin-left: 245px;
background: #FFF;
}
</style>
</head>
<body>
<div id="hack">
<div id="nav">
<p>This is the nav</p>
</div>
<div id="content">
<p>This is the content.</p>
<p>This is the content.</p>
<p>This is the content.</p>
</div>
</div>
</body>
</html>The trick is to use the div#hack to give the sidebar its background color. I've also now found that this works for three column layouts (with a float: right and left for both sides, and margins on the content).
[on preview: Looks like SuzyUK is working on similar lines. Nice.]
partly i'm using css here for seo reasons and i want to have the "content" high up in the code and the nav bar low down in the code,
i'm checking out suzys ideas, looks interesting right now.
another late night i guess ... he he
Just put the same height rule on the body element.
I've not tested it so let me know, but I remember seeing a thread about this a while back.....
Nick
not sure what you mean, do you mean
body { height:100%;}
.nav {height:100%;}
if so no joy, or was your pointer more cryptic nick ? :)
Nick
