Re: [css-d] just center

[david]

MEM wrote:

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

And when I think about it - putting up an "Under Construction" site 
sounds like one of the old marks of amateur web design ... why put 
anything up until the site's done?

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
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/

Re: [css-d] just center

[MEM]

>"In practice I'm dividing dimensions of body (equal to viewport) and the
>centered element by 2, and subtract half of one from half of the
>other to get the offset needed to get the vertical mid-point of the
>element positioned in the vertical mid-point of viewport"

yup, clear...

>*if* (and only if) the viewport is tall enough to house the entire
container.
> If the viewport is too small for the element, I zero out margin-top so the
element stays inside viewport.



And here WAS my question: 
If the browsers, automatically add scroll bars to the viewport, allowing it,
with this, to grow indefinitely, then, when or how can the viewport be too
small for the element? 
I mean, each time we make the subtraction between half of the viewport with
half of the element we want to center, we will never get a negative value,
because the viewport will be always bigger then centered element, hence,
I've not understand why we have to set it to "0".

If we give a negative top margin to a element, it will get "out of range" to
the viewport. Ok.
If we force a negative top margin to go to 0, we will get the contents
visible to us on the viewport. Ok.
But I WAS not getting why we need that on a expression that seemed to never
give a negative value.

Why was I saying that the js expression "seems to never give a negative
value"? Because I have tested with this expression:

div#wrapper {
margin-top:
expression(document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)/
2) +'px') ;
}

Then I have change the value of the center element to a exaggerated big
number, and then, I was surprised to see that the center element was stick
on the top, all visible, so, with margin-top 0.




But this WAS my question, not anymore, because, while I was writing this
e-mail, I've noticed that the expression above was not correct. I've
corrected the expression to this one:

div#wrapper {
margin-top:
expression((document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)
/2) +'px') ;
}

And I can now see that the element gets out of range on the top of the
viewport. So I've now understand why we need to use this first line: 
expression((document.documentElement.offsetHeight/2)-(parseInt(offsetHeight)
/2) <0 ? "0" .


Yupi!! :)


Thanks a lot for your reply, and for your time on this,

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

Re: [css-d] just center

[Gunlaug Sørtun]

MEM wrote:
> Thanks for the IE8 info. I didn't know about that.

IE8 still supports IE-expressions in its two "backwards compatibility
modes" - emulating IE7 standard mode and IE5.5/6 quirks mode. No need to
hide them from IE8 in "super-standard mode" though, since it simply
ignores them then.
Most of what we can do with IE-expressions can be done in regular CSS
already - in supporting browsers, and new CSS functions like calc() will
improve things even more in the coming years.

> Please don't take me wrong: I was not putting the article in 
> question, neither trying to make you reiterate things that you have 
> written before.

Question all I write as much as you like, as I can't imagine any of it
being even remotely close to "perfect".
In a few years probably most of what I've written about such
problem-solving in old browsers will be obsolete and should be deleted
anyway, as browsers slowly catch up with common standards.

> I was just asking for a clarification and trying to understand how 
> things really happen on that .js code.

Ok, I'll try. See below.

> But it was a too long pseudo-English e-mail from someone who doesn't 
> even properly know the language, and I assume my fault for some 
> miscomprehension that may have arrived.

Language isn't a problem here, despite the fact that English isn't my
native language. I'm Norwegian... :-)

I did however have a problem with you not being able to see that I've
avoided negative margin-top by simply setting the top-margin to zero if
it ever could become negative.

Blame my short response on the fact that I, as goes for many who have
been around on various lists and forums for a few years, has grown a bit
tired of "continuous spoon feeding" when I think the case has been made
clear enough already.
Such impatience and "shortness" may hit the wrong people at times - sorry.

> Despite the fact that that code will be deprecated sometime, I still 
> want to learn how to "read it", but, as you stated, maybe I should 
> look elsewhere.

Most would read my IE-expression from a Javascript background, so a
person fluent in Javascript should be able to help you extract more details.

I have no real experience with Javascript, so I created the expression
based on simple logic that works in all programming languages. It was
just a question of getting the syntax right for the language at hand.
Microsoft's "dynamic expressions" are compact, but not very
straightforward to create or read IMO. Glad I won't have to write many,
if any, more of those.

---

The original problem was that a negative margin-top would obviously hide
the top of the container above viewport area, and that would be no
improvement over basic absolute positioning that many use for such
horizontal and vertical centering.
If that was good enough, then no IE-expression would be needed.

Avoiding a negative margin-top is the only slightly clever part in my
expression - and why I coded it.

In practice I'm dividing dimensions of body (equal to viewport) and the
centered element by 2, and subtract half of one from half of the
other to get the offset needed to get the vertical mid-point of the
element positioned in the vertical mid-point of viewport, *if* (and
only if) the viewport is tall enough to house the entire container.
If the viewport is too small for the element, I zero out margin-top so
the element stays inside viewport.



Hope that helps a bit.

regards
Georg
-- 
http://www.gunlaug.no
__
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/

Re: [css-d] just center

[MEM]

>
>Simple logic, coded in jscript and expanded/explained here...
>
>...and there's a link to Microsoft's information on the subject in my
>page...
>
>
>Beyond that I don't want to reiterate stuff from my two year old article
>on how to use IE-expressions to overcome weaknesses in old IE's CSS
>support. After all: Support for IE-expressions is discontinued in IE8 -
>no need for it, and older IE versions that supports it are slowly
>dropping in numbers.
>
>regards
>   Georg
>-- 
>http://www.gunlaug.no


Thanks for the IE8 info. I didn't know about that. Well, at the time of my
last e-mail, I have read the article on your page. And I have also read the
similar information about the offset here:
https://developer.mozilla.org/en/DOM/element.offsetHeight
After the reading, and some testing, I was having some doubts that I've
expressed on the last e-mail. 

Please don't take me wrong: I was not putting the article in question,
neither trying to make you reiterate things that you have written before.
I was just asking for a clarification and trying to understand how things
really happen on that .js code. 

But it was a too long pseudo-English e-mail from someone who doesn't even
properly know the language, and I assume my fault for some miscomprehension
that may have arrived.

Despite the fact that that code will be deprecated sometime, I still want to
learn how to "read it", but, as you stated, maybe I should look elsewhere.



Thanks for your time, once again,
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/

Re: [css-d] just center

[Gunlaug Sørtun]

MEM wrote:

> I'm confused, what's going on on this code?

Simple logic, coded in jscript and expanded/explained here...

...and there's a link to Microsoft's information on the subject in my
page...


Beyond that I don't want to reiterate stuff from my two year old article
on how to use IE-expressions to overcome weaknesses in old IE's CSS
support. After all: Support for IE-expressions is discontinued in IE8 -
no need for it, and older IE versions that supports it are slowly
dropping in numbers.

regards
Georg
-- 
http://www.gunlaug.no
__
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/

Re: [css-d] just center

[MEM]

>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  or the tag  ?

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/

Re: [css-d] just center

[Gunlaug Sørtun]

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

Re: [css-d] just center

[MEM]

-Original Message-
Hello to all,

I'm trying to learn how to center something vertically and horizontally. 
I've search and google a lot, but the most of the examples don't work well,
so, I cannot learn from there. Either they have browser issues, either
issues with certain doctypes there is always something, and I'm taking my
hairs off with this!!

So, I found on this mailing list the following article:

http://www.gunlaug.no/contents/wd_additions_20.html

but I'm unable to put it at work (for now, I'm just concern about FF that's
why I have not yet put the if statement for IE) here:

http://nuvemk.com/index4.html


However, when I look at the examples, like here:
http://www.gunlaug.no/tos/moa_15a.html

It works.


The hard part on this is that, when I look the source code on this last
link, I get a lot of code that I don't get.

This part:
/* Non-essential visual styling for all browsers */

And 
/* Cross-hair - visualizing center of browser-window */

and
/* repositioning info about IE/win's performance */


Is this the reason why this link http://nuvemk.com/index4.html doesn't show
thinks centered on firefox?


Regards,
Márcio





Hello again,

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.


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

Re: [css-d] just center

[Peter Hyde-Smith]

- Original Message - 
From: "MEM" 
To: 
Sent: Saturday, March 21, 2009 12:34 PM
Subject: [css-d] just center


Is this the reason why this link http://nuvemk.com/index4.html doesn't show
thinks centered on firefox?

Márcio

Marcio:

The  is centered h/v in the view port in 
WinXP.SP3+FF3.07. The text is not vertically centered because you have given 
an explicit height to that div, and the text is appearing at its top. Remove 
the height declaration, and the text will be centered h/v in the view port. 
I am not sure what you have to do to get that bit vertically centered if you 
declare a height.

Peter Hyde-Smith
www.fatpawdesign.com
WinXP.SP3/FF/IE/O 

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

Re: [css-d] just center

[Gunlaug Sørtun]

MEM wrote:

> The hard part on this is that, when I look the source code on this 
> last link, I get a lot of code that I don't get.

Ignore it, and use your own visual styling.

> Is this the reason why this link http://nuvemk.com/index4.html 
> doesn't show thinks centered on firefox?

Yes, since you can't see what's centered when you have no visual cues.

Here's how your page centers the "centered" container...

...and I'd call that "well centered in all directions".

The red border is there only as a visual cue. Works just as well without
that border, but white-on-white reveals no edges.

regards
Georg
-- 
http://www.gunlaug.no
__
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/

[css-d] just center

[MEM]

Hello to all,

I'm trying to learn how to center something vertically and horizontally. 
I've search and google a lot, but the most of the examples don't work well,
so, I cannot learn from there. Either they have browser issues, either
issues with certain doctypes there is always something, and I'm taking my
hairs off with this!!

So, I found on this mailing list the following article:

http://www.gunlaug.no/contents/wd_additions_20.html

but I'm unable to put it at work (for now, I'm just concern about FF that's
why I have not yet put the if statement for IE) here:

http://nuvemk.com/index4.html


However, when I look at the examples, like here:
http://www.gunlaug.no/tos/moa_15a.html

It works.


The hard part on this is that, when I look the source code on this last
link, I get a lot of code that I don't get.

This part:
/* Non-essential visual styling for all browsers */

And 
/* Cross-hair - visualizing center of browser-window */

and
/* repositioning info about IE/win's performance */


Is this the reason why this link http://nuvemk.com/index4.html doesn't show
thinks centered on firefox?


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