Absolute Question
in [CSS]
|
Prev: Going Live
Next: Q: How do I create a "snaking-column"?
From: dorayme on 17 Apr 2010 05:55 In article <hqbv1g$9i2$1(a)news.eternal-september.org>, 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: .... .... > Perhaps if I had said "(body, less any margin and/or padding, for > simplicity)"? > This last would not be correct. -- dorayme
From: Gus Richter on 17 Apr 2010 06:04 On 4/16/2010 9:37 AM, 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. -- Gus
From: Gus Richter on 17 Apr 2010 08:07 On 4/17/2010 5:55 AM, dorayme wrote: > In article<hqbv1g$9i2$1(a)news.eternal-september.org>, > 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: > ... > ... >> Perhaps if I had said "(body, less any margin and/or padding, for >> simplicity)"? >> > This last would not be correct. Because you have other variables to introduce, such as those others by Ben? I conceded margin and padding, but the question was posed in reference to a submitted example wherein the others would not apply. Perhaps I should have taken the verbose route and said that it's really Viewport and not Body, but since they are close enough in the example, therefore to assume Body for simplicity sake in following easier the explanation for "why" given. I withdraw my suggestion of body=viewport _for simplicity sake_ and the idea that body may be easier to envision than viewport. I should have simply said "viewport" and leave it at that. -- Gus
From: Thomas 'PointedEars' Lahn on 17 Apr 2010 09:00 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. And text-align: center; is _not_ a rule (set), it is a (property) _declaration_: <http://www.w3.org/TR/CSS2/syndata.html#rule-sets> PointedEars -- Prototype.js was written by people who don't know javascript for people who don't know javascript. People who don't know javascript are not the best source of advice on designing systems that use javascript. -- Richard Cornford, cljs, <f806at$ail$1$8300dec7(a)news.demon.co.uk>
From: Ben C on 17 Apr 2010 12:54
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 :) |