|
 |
|
|
10-07-2009, 12:13 PM
|
Z-Index Issue
|
Posts: 128
Name: Chris Kummelstedt
|
Hey Forum,
I am having problems getting around an issue:
I am trying to get the div called "bottombgcont" (the green one) at the very bottom of my page to stay at the bottom, while at the same positioning my main content DIV above the green one (using Z-index) with a margin of 150px to the end of the page.
The problem I am having trouble with is that the 150px bottom-margin set for the main div acts relative to the green div, even though I have it z-indexed, and not against the bottom of the page; hence there is a gap between the green div and the content, and the latter is not overlapping the former as I want it to.
Have been scratching my head for a while now. 
can anybody help? 
many thanks,
Chris
http://www.freestarregister.com/chris/test2.php
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body
{
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-color:#ff7002;
}
/* Container for top background */
#topbgcont
{
position:fixed;
left:0px;
top:0px;
width:100%;
z-index:-1;
height:300px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
background-image:url('./testimages/bgt.png');
background-repeat:repeat-x;
background-position:top right;
}
/* Main Container */
#maincont
{
position:absolute;
text-align:center;
margin-top:100px;
margin-bottom:100px;
padding:0px;
}
/* Main Container Cross Browser Fix*/
.center
{
padding:0px;
margin-top:100px;
margin-bottom:100px;
margin-left:auto;
margin-right:auto;
width:85%;
text-align:left;
}
/*Header*/
#bgheadtopcont
{
padding:0px;
margin:0px;
width:100%;
height:41px;
background-image: url('./testimages/topbg.png');
background-position: 41px 0px;
background-repeat: repeat-x;
background-position: top left;
}
#leftbgtop
{
padding:0px;
margin:0px;
height:41px;
width:41px;
background-image: url('./testimages/topbg.png');
background-position: 41px 0px;
background-repeat: repeat-x;
background-position: top left;
float:left;
}
#header
{
padding:0px;
margin:0px;
height:100px;
width:100%;
background-color:#990021;
}
#headerbottom
{
padding:0px;
margin:0px;
width:100%;
background-color:#880000;
}
/*Header Transition Colour Table*/
table.headtrans
{
table-layout:fixed
}
/*Left*/
td.htleft, td.htright
{
background-image: url('./testimages/flowerleft.png');
background-repeat: repeat-x;
background-position: top right;
background-color:#FF0000;
}
/*center*/
td.htcenter
{
background-color:#FF00FF;
}
/*End Header Transition Colour Table*/
/*Content/Nav Table*/
table.contenttable
{
table-layout:fixed
}
td.leftnav, td.rightnav
{
background-color:#f9587b;
}
/*Left*/
td.leftnav
{
background-image: url('./testimages/flowerleft.png');
background-repeat: repeat-y;
background-position: top right;
}
/*right*/
td.rightnav
{
background-image: url('./testimages/flowerright.png');
background-repeat: repeat-y;
background-position: top left;
}
/*content*/
td.content
{
background-color:#F56E8B;
}
/*End Content/Nav Table*/
/*Footer*/
#footertop
{
padding:0px;
margin:0px;
height:10px;
width:100%;
background-color:#880000;
clear:both;
}
#footer
{
padding:0px;
margin:0px;
height:100px;
width:100%;
background-color:#FF0000;
}
#footerbottom
{
padding:0px;
margin:0px;
height:10px;
width:100%;
background-color:#880000;
}
/* Container for bottom background */
#bottombgcont
{
clear:both;
position:relative;
left:0px;
top:0px;
width:100%;
z-index:-1;
height:150px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
background-color:#00FF00;
}
</style>
</head>
<body>
<!--TOP BG-->
<div id=topbgcont>
Test
</div>
<div id="container">
<div class="center">
<!--HEADER-->
<div id="bgheadtopcont">
<div id="leftbgtop">
</div>
</div>
<div id="header">
Header
</div>
<div id="headerbottom">
<table class="headtrans" border="0px" width="100%" cellspacing="0px">
<tr>
<td class="htright" width="20%"></td>
a
<td class="htcenter" width="60%"></td>
<td class="htleft" width="20%"></td>
</tr>
</table>
</div>
<!--CONTENT/NAVIGATION-->
<table class="contenttable" border="0px" width="100%" cellspacing="0px">
<tr>
<td class="leftnav" width="20%">Left Nav</td>
<td class="content" width="60%">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</td>
<td class="rightnav" width="20%">Right Nav</td>
</tr>
</table>
<!--FOOTER-->
<div id="footertop">
</div>
<div id="footer">
Footer
</div>
<div id="footerbottom">
</div>
</div>
</div>
<!--BOTTOM BG-->
<div id=bottombgcont>
Test
</div>
</body>
|
|
|
|
|
10-07-2009, 09:26 PM
|
Re: Z-Index Issue
|
Posts: 10,016
Location: Tennessee
|
Why on earth do you have a TABLE stuck in the middle of all that?
The bottom section is being positioned relative to the <body> and not anything else. An element is positioned relative to its nearest positioned ancestor - and since you don't have anything else positioned that is an ancestor to the bottom section, it's being positioned relative to <body>
In the url you gave, there is no #maincont in your html.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
10-08-2009, 02:39 AM
|
Re: Z-Index Issue
|
Posts: 128
Name: Chris Kummelstedt
|
Thanks LadynRed,
I have now seen the wisdom of your way, and have adapted to a div there instead of a table, as well as changed the id of the relevant div (how did you spot that so quickly?!).
However, there are still problems,
1) The Green Div "bottombgcont" does not want to stay at the bottom of body where I want it.
2) There is no margin between the Div "maincont" and the bottom of body.
3) as a side note;
do you by any chance have an idea to remove the spaces between my new content div and the above footer and header?(can you tell that I am very new to all this?)
Thanks for the help LadynRed (this is the third time you've helped me!)
|
|
|
|
|
10-08-2009, 02:42 AM
|
Re: Z-Index Issue
|
Posts: 128
Name: Chris Kummelstedt
|
sorry
here is the adapted code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body
{
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-color:#ff7002;
background-image: url('./images/bg/bgd.gif');
background-position: bottom left;
background-repeat: repeat-x;
}
/* Container for top background */
#topbgcont
{
position:fixed;
left:0px;
top:0px;
width:100%;
z-index:-1;
height:300px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
background-image:url('./testimages/bgt.png');
background-repeat:repeat-x;
background-position:top right;
}
/* Main Container */
#maincont
{
position:absolute;
text-align:center;
margin-top:100px;
margin-bottom:100px;
padding:0px;
}
/* Main Container Cross Browser Fix*/
.center
{
padding:0px;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
width:85%;
text-align:left;
}
/*Header*/
#bgheadtopcont
{
padding:0px;
margin:0px;
width:100%;
height:41px;
background-image: url('./testimages/topbg.png');
background-position: 41px 0px;
background-repeat: repeat-x;
background-position: top left;
}
#leftbgtop
{
padding:0px;
margin:0px;
height:41px;
width:41px;
background-image: url('./testimages/topbg.png');
background-position: 41px 0px;
background-repeat: repeat-x;
background-position: top left;
float:left;
}
#header
{
padding:0px;
margin:0px;
height:100px;
width:100%;
background-color:#990021;
}
#headerbottom
{
padding:0px;
margin:0px;
height:22px;
width:100%;
background-image: url('./testimages/centertrans.png');
background-repeat: repeat-x;
background-position: top left;
}
#container
{
margin:0px 0px 0px 0px;
padding:10px;
width:100%;
background-color:#F56E8B;
}
/*Left*/
td.leftnav
{
background-image: url('./testimages/flowerleft.png');
background-repeat: repeat-y;
background-position: top right;
}
/*right*/
td.rightnav
{
background-image: url('./testimages/flowerright.png');
background-repeat: repeat-y;
background-position: top left;
}
/*content*/
td.content
{
background-color:#F56E8B;
}
/*Footer*/
#footertop
{
padding:0px;
margin:0px;
height:10px;
width:100%;
background-color:#880000;
clear:both;
}
#footer
{
padding:10px;
margin:0px;
height:100px;
width:100%;
background-color:#FF0000;
}
#footerbottom
{
padding:0px;
margin:0px;
height:10px;
width:100%;
background-color:#880000;
}
/* Container for bottom background */
#bottombgcont
{
clear:both;
position:static;
left:0px;
bottom:0px;
width:100%;
z-index:-1;
height:500px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
background-color:#00FF00;
}
</style>
</head>
<body>
<!--TOP BG-->
<div id=topbgcont>
Test
</div>
<div id="maincont">
<div class="center">
<!--HEADER-->
<div id="bgheadtopcont">
<div id="leftbgtop">
</div>
</div>
<div id="header">
Header
</div>
<div id="headerbottom">
</div>
<!--CONTENT/NAVIGATION-->
<div id="container">
<p>Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<p>Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<p>Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<p>Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<!--FOOTER-->
<div id="footertop">
</div>
<div id="footer">
Footer
</div>
<div id="footerbottom">
</div>
</div>
</div>
<!--BOTTOM BG-->
<div id=bottombgcont>
Test
</div>
</body>
|
|
|
|
|
10-08-2009, 03:39 PM
|
Re: Z-Index Issue
|
Posts: 10,016
Location: Tennessee
|
Quote:
|
(how did you spot that so quickly?!).
|
Firebug is your best friend - grab it 
1- set #maincont to position:relative instead of absolute and the green section drops to the bottom where you want it.
2 - Once you do #1, the margin will be there
3 - Remove the padding from #container, then remove the margins on your paragraphs - #content p{margin: 0;}
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
10-09-2009, 09:13 AM
|
Re: Z-Index Issue
|
Posts: 128
Name: Chris Kummelstedt
|
thank you Madame,
you're a star
worked like a charm!
|
|
|
|
|
10-09-2009, 11:10 AM
|
Re: Z-Index Issue
|
Posts: 10,016
Location: Tennessee
|
You're welcome, happy to help 
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
Please login or register to view this content. Registration is FREE
Please login or register to view this content. Registration is FREE
|
|
|
|
|
|
« Reply to Z-Index Issue
|
|
|
| Thread Tools |
Search this Thread |
|
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
