>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/
