1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Z-index & relative image position.

Discussion in 'CSS' started by wiesel123, Dec 13, 2008.

  1. #1
    Hello everyone. I am new to this forum and have joined because I (for the first time) am stuck with my CSS. I believe this is the most advanced problem that I have ever encountered.
    I hope that the clever CSS pros on this site can help out. (The answer may benefit many people)
    I will try to explain my situation as clearly as possible.
    I have a content centred web page using a div titled “wrap” it has a min and max width so when the browser is resized so does my page (to an extent)

    Within this expanding and contracting web-page I wish to implement a series of floating images for the banner. There are 5 images that span across the max width of the content area of the website and I wish for them to contract from their positions when the web page is shrunk to the min width. I also want them to Z index over one another. Think if to as an accordion layout (stretch when the page is wide and contract when narrow)
    My problem is when I use “position: relative”; - the div containers that I have each image inside overflow the right border of the wrap.
    Instead the CSS aligns itself to the right edge of the browser window not the div wrap.

    I can send a zip of the images if anyone wishes also.

    Thank you in advance for your help

    Regards

    Brett

    CSS

    HTML

     
    wiesel123, Dec 13, 2008 IP
  2. belkocrnic

    belkocrnic Active Member

    Messages:
    107
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #2
    z-index can work properly only with position absolute. My recommendation is if the pictures are not overflowing than do not use z-index
     
    belkocrnic, Dec 14, 2008 IP
  3. live-cms_com

    live-cms_com Notable Member

    Messages:
    3,128
    Likes Received:
    112
    Best Answers:
    0
    Trophy Points:
    205
    Digital Goods:
    1
    #3
    Live demos are usually far quicker to debug than code.
     
    live-cms_com, Dec 14, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    One of the things people often miss about moving things with position:relative is that from a 'flow' perspective, the object is in the same place - the only thing moving an object with position:relative does is changing where it renders. Pretty much imagine there's an invisible box in the items original location that is 'in flow', while what you are seeing on screen is out of flow just as if it were position:absolute; - it's why when I use relative positioning or negative margins I think of an element as two separate boxes, the 'flow box' and the 'render box'. negative margins shrink the flow box leaving the render box alone, relative positioning moves the render box while leaving the flow box alone.

    Since you aren't changing the image sizes I assume you are trying to make them overlap. If this is the case then you should be using a float with a negative margin or absolute positioning - I'm not entirely certain which since from the code I'm not even sure what effect you are going for... though with all those negative top positionings I'm fairly certain you overthought the code for your layout, especially with all those DIV which appear to be completely unneccessary. Can we assume that all of those images are the same height? Hmm, no I guess they aren't since you're not using even multiples for that negative top position... Also your comment placement is just asking for IE to trip it's missing content/double render bugs.

    FAIRLY certain that for markup what you are doing shouldn't need more than this:
    <div id="wrap">
    
    	<div id="stretchBanner">
    		<img src="images/bnr_ll.png" class="banner_farLeft" alt="" />
    		<img src="images/bnr_l.png" class="banner_left" alt="" />
    		<img src="images/bnr_middle.png" class="banner_middle" alt="" />
    		<img src="images/bnr_r.png" class="banner_right" alt="" />
    		<img src="images/bnr_rr.png" class="banner_farRight" alt="" />
    	<!-- #stretchBanner --></div>
    
    <!-- #wrap --></div>
    Code (markup):
    in terms of CSS, you might be better off using a negative margin-top instead of the top setting... and instead of trying for z-index put them in source order of render then adjust your math accordingly... Though being these appear to be presentational images I'm not even certain an IMG tag is appropriate here. If I were doing what you are attempting (I think I'm starting to follow what you are trying to do) the code would likely end up as little as:
    <div id="stretchBanner"><div><b></b></div><span><b></b></span></div>
    Code (markup):
    Since all we need are 'hooks' to attach those images to.

    If you send me the images I can show you what I mean. I can probably even show you how to do your five part dynamic banner using a single image file.

    as live-cms_com said though, we could tell a lot more from a live demo...

    Since When? Z-index works just fine on position:relative items, you just need to be aware that any z-index applied is relative to it's parent container's z-index.
     
    deathshadow, Dec 14, 2008 IP