Absolute Question
in [CSS]
|
Prev: Going Live
Next: Q: How do I create a "snaking-column"?
From: Mike on 15 Apr 2010 19:36 Hello, Why is id= two relative to the corner of the "centerthis" div but id=three is not? HTML: <body> <div class="Centerthis"> <div class="Match" id="1"> <ul class="names"><li>Tom</li><li>Jane</li></ul> <ul class="scores" ><li>20</li><li>40</li></ul> </div> <div class="Match" id="two"> <ul class="names"><li>Tom</li><li>Jane</li></ul> <ul class="scores" ><li>20</li><li>40</li></ul> </div> <div class="Match" id="three"> <ul class="names"><li>Tom</li><li>Jane</li></ul> <ul class="scores" ><li>20</li><li>40</li></ul> </div> </div> </body> CSS: ..Match { border-style: solid solid solid none; font-family: Arial, Helvetica, sans-serif; font-size:10px; background-color: #C0C0C0; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-color: #000000; width: 150px; height: 30px; list-style-type: none; line-height:15px; } ..Match .names { float: left; } ..Match .scores { float:right; } #two { position:absolute; top:100px; } ..Centerthis { width:600px; margin-left:auto; margin-right:auto; height:800px; } #three { position:absolute; left:200px; top:200px; height:100px; } Thanks
From: Jeff Thies on 15 Apr 2010 19:59 Mike wrote: > Hello, > Why is id= two relative to the corner of the "centerthis" div but > id=three is not? Didn't try the html. But there is no reason for either to be anything but positioned relative to the page. Set the parent, Centerthis, to position: relative if you want it's absolutely positioned children to be positioned relative to it. Jeff > HTML: > <body> > <div class="Centerthis"> > <div class="Match" id="1"> > <ul class="names"><li>Tom</li><li>Jane</li></ul> > <ul class="scores" ><li>20</li><li>40</li></ul> > </div> > <div class="Match" id="two"> > <ul class="names"><li>Tom</li><li>Jane</li></ul> > <ul class="scores" ><li>20</li><li>40</li></ul> > </div> > <div class="Match" id="three"> > <ul class="names"><li>Tom</li><li>Jane</li></ul> > <ul class="scores" ><li>20</li><li>40</li></ul> > </div> > </div> > </body> > > CSS: > .Match > { > border-style: solid solid solid none; > font-family: Arial, Helvetica, sans-serif; > font-size:10px; > background-color: #C0C0C0; > border-top-width: 2px; > border-right-width: 2px; > border-bottom-width: 2px; > border-color: #000000; > width: 150px; > height: 30px; > list-style-type: none; > line-height:15px; > } > .Match .names > { > float: left; > } > .Match .scores > { > float:right; > } > #two > { > position:absolute; > top:100px; > } > .Centerthis > { > width:600px; > margin-left:auto; > margin-right:auto; > height:800px; > } > #three > { > position:absolute; > left:200px; > top:200px; > height:100px; > > > > } > > Thanks
From: dorayme on 15 Apr 2010 21:00 In article <3276f016-1518-4ab0-ad4e-41b62162ad4a(a)u21g2000yqc.googlegroups.co m>, Mike <ampeloso(a)gmail.com> wrote: > Hello, > Why is id= two relative to the corner of the "centerthis" div but > id=three is not? > > HTML: One of the main things to understand about absolute positioning is exactly what serves for the containing block. In effect, a normal absolutely positioned box like a div is in relation to the viewport, it is out of the flow of the rest of the non-positioned elements and sits offset to the viewport (normally) according to the values you give top, bottom, left and right. For example: <http://dorayme.netweaver.com.au/absolutely_relative_to_viewport.h tml> See how the pink abs positioned div is almost a law unto itself and sits quite independently of the div that is its containing block in the html? It is positioned absolutely and while this does not mean it can do anything, like say park itself on top of your television over there ---->, it parks itself in relation the viewport of the browser and does not care to be constrained by any other element that is in the normal flow (like div of class one). Not even a margin of 200px on body will budge the abs pos div; in effect, it takes notice of nothing but the viewport. But now compare the following: Exactly as above markup and css except add position: relative; to the style of .one. <http://dorayme.netweaver.com.au/absolutely_relative_to_nearest_po sitioned_ancestor.html> Now the absolutely positioned div will sit at the bottom of div one. This is because the act of positioning .one relatively makes it (.one) "serve as the containing block for positioned descendants". You can read more about this at 9.8.4 Absolute positioning at <http://www.w3.org/TR/CSS21/visuren.html#principal-box> -- dorayme
From: Thomas 'PointedEars' Lahn on 15 Apr 2010 21:27 Mike wrote: > Why is id= two relative to the corner of the "centerthis" div but > id=three is not? > > HTML: > <body> > <div class="Centerthis"> > <div class="Match" id="1"> Not Valid. <http://validator.w3.org/> Since there may be further errors (such as duplicate IDs), it is not possible to be sure about the cause of the undesired display you observed. You should indent your markup. > <ul class="names"><li>Tom</li><li>Jane</li></ul> > <ul class="scores" ><li>20</li><li>40</li></ul> > </div> > <div class="Match" id="two"> > <ul class="names"><li>Tom</li><li>Jane</li></ul> > <ul class="scores" ><li>20</li><li>40</li></ul> > </div> > <div class="Match" id="three"> > <ul class="names"><li>Tom</li><li>Jane</li></ul> > <ul class="scores" ><li>20</li><li>40</li></ul> > </div> > </div> > </body> > > CSS: > .Match > { > border-style: solid solid solid none; > font-family: Arial, Helvetica, sans-serif; > font-size:10px; Use em or % instead. > background-color: #C0C0C0; background-color: #ccc; > border-top-width: 2px; > border-right-width: 2px; > border-bottom-width: 2px; > border-color: #000000; You might want to consider border: 2px solid #000; border-left: none; instead. > width: 150px; > height: 30px; See above. > list-style-type: none; Elements with `class' attribute value "Match" are not lists here. Perhaps you have not posted the real code? > line-height:15px; See above. > } > .Match .names > { > float: left; > } > .Match .scores > { > float:right; > } Because of those, you might want to consider .Match { /* ... */ clear: both; } > #two > { > position:absolute; > top:100px; You can avoid potential problems with MSHTML if you declare the `left' property value, too. > } > .Centerthis > { > width:600px; > margin-left:auto; > margin-right:auto; > height:800px; > } That does not look very user-friendly. 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: Gus Richter on 16 Apr 2010 03:30
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) because the container ..Centerthis is "Static" (not 'absolute', 'relative' or 'fixed'). The same as #three with top:200px; <http://www.w3.org/TR/CSS21/visudet.html#containing-block-details> Note that the repositioning is relative to body which can be verified by giving position:relative to .Centerthis which results in the vertical positioning to be relative to the .Centerthis container - #two and #three will be shifted further down. #three also has left:200px; applied to it resulting in it being repositioned horizontally relative to body, the initial containing block - 200px from the leftmost edge of body. If position:relative; is applied to .Centerthis the repositioning of #three will be relative to the .Centerthis containing block - 200px from the leftmost edge of .Centerthis -- Gus |