Skip navigation
Currently Being Moderated

Positioning elements relatively vs absolutely...

Dec 20, 2011 8:03 AM

Tags: #css

Hi,

 

Could someone look at the two sets of image-links here :

http://bit.ly/stuCfM

 

As you can see, individual <a> tags with PNG backgrounds are placed (and sometimes overlap) using absolute positioning. Each set is in a relatively-positioned DIV.

 

Problem is, because these elements are absolutely-positioned, the wrapping div doesn't "see" them. If a height isn't applied to it, it's 1 pixel high.

 

I'm looking to make "folio-wrapper" (the wrapping div) wrap around the contained elements without usage of a specific height.

 

I'm guessing that means I cannot use absolute positioning for the elements inside, right?

 

But then, how can I place them properly? Some of them need to overlap.

 

Does this mean I have no choice but to apply a specific height to "folio-wrapper"?

 

Should I give up trying to have my cake and eat it too?

 
Replies
  • Currently Being Moderated
    Dec 20, 2011 8:57 AM   in reply to jyeager11

    Why can't you use the image as one large image and put hot-spots on the image if you want interactivity in certain parts of the image?

     

    http://www.youtube.com/watch?v=Px8h86sILj8

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 20, 2011 10:00 AM   in reply to jyeager11

    jyeager11 wrote:

     

    Won't that mean having 5 gigantic PNG images instead of the current 4 smaller ones? Since we're talking about PNGs here (they need to be transparent because that gray background won't be there, it'll be a fixed gradient, and the page will scroll) won't that be far too big a load?

     

    I don't think a png that size will take that long to download, maybe on a dial up it might pose some issues but not on broadband.

     

    Why don't you want to set a height for the wrapper <div>? Normally setting height is not advisable but as you know the height of the image in this case what's stopping you from declaring a height? Maybe you could set a min-height instead of a specific height?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 20, 2011 5:19 PM   in reply to jyeager11

     

    As you can see, individual <a> tags with PNG backgrounds are placed (and sometimes overlap) using absolute positioning. Each set is in a relatively-positioned DIV.

     

     

    I have to say that your interpretation and my interpretation of absolute position is quite different.

     

    When you have something positioned absolutely, you must have offsets from the edges.  There are essentially 4 such offsets: top, right, bottom and left.  Now in your css code, I don't see anything of that sort    The code for absolute position should be something like this:

     

     

    position: absolute;

    top: 50px;

    The above code tells the browser that the particulr element is 50px from the top.  It does not say that move the element 50px to the top.  I hope you can see the distinction of this two different possible interpretations.

     

    I don't think your problem can be solved because nobody knows what exactly you are trying to do.  You will be wise to forget about the position bit, and to trim your html code down to bare minimum and then see what happens.  For example why do you need so many nested DIVs as in this code:

     

     

    <div class="folio-wrapper">

        <div class="folio-caption">

          <div class="title">Zaho</div>

          <div class="subtitle">Music Artist</div>

          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.
        </div>
        <a href="#" id="zaho-booklet" class="nyroModal">&nbsp;</a>
        <a href="#" id="zaho-poster" class="nyroModal">&nbsp;</a>
        <a href="#" id="zaho-cd" class="nyroModal">&nbsp;</a>
        <a href="#" id="zaho-case" class="nyroModal">&nbsp;</a>
      </div>

      <div class="folio-wrapper">
        <div class="folio-caption">
          <div class="title">Zaho</div>
          <div class="subtitle">Music Artist</div>
          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.
        </div>
        <a href="#" id="zaho-booklet" class="nyroModal">&nbsp;</a>
        <a href="#" id="zaho-poster" class="nyroModal">&nbsp;</a>
        <a href="#" id="zaho-cd" class="nyroModal">&nbsp;</a>
        <a href="#" id="zaho-case" class="nyroModal">&nbsp;</a>
      </div>

    </div>

     

    No wonder you can't see some of the DIVs without moving them correctly but the mathematics becomes very complicated.  In CSS when people are trying to achieve Equal Length Columns, they use nested DIVs but they keep a track of them and move them aside carefully to make the trick work properly.  If you want to know the technique behind this, I suggest read the article/tutorial by my good Friend Mathhew  who has done the calculations for his article:

     

    <http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser- css-no-hacks>

     

    Hope this helps for this discussion to move forward.

     

    Good luck.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 21, 2011 12:24 AM   in reply to jyeager11

    jyeager11 wrote:

     

    At the link provided in the OP, do you see how there are two sets of images? They're identical sets right now but they won't be in the end product. The elements inside this div will vary -- and with them, the height taken up.

     

     

    If the height of the images vary how do you plan to control the height of the <a> tags automatically?

     

    As I see it you would need to set the height of each set of 'a' tags according to the height of the images, so in that case you would always know the height the wrapper should be.

     

    Use jpg images instead of pngs if you plan to go down the route of one large image with hotspots. That will dramatically reduce the download size.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 21, 2011 8:43 AM   in reply to jyeager11

    jyeager11 wrote:

     

     

    1. You know how the amount of text in a div determines how tall that <div> will be, if you don't assign a height to it? That's what I'd like the div to do with these <a> tags, which all have different heights.

     

    You can't do it. Theres is no way an 'a' tag can tell how high a background image is.

     

    a#zaho-booklet {

    position:absolute;

    display:block;

    width:480px;

    height:315px;

    background:url(/images/folio/zaho_booklet.png) no-repeat top left;

    margin:25px 0 0 480px;

    }

     

    It falls down right there so I would come up with a different approach.

     

    I mean you can possibly do it with server language maybe which gets the dimensions of the image and then passes those dimensions onto the 'a' tag. But never having used that approach it probably would not be for the faint-hearted.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 21, 2011 9:18 AM   in reply to jyeager11

     

    That's not what I'm trying to do. Re-read the point you quoted. Nowhere do I mention wanting the 'a' tag to know how tall the background image is without my having to specify. What I said was, I want the wrapping div (called "folio-wrapper" in the example I gave you) to know how tall it's supposed to be to wrap around all the <a> tags inside.

     

     

    Yes I know that BUT if you need to set specific heights on each set of 'a' tags for each set of images as they vary in height then you can set a specific height on the folio-wrapper right, that's my point. It's not logical to NOT set a height on the folio-wrapper in that instance where you have to set heights on the 'a' tags.

     

    I could understand your logic IF the images were not background images of the 'a' tags. What is stopping you setting the folio-wrapper at a specific height. Saying that the images will vary in height is not a reason as you have already agreed that you would have no option but to set specific height on the 'a' tag when using background images.

     

     

    The end game here is to be able to stack several "folio-wrapper"s one after the other, all containing different sets of <a> tags. The only reason it worked in the example provided is because I set a height to "folio-wrapper". If you look closely, that height isn't even enough to contain the images completely. The reflection on the floor exceeds the wrapper by a few pixels, giving away the fact that it's not 'really' wrapping. Just simulating.

     

    Well set the wrapper so it has more height. Each set of images and each wrapper will have a different height so whats the issues?

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 22, 2011 12:28 AM   in reply to jyeager11

    jyeager11 wrote:

    There is text on the left of these images, inside the same folio-wrapper. The text may or may not exceed the height of those images.

     

    Ok now you have identified a legitimate reason for not setting the height on the wrapper. Sorry but I don't know of a way to get the wrapper to wrap around absolutely positioned elements.

     

    If it were me I would at the last resort try and arrange the <divs> which contain the images without resorting to absolute positioning, that means experimenting with negative margins to overlap one another. This may fail.

     
    |
    Mark as:
  • Currently Being Moderated
    Dec 22, 2011 2:38 AM   in reply to jyeager11

    Having played around with this for a couple of hours there IS a possible solution. If you're prepared to always have the 'Poster' as the greatest depth then it's achieveable with the use of relative and absolute positioning and negative margins.

     

    Copy all code below, dump into a new Dreamweaver document and save to your site folder. Check the links to your background images are correct - NOTE: I have not got the leading slash before the /images so you may have to put that in depending where your images are stored. - background:url(images/folio/zaho_poster.png)

     

    The work around would also require that each set of images has its own uniqure <div> id indentifier. To simplify matters I work keep each set of css in a seperately linked stylesheet, because the css code its likely to get very complex.

     

     

    <!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>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>Untitled Document</title>

    <style type="text/css">

    body {

    text-align:left;

    font-family:"HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size:12px;

    line-height:18px;

    color:#808080;

    background:url(images/bg.png) repeat-x top;

    background-color:#FFF;

    background-attachment:fixed;

    overflow-x: hidden;

    overflow-y:scroll;

    }

    #zaho-folio-wrapper {

    width: 980px;

    overflow: hidden;

    background-color:#CCC;

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

    padding: 15px 0 0 0;

    margin: 0 auto;

    }

    #zaho-folio-caption {

    float: left;

    width: 225px;

    font-size:11px;

    line-height:15px;

    margin: 90px 0 0 20px;

    }

    #zaho-folio-caption h1 {

    font-family:Arial, Helvetica, sans-serif;

    font-size: 30px;

    letter-spacing:-0.5px;

    font-weight:bold;

    color:#000;

    margin: 0 0 10px 0;

    padding: 0;

    }

    #zaho-folio-caption h2 {

    font-size:14px;

    color:#000;

    margin: 0 0 3px 0;

    padding: 0;

    }

    #zaho-folio-caption p {

    margin: 0;

    padding: 0;

    }

    #zaho-folio-wrapper-right {

    float: left;

    width: 695px;

    margin-left: 40px;

     

     

    }

    #zaho-poster {

    position: relative;

    width: 305px;

    height: 420px;

    float: left;

    }

    #zaho-poster a {

    display: block;

    width: 305px;

    height: 420px;

    background:url(images/folio/zaho_poster.png) no-repeat top left;

    }

    #zaho-poster a:hover {

        background-position:0 -420px;

    }

    #zaho-case {

    width: 268px;

    height: 190px;

    position: absolute;

    top: 220px;

    left: 200px;

    z-index: 100;

    }

    #zaho-case a {

    display: block;

    width: 268px;

    height: 190px;

    background:url(images/folio/zaho_case.png) no-repeat top left;

    }

    #zaho-case a:hover {

    background-position:0 -214px;

    }

    #zaho-booklet {

    text-align: right;

    width: 480px;

    height: 315px;

    float: left;

    margin: 20px 0 0 -115px;

    }

    #zaho-booklet a {

    display: block;

    width: 480px;

    height: 315px;

    background:url(images/folio/zaho_booklet.png) no-repeat top left;

    }

    #zaho-booklet a:hover {

    background-position:0 -315px;

    }

    #zaho-cd {

    width: 158px;

    height: 67px;

    position: absolute;

    top: 300px;

    left: 430px;

    }

    #zaho-cd a {

    display: block;

    width: 158px;

    height: 67px;

    background:url(images/folio/zaho_cd.png) no-repeat top left;

    }

    #zaho-cd a:hover {

    background-position:0 -67px;

    }

    </style>

    </head>

     

    <body>

    <div id="zaho-folio-wrapper">

    <div id="zaho-folio-caption">

    <h1>Zaho</h1>

    <h2>Music Artist</h2>

    <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.</p>

    </div>

    <!-- end folio-caption -->

    <div id="zaho-folio-wrapper-right">

    <div id="zaho-poster">

    <a href="#"></a>

    <div id="zaho-case">

    <a href="#"></a>

    </div><!-- end case -->

    <div id="zaho-cd">

    <a href="#"></a>

    </div><!-- end CD -->

    </div><!-- end poster -->

    <div id="zaho-booklet">

    <a href="#"></a>

    </div><!-- end booklet -->

     

    </div><!-- end folio-wrapper-right -->

    </div><!-- end folio-wrapper -->

    </body>

    </html>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points