Absolute Question
in [CSS]
|
Prev: Going Live
Next: Q: How do I create a "snaking-column"?
From: Ben C on 17 Apr 2010 12:58 On 2010-04-17, Thomas 'PointedEars' Lahn <PointedEars(a)web.de> wrote: > Gus Richter wrote: > >> Mike wrote: >>> One thing I dont understand completely >>> This: >>> h3 { >>> position: relative; /* So that elements INSIDE this header can be >>> positioned relative to the header */ >>> } >>> >>> this is stating that the relative declaration is pertaining to the >>> children of this not itself. Which seems to work. But why? Doesnt a >>> rule apply to itself? >> >> Not necessarily. Take for example: >> div {margin:auto;text-align:center;} >> Where equal margins are applied to the div and apply to itself, but the >> second rule centers the 'inline content' (child) within the div. > > It applies to all inline-level descendants, not only children. No it doesn't. Descendents may _inherit_ the property and apply it to their own contents, but the property on the ancestor doesn't itself _apply_ to any descendents except children.
From: dorayme on 17 Apr 2010 19:04 In article <slrnhsjq5d.4uk.spamspam(a)bowser.marioworld>, Ben C <spamspam(a)spam.eggs> wrote: > On 2010-04-17, Thomas 'PointedEars' Lahn <PointedEars(a)web.de> wrote: > > Gus Richter wrote: > > > >> Mike wrote: > >>> One thing I dont understand completely > >>> This: > >>> h3 { > >>> position: relative; /* So that elements INSIDE this header can be > >>> positioned relative to the header */ > >>> } > >>> > >>> this is stating that the relative declaration is pertaining to the > >>> children of this not itself. Which seems to work. But why? Doesnt a > >>> rule apply to itself? > >> > >> Not necessarily. Take for example: > >> div {margin:auto;text-align:center;} > >> Where equal margins are applied to the div and apply to itself, but the > >> second rule centers the 'inline content' (child) within the div. > > > > It applies to all inline-level descendants, not only children. > > No it doesn't. Descendents may _inherit_ the property and apply it to > their own contents, but the property on the ancestor doesn't itself > _apply_ to any descendents except children. I hope Lahn will thank you for this very nice point (which will not be obvious except after appreciation of it and in hindsight). Bets anyone? I am prepared to give good odds. <g> -- dorayme
From: Gus Richter on 17 Apr 2010 22:16 On 4/17/2010 12:54 PM, Ben C wrote: > On 2010-04-17, Gus Richter<gusrichter(a)netscape.net> wrote: >> On 4/16/2010 3:12 PM, Ben C wrote: >>> On 2010-04-16, Gus Richter<gusrichter(a)netscape.net> wrote: >>>> On 4/15/2010 7:36 PM, Mike wrote: >>>>> Hello, >>>>> Why is id= two relative to the corner of the "centerthis" div but >>>>> id=three is not? >>>> >>>> The other respondent is right about the first character needing to be a >>>> letter: >>>> <http://www.w3.org/TR/html4/types.html#type-name> >>>> >>>> Explaining the 'why': >>>> .Centerthis is the container and its position is "static". >>>> The two divs in question are positioned "in-flow" to the static div. >>>> That means they are stacked on top of each other right under .one >>>> Position:absolute; does nothing until repositioning occurs. >>>> #two is then vertically repositioned with top:100px; relative to the >>>> initial containing block (body for simplicity) >>> >>> It's not body, but the viewport. It does make a difference because body >>> usually has an 8px margin, and the body may be taller (and also wider) >>> than the viewport, but bottom: 0 positions things at the bottom of the >>> viewport. >> >> Of course you are right. I simply wanted to make things simpler with the >> "(body for simplicity)" and providing the link where one can read up on >> the detailed writeup. Here is my slightly modified version of it: >> >> Body lives in html (the root element), >> which in turn lives in the 'initial containing block' (which is >> the viewport) and >> which is the viewable portion of the infinite canvas area. >> >> I should have simply said "viewport" as you point out. When I composed, >> I thought that most had a clear vision of body and an unclear vision of >> viewport and that here the difference would probably be inconsequential. >> Perhaps if I had said "(body, less any margin and/or padding, for >> simplicity)"? > > It's always difficult to explain these things, especially when the W3C > terminology is so confusing, and I agree people might not know what the > viewport is. But it's not the body, so that doesn't really make it > simpler, just wronger. Maybe better to say: "the initial containing > block (which is basically just the browser window)". > >> By your singular correction, I take it that you find no other problem >> with my explanation of "why" for the OP? > > You can rest assured that if I find something to quibble with then > quibble I shall :) Thank you for some sanity in here. -- Gus
From: Ben C on 18 Apr 2010 05:43 On 2010-04-18, dorayme <dorayme(a)optusnet.com.au> wrote: [...] > But, anyway, I was not talking a paragraph, a div can simply have > inline text in it and this is content but rather different to the > way a paragraph is content, in the latter case it is a proper > named immediate descendant, a child and any further elements > inside the paragraph would be grandchildren. The line boxes of > text inside the p which is inside the div, well, I have never > been sure whether to think of these as technically > "grandchildren" of the div or "children" of p. There are > references in the specs to anonymous boxes for text and if you > were alive to this you might have restrained yourself and > suppressed that vicious side of your personality a while longer. If you've got: <div><p>text</p></div> There is an anonymous inline box around "text". You've got a block box for the div, whose child is a block box for the p, whose child is an anonymous box with the text in it. The anonymous box with text in it "generates" a line box in the way that inline boxes generally generate line boxes. If you've got: <div>more<p>text</p></div> Then you get an anonymous block around "more", and another anonymous inline inside that anonymous block for the text. Pop quiz on W3C metaphysics: how many anonymous boxes are there in the following HTML document: <html><head><title></title></head><body><div> <p> foo </p> <div style="display: table"> <div style="display: table-row"></div> foo <div style="display: table-row"></div> </div></div></body></html>
From: dorayme on 23 Apr 2010 05:43
In article <slrnhsll24.4kc.spamspam(a)bowser.marioworld>, Ben C <spamspam(a)spam.eggs> wrote: > On 2010-04-18, dorayme <dorayme(a)optusnet.com.au> wrote: > [...] > > But, anyway, I was not talking a paragraph, a div can simply have > > inline text in it and this is content but rather different to the > > way a paragraph is content, in the latter case it is a proper > > named immediate descendant, a child and any further elements > > inside the paragraph would be grandchildren. The line boxes of > > text inside the p which is inside the div, well, I have never > > been sure whether to think of these as technically > > "grandchildren" of the div or "children" of p. The key words here are "whether to think of these as". I don't like to think of them as these. It is possible I will have no choice though. Time will tell. > > If you've got: > > <div><p>text</p></div> > > There is an anonymous inline box around "text". You've got a block box > for the div, whose child is a block box for the p, whose child is an > anonymous box with the text in it. > > The anonymous box with text in it "generates" a line box in the way that > inline boxes generally generate line boxes. > > If you've got: > > <div>more<p>text</p></div> > > Then you get an anonymous block around "more", and another anonymous > inline inside that anonymous block for the text. > So that the inline anonymous box around "more" is a sibling of p, and an auntkle of "text", and div has more children than it may realise and even a grandchild that might surprise it greatly? In other words it is not just elements, at least not named elements, that get to be in the family tree eh? Sounds like a cookie scheme to me, a bit like someone dreaming up reasons for someone's foot or shoe to be part of the family. I don't like it and want to know the name and address of the person responsible for this far fetched idea. -- dorayme |