>MEM wrote: > >> Ok. I have comment this two lines: Now it seems to work in FF. >> >> /*height: 20em; */ /*width: 30em; */ >> >> If this is OK, I will try to understand the IE part now. > >Height isn't needed but you'll need the width on #centered. Otherwise >you just get a container as wide as the viewport with centered text in >it. If that's what you want then it's ok, but I can't see the point. > >For the IE part (for IE7 and older), you just have to read the article. >All about how it works is expanded and explained there. > >regards > Georg >-- >http://www.gunlaug.no > > > >Georg wrote: >"Otherwise you just get a container as wide as the viewport with centered text. If that's what you want then it's ok, but I can't see the point."
I want something really simple, like a little lettering on the center, saying under construction with a logo, or "hang on", for example, just to have something there before a site get's done. But well... now that I look at it, I actually don't need the centered div.:S Only the wrapper one. But since I may want to create other things with a centered layout (for example, I may want to center a modal popup on the future), I will comment on that div and on the width so that, in the future, I can give them a good use, if there is no better solution at the time. :) ################################## Now the IE part: ################################################# div#centered { margin-top: expression((document.documentElement.offsetHeight/2)-(parseInt(offsetHeight) /2) <0 ? "0" : (document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/2) +'px') ; } offsetHeight is part of the MSIE's DHTML object model. It is a representation of the height in IE browsers, that it's higher than the padding, the border and the margin of any element inside the browser window. (well... this is not correct, it's not browser window, because browser window contains also buttons, and other elements. 1) How do we call the (normally white) part where we put or code inside? 2) When we do document.documentElement, we are telling, in this case, give me the element with the tag <body> or the tag <html> ? Quoted: http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-87CD092 documentElement of type Element, readonly This is a convenience attribute that allows direct access to the child node that is the root element of the document. For HTML documents, this is the element with the tagName "HTML". Anyway, is this interpretation correct? We take that offsetHeight and we divide it by 2. (so, or margin-top property is now pointing at the middle of the html document (or body?) element. Once there, we subtract the half of the offsetHeight of the element (in this case, the #centered div). What do we get? The margin-top of a centered element of any given height. But if that height, after the calculations, bring us a negative value, for example, if, somehow, (I'M NOT SURE OF THIS) we will have a centered element bigger than the dimensions of our "browser (white part)", (I'M NOT SURE ABOUT THIS EITHER) and since we don't want parts of the content of that div to disappear, then, we should give him a margin-top of 0. Well, I'm not sure about my last statement since I have tested it like this, with a 200em element, and I get always the top margin of 0: margin-top: expression(document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/ 2) +'px') ; I And, somehow, I was expecting the content to go outside the "browser white part", (with negative margins) but he does not, and I get always a margin of 0. Maybe it's because this calculations, work on a window with no scroll bars. But since the browser generates scroll bars, there will never be the case, where center div will get bigger than the documentElement.offsetHeight.... ??? I'm confused, what's going on on this code? Thanks a lot, Márcio ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/