Background colour extends too far vertically

st00dent

st00dent

st00dent

Associate
Joined
25 Jul 2005
Posts
430
Hi,

I want to use two overlapping sections in the footer of my page, giving a transparency effect. This is working fine, however as my footer is positioned relatively (bottom: 100px), the background colour of the page sticks out 100px below it. Is there a way I can cut this off without affecting the layout in any other way?

Any advice would be appreciated, thanks.

Code: 
html, body {
margin: 0;
padding: 0;
height: 100%;
margin: 0 0 1px;
background-color: #333333;
}

#footer {
width: 150%;
min-height: 150px;
height: 150px;
background-color: #00A887;
opacity: 0.5;
filter:Alpha(opacity=50);
border-top: 1px solid #cccccc;
z-index: 2;
position: relative;
bottom: 100px;
}
 
I'm not 100% sure if I get what you're saying but could you not simply add another container.

Code: 
<body>
	<div id="container">
		<!-- content here -->
	</div><!-- end of container -->
	<div id="footer"></div>
</body>

Use the current body bg color on the container div, and then change the body bg color to whatever matches the very bottom of your footer.
 
Hi. I'll try to explain it a bit better. My current layout is shaped like a capital letter I. I have a simple header at the top and footer at the bottom, separated from the middle by a horizontal line. The middle section users 80% width of the page.

What I'm trying to to is extend the middle section vertically, so that it overlaps both the header and the footer, giving transparency effects with z-index. However, if I relatively position it higher than normal, a white gap appears at the bottom of the page to compensate.

I've tried your suggestion but so far been unable to get it working with the z-index properly. I hope that makes it easier to understand.
 
You must log in or register to reply here.
Back
Top Bottom