Menu
I made a layout what is only about 540px tall. I have a content box that scrolls and I used relative positioning to push it up into place. There is a big gap in between the bottom of the layout and the browser, I think its because the content box is at the bottom. How can I fix this. Here is my code.
Everything in the <body> tag:
<div align=”center”>
<div id=”e800600″>
<!–LAYOUT–>
<div id=”navigation”> <span id=”links”><a href=”#”>Link 1</a> | <a href=”#”>Link 2</a> | <a href=”#”>Link 3</a> | <a href=”#”>Link 4</a> </span>
<div id=”g2″></div>
<div id=”g3″></div>
<div id=”g4″></div>
<div id=”g5″></div>
<div id=”content”></div>
</div>
</div></div>
My Style Sheet:
#e800600 {width: 740px;
background-color: #CCCC99; color: #FFFFFF;
}
#navigation {background-image: url(“images/1.gif”); background-repeat: no-repeat;
width: 740px; padding-top: 70px;
}
#links {font-size: 16px;
position: relative; top: -33px; left: 75px;
cursor: default;
}
#links a:hover {color: #000000;}
img {margin-top: -2px; margin-bottom: -2px;}
#content {width: 515px; height: 340px;
text-align: left; color: #333333;
position: relative; top: -410px; left: -70px;
overflow: auto;
padding-right: 3px;
}
#g2 {background-image: url(“images/2.gif”); background-repeat: no-repeat;
width: 740px; height: 137px;
}
#g3 {background-image: url(“images/3.gif”); background-repeat: no-repeat;
width: 740px; height: 133px;
}
#g4 {background-image: url(“images/4.gif”); background-repeat: no-repeat;
width: 740px; height: 112px;
}
#g5 {background-image: url(“images/5_2.gif”); background-repeat: no-repeat;
width: 740px; height: 71px;
If someone can see what wrong and how to fix it I would be very happy because this is not the first time I’ve had to face this problem.
sites
[url]www.madddidley.com[url]www.indesignfx.com