SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb 2 Part Question: z-index / Positioning DIV *Updated*

    Hello!

    z-index: Part 1

    I have a "containerBottom" DIV which contains a img that has a height of 49px, now I've set the margin height at -40 so the area will position under the "content" DIV.

    Now I am able to get the effect I am looking for (having the "union made" img part to the right appear equal with the bottom of the actual "content" div), but now any content/links I place in the "content" div is not clickalbe (test link)..?

    I thought changing the z-index for the "containerBottom" to a (-) value would allow the "content" div to be ok (ontop - have the links on it clickable), but no luck!

    Links to view the full files:

    CSS: http://www.jamiegerrard.com/carpente...css/common.css
    HTML: http://www.jamiegerrard.com/carpentersUnion/about_us/

    CSS

    Code:
    #container {width:701px; margin:0 auto; padding:0; background:url(../images/common/bgContainer.gif) repeat-y;}
    #containerTop {width:701px; height:6px; background:url(../images/common/bgTop.gif) no-repeat left top; overflow:hidden;}
    #containerBottom {z-index:-1; width:701px; height:49px; margin:-40px 0 0 0; background:url(../images/common/bgBottom.gif) no-repeat left top; overflow:hidden;}
    
    #content {width:556px; min-height:375px;}
    * html #content {height:375px;}
    #header {width:556px; height:84px; float:left;}
    HTML

    Code:
    <div id="header"><a href="../"><img src="../_assets/images/common/cuLogo.gif" alt="NS & PEI Regional Council of Carpenters, Millwrights & Allied Workers" width="93" height="84" border="0" /></a><a href="../"><img id="top" src="../_assets/images/common/cuWatermark.gif" alt="NS & PEI Regional Council of Carpenters, Millwrights & Allied Workers" width="370" height="84" border="0" /></a><a href="../become_a_union_member" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('union','','../_assets/images/common/linkBecomeUnionMember02.gif',1)"><img src="../_assets/images/common/linkBecomeUnionMember01.gif" alt="Become A Union Member" name="union" width="93" height="84" border="0" id="union" /></a></div>
    	<div id="content">
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
    
    		<p><a href="#">test link</a></p>
    	</div>
    	
    	<div id="containerBottom"></div>
    </div>
    DIV Positioning Part 2 - Clear..Display Block?

    With the "containerBottom" DIV again. It seems any element I position about is causes the "containerBottom" DIV to not clear.

    I know this is a problem with the "contact" DIV. but am not sure how to fix.

    HTML Page: http://www.jamiegerrard.com/carpentersUnion/
    CSS: http://www.jamiegerrard.com/carpente...css/common.css

    Now I thougth I would have to "clear" the "contact div" to allow the "containerBottom div" to retain its place.. but no luck. If this part as been previously addressed (have did not find one in my search), please just post the link, THANKS!

    Thanks ifor your help, Jamie
    Last edited by jamie_g; Sep 19, 2004 at 16:38.
    ----
    Cheers, Jamie

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    heres the answer to the first part but you;ll have to wait until tomorrow for the second part as its time for bed

    You need to control the z-index of ontent as well. But z:index only takes effect on positioned elements anyway so you have to give them both a position relative.

    Code:
    #content {width:556px; min-height:375px;position:relative;z-index:1}
    #containerBottom {z-index:0;position:relative; width:701px; height:49px; margin:-40px 0 0 0; background:url(http://www.jamiegerrard.com/carpente...n/bgBottom.gif) no-repeat left top; overflow:hidden;}
    Its best not to use negative z-indexes as browsers treat then differently and some will in fact put them under he body element so you can't see them.

    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2004
    Location
    Nova Scotia, Canada
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for part 1 paul.

    i'll try to work on a solution for the second one!

    -jamie
    Last edited by jamie_g; Sep 20, 2004 at 08:44.
    ----
    Cheers, Jamie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •