Navigation? Can’t live without it
Most websites need a navigation system, something consistent. Mine certainly does and before today you would have had to scroll to the bottom of the home page to see it. I figured we’d have it above the fold so that visitors on the most common screen resolutions could see it. Placing it to the left also helps as this is where visitors typically look when they want to navigate around a website.
So, how did I do it?
I created a container which holds the content, the navigation and the right hand content and styled with the relative CSS attribute. Then I absolute positioned the navigation and the right hand content within the container and gave the content huge padding on the left and right hand sides so that the content elements don’t overlap.
To get the running background emphasizing the three column layout was a case of adding a very, very thick right and left border to the container. Then it was just a case of negatively re-positioning the navigation and right hand content elements to pull them back over the extra wide container (extra wide because now it has a very very think border).
Here’s the CSS:
position:relative;
border-left:200px solid #c0c0c0;
border-right:270px solid #ccc;
text-align:justify;
line-height:1.6em;
padding:10px 40px 10px 40px;
min-height:500px;
}
#right {
position:absolute;
top:0;
right:-253px;
width:245px;
padding:20px 0 0 0;
}
#sidebar {
position:absolute;
top:0;
left:-204px;
padding-top:20px;
width:200px;
text-align:left;
line-height:normal;
font-size:90%;
}
