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.

Gilder Levin method

Discussion in 'CSS' started by Arnold9000, Oct 23, 2007.

  1. #1
    I'm using the gilder levin method for image replacement

    <h2>
    <span></span> Replacement text.
    </h2>

    h2 {
    width: 150px;
    height: 35px;
    position relative;
    }

    h2 span {
    background: url(anypic);
    width 100%;
    height: 100%;
    position: absolute;
    }

    Can somebody explain the significance of the relative and absolute positioning and why they are used here? When I removed the relative positioning, a huge margin showed up at the bottom of my page. When I removed the absolute position spec, the image doesn't show up. So obviously these two specs are needed, but the book i have doesn't tell me why.
    SEMrush
     
    Arnold9000, Oct 23, 2007 IP
    SEMrush
  2. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #2
    You're basically overlaying the span on top of the h2 element. If the span was not absolutely positioned, it would be inline and static, and since there is no content inside I'd assume the background image wouldn't show, because width:100% and height:100% is useless on an inline element that has a static position. If your position is set to absolute and the width and height are 100%, it sits on top of the parent element and takes up the full width and height.

    The relative is necessary because it tells the span which is absolutely positioned, to only be offset in regards to the h2/in the dimensions of the h2 element, and not any other parent element that has position:relative.

    Hope that helped.

    BTW, What book are you reading? Simon Collison Beginning CSS Dev? CSS Mastery? Pro CSS Techniques?
     
    soulscratch, Oct 23, 2007 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,683
    Likes Received:
    1,564
    Best Answers:
    226
    Trophy Points:
    515
    #3
    BTW - the height:100% will not function right in IE, which is why I suggest setting that manually with a REAL metric.

    I also suggest placing the span after the text instead of before - while that means including top:0; and left:0; which you should do anyways since Firefux can screw that up without them... and it makes more sense from a source/depth-sorting point of view.

    As soulscratch said (though it's slightly hidden due to grammar) the position:relative tells any position absolutes inside the element to base their 0:0 position as the top left corner of that element (in this case an H2) - if you remove that position relative the absolute positioning will be based on the top left corner of the next relative positioned container up the DOM, which is quite often the browser window itself.

    The absolute positioning removes the item from flow, sets it to display:block automagically and lets you use left, right, bottom or top to move it around 'absolutely' instead of 'relative' to it's normal flow position.
     
    deathshadow, Oct 23, 2007 IP
  4. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Still missing some understanding and I think it's important that I understand this rather than just using it.

    Yes, that much I could see.

    How come 100% width and height doesn't take care of that? I don't see the problem of it being inline as an image naturally is. I don't understand the significance of static. As far as I know, static is a default behavior that responds to scrolling as opposed to fixed position

    Why? Is it because only line height can determine it's height? Could the element be set to display: block instead of making the position absolute?

    But what's the point of absolute positioning when there are no coordinates? Is it just to turn it into a block level element?

    I'm sorry, I didn't get that last part. As far as the book, it's CSS Mastery. Does it have a good reputation?
     
    Arnold9000, Oct 23, 2007 IP
  5. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I missed something here because I don't have anything relatively positioned. I thought absolute positioning was naturally in accordance with it's container? Therefore top:0 and left:0 would be the top left of it's container (h2)

    I suspected something along those lines.


    I still don't see why 0 0 positioning wouldn't do the same thing.
     
    Arnold9000, Oct 23, 2007 IP
  6. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #6
    Because you can't give INLINE elements dimensions? If you set the span to display:block and left the position as static then your content in the h2 (not the span) would come afterwards, since it realizes the span is now block level instead of inline, and it respects the dimensions. The image would appear on top, and underneath would be text. If you don't want to use absolute positioning then you can do negative margins instead.


    No, because dimensions on inline elements are useless. Read above.


    Absolute positioning doesn't make it block level. By default it's shrink wrapped, or the box of the element that you made absolute only fits the content, it doesn't take up the full space its allowed by the parent element. The point is so that it's out of the flow, and the h2 doesn't know its there so its basically hovering/flying over the h2 element, and thats the key to this technique.



    It was probably the most advanced book when it first came out (2006?), but it has TONS and TONS of errors (google CSS Mastery errata). I remember having like 3-4 printed out pages from a PDF when I was reading it in my High School class (hehe).


    Here are some links that may help:

    http://www.ryznardesign.com/web_coding/image_replacement/
    http://www.w3.org/TR/CSS21/visuren.html
     
    soulscratch, Oct 23, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #7
    Yeah, until you load the page in IE6 where it just positions the absolute element offset from the body or html element, NOT the parent element like most modern browsers do, so you need to stick the position:relative in there still.
     
    soulscratch, Oct 23, 2007 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,683
    Likes Received:
    1,564
    Best Answers:
    226
    Trophy Points:
    515
    #8
    and

    Uhm, wrong on both counts. BY THE SPECIFICATION absolute positioned elements by default calculate top, left, right and bottom from the window unless you set an element around it to either position:relative or position absolute. Soulscratch, it's not IE that's doing that, it's all browsers, so there is no 'still'. That's how the specification reads/works. You yank that position:relative from it and test in Opera, Safari or FF, with top:0; and left:0 declared, the absolute element will jump to the top left corner of the window regardless of what's around it for containers (again unless those containers are relative or absolute themselves)

    What gets confusing is that in MOST browsers, the default position of an absolute positioned element is the flow spot at which it occurs in the source, despite the element being removed from flow... Note I said MOST - Firefux from time to time seems to mess up the default position on the horizontal from time to time, and IE7 also seems to have some issues in that department - I've been able to find no rhymne nor reason to it, so I just declare top and left explicitly 'just to be sure'.
     
    deathshadow, Oct 23, 2007 IP
  9. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #9
    Wow. You're exactly right... The only reason I probably thought of that was because I almost always had a position:relative on my container... that or I forgot to set a horizontal/vertical position so it just remained at the top left of the container...

    http://205.209.146.77/absolute.html

    Thanks for the explanation.
     
    soulscratch, Oct 23, 2007 IP
  10. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Ahhh, there it is. That's what I was looking for. Thanks !!
     
    Arnold9000, Oct 23, 2007 IP
  11. Arnold9000

    Arnold9000 Peon

    Messages:
    241
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I believe that I get it. Thank you much !!! You da man. So obviously a position relative spec with no coordinates translates into top and left being zero, which means it's positioned where it would have been anyway without the relative spec (aside from padding, margins.....). But for some semi bizarre reason, the parent has to be explicitly set to absolute or relative before it can become the starting measurement (or the 0,0 point) for absolutely positioned items contained within it. Otherwise, it will calculate absolute positioning from the viewable area of the window itself. So the relative spec on the parent, allows or assures that the absolute coordinates are in relation to the parent rather than the window itself.

    Wow, how odd. Anybody know why they did this? One would think that they would assume that the default behavior would be the parent rather than the window, because this is the majority use of it and it provides greater flexibility. Hmmm....I'll ad it to the list of complaints. ((chuckle chuckle))

    1) block level elements take up the entire width of the box by default, rather than it's width being content driven as in the case of tables.

    2) absolute positioning should, by default, be relative to it's containing box, not the window. Window should only be what is left if no boxes are even used.

    Anyway, just a rant. I don't take myself seriously. ((chuckle chuckle))
     
    Arnold9000, Oct 23, 2007 IP