I am assuming you mean the left side bar.
- I would get rid of the height declaration in #navigation. it will cause trouble if your content is taller than the declared height
- Yeah you could fade it using a background image. you would create the image in an editor, make it as tall as you want… let say 10px by 100px, and a gradient from the bg color of your sidebar to black.
in your CSS you would target the element… something sort of like this:
#navigation {
width: 180px;
//* height: 884px;*/
background-color: #3E3535;
border-left: 3px solid #A62300;
border-right: 3px solid #A62300;
border-top: 3px solid #FFAE00;
padding-bottom:100px; background: url(fadeToBlack.gif) 0 100% repeat-x #your #3E3535 ;
}
There are techniques which also allow you to create gradients directly in CSS, however they are a bit more convoluted, vary different from browser to browser and and are only supported by SOME the latest browsers. So will stick to the basics for now.
that’s one option.
alternatively keep it there and scroll the page itself, if that makes sense.
actually am confused by this. But you can use “position:fixed” instead of “position: absolute” to keep #navigation fixed on the screen, while everything else would scroll. so you may want to apply it to the header as well. in that case, you would need to figure out a way to calculate the height of your header. then code something like
#header{height:105px; /* I loathe using px here, but for the brevity of this example*/
#navigation {
width: 180px;
top:105px;
bottom:0;
background-color: #3E3535;
border-left: 3px solid #A62300;
border-right: 3px solid #A62300;
border-top: 3px solid #FFAE00;
position :fixed ;/* MAKE SURE THIS IS NOT OVERRIDEN LATER IN THE CODE*/
}
I know you are just starting with CSS but the problem here is the strategy is ALL WONG. you have used fixed sizes, based on pixels as well as absolute positioning and that just not the way a web-layout works. I would reconsider doing the whole thong over again, strategizing around flexible heights and positions for your design and and then using floats or b/g images to crate faux columns. This is a quick example of how to pull off this technique.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body, p{padding:0; margin:0;}
.pageWrap{margin:0 10%; background: silver}
.hed,.fut{min-height:100px; background: pink}
.cont {padding-left:100px}
.cont .inner {border-left:2px groove; display:inline-block; width: 100%;background: orange; }
.cont {background: cyan; }
.nav{background: cyan; width:100px; float:left;margin-left:-102px;}
.main
</style>
</head>
<body>
<div class="pageWrap">
<div class="hed">Header</div>
<div class="cont">
<div class="inner">
<div class="nav">
Navigation
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
<div class="fut">Foot</div>
</div>
</body>
</html>
Incidentally… you also have some odd non HTML elements P4, p5??? that you should consider correcting.
hope that helps