Hi
I want to achieve this layout using CSS <!-- m --><a class="postlink" href="http://www.premier-resin-systems.co.uk/layout.jpg">http://www.premier-resin-systems.co.uk/layout.jpg</a><!-- m -->
I want it to be 3 columns, but as you can see the navigation part overlaps the red background image that I was going to put in my header div.
I would like some help if poss on how to put this design into divs before I plough staright in!!
Thanks for any help or advice!it could be done by having a header with a split background pic, cut where the black line starts where you can see far to the left.
The menu could have a fix position with a Z-index to hover above the header...
thats a quick openminded start
heres what I have so far could you explain more where I would put the nav div, but still have a 3 coloumn layout?
<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="maincontent">Main Content</div>
<div id="footer">Footer</div>
</div>
body{
margin:0;
padding:0;
font:76%/1.5em Verdana,Arial,Geneva,Helvetica,sans-serif;
text-align:center;
}
#wrapper{
width:760px;
margin-left:auto;
margin-right:auto;
}
#header{
padding:0;
margin-bottom:0;
background:black;
}
#maincontent{
padding:0;
margin-left:200px;
margin-right:200px;
background:gray;
}
#left{
float:left;
width:200px;
margin:0;
margin-right:0;
padding:0;
background:green;
}
#right{
float:right;
width:200px;
margin:0;
margin-left:0;
padding:0;
background:red;
}
#footer{
clear:both;
padding:0;
margin-top:0;
background:blue;
}Okay I have been able to come up with this, could someone take a look and see if what I have done looks right in terms of code and for seeing any probs!
<!-- m --><a class="postlink" href="http://www.premier-resin-systems.co.uk/layout">http://www.premier-resin-systems.co.uk/layout</a><!-- m -->
I want to achieve this layout using CSS <!-- m --><a class="postlink" href="http://www.premier-resin-systems.co.uk/layout.jpg">http://www.premier-resin-systems.co.uk/layout.jpg</a><!-- m -->
I want it to be 3 columns, but as you can see the navigation part overlaps the red background image that I was going to put in my header div.
I would like some help if poss on how to put this design into divs before I plough staright in!!
Thanks for any help or advice!it could be done by having a header with a split background pic, cut where the black line starts where you can see far to the left.
The menu could have a fix position with a Z-index to hover above the header...
thats a quick openminded start
heres what I have so far could you explain more where I would put the nav div, but still have a 3 coloumn layout?<div id="wrapper">
<div id="header">Header</div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="maincontent">Main Content</div>
<div id="footer">Footer</div>
</div>
body{
margin:0;
padding:0;
font:76%/1.5em Verdana,Arial,Geneva,Helvetica,sans-serif;
text-align:center;
}
#wrapper{
width:760px;
margin-left:auto;
margin-right:auto;
}
#header{
padding:0;
margin-bottom:0;
background:black;
}
#maincontent{
padding:0;
margin-left:200px;
margin-right:200px;
background:gray;
}
#left{
float:left;
width:200px;
margin:0;
margin-right:0;
padding:0;
background:green;
}
#right{
float:right;
width:200px;
margin:0;
margin-left:0;
padding:0;
background:red;
}
#footer{
clear:both;
padding:0;
margin-top:0;
background:blue;
}Okay I have been able to come up with this, could someone take a look and see if what I have done looks right in terms of code and for seeing any probs!
<!-- m --><a class="postlink" href="http://www.premier-resin-systems.co.uk/layout">http://www.premier-resin-systems.co.uk/layout</a><!-- m -->