Re: [css-d] Site Check: Can this DIV be vertically centered in the viewport?

[Gunlaug Sørtun]

Stephen Tang wrote:
> Will this work on a DIV with a declared height?  I'll see what 
> happens to my site when I remove my declared height on the DIV.

Check the demos (links on top of side column in my article), and, yes,
it'll work literally "no matter what" - when done right.

The advantage is that nothing will end up in unreachable places off
screen on small windows, since scrolling becomes active for the whole
page when necessary.

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] Site Check: Can this DIV be vertically centered in the viewport?

[Stephen Tang]

Georg,
Thank you for the link to your website on this.  Will this work on a
DIV with a declared height?  I'll see what happens to my site when I
remove my declared height on the DIV.

--Stephen

On Sat, Mar 21, 2009 at 6:30 AM, Gunlaug Sørtun  wrote:
> David Laakso wrote:
>
>>> I built this site, http://www.isadoratang.com/index.php, but I've been
>>> trying to determine if I can center the  vertically in the
>>> viewport.
>
>> Yes, I think it is possible with CSS (I seem to recall a method Georg
>>  Sortun created but can't find it at the moment)  or possibly with
>> scripting. Although I am not so sure what vertical centering will buy
>>  you with a fixed height wrapper enclosing movable type. Try your page at
>> minimum font-size 24px in FF for example...
>
> Demo with no declared height: 
>
> Article on how: 
> ...with more demos linked in.
> (I'll have to update that article, as IE8 does of course line up
> perfectly with the other CSS2.1 capable browsers.)
>
> 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] Site Check: Can this DIV be vertically centered in the viewport?

[Stephen Tang]

Hi David,
Thanks for the reference to Georg's site.

Yes, I am aware about enlarging the font.  Unfortunately, the center
image is a fixed height and it didn't look good if the box became
vertically longer as the font size increased.

--Stephen

On Sat, Mar 21, 2009 at 1:51 AM, David Laakso
 wrote:
> Stephen Tang wrote:
>>
>> Hello,
>>
>> I built this site, http://www.isadoratang.com/index.php, but I've been
>> trying to determine if I can center the  vertically in
>> the viewport.
>> Any advice on this would be helpful.
>>
>> Sincerely,
>> Stephen
>>
>
>
> Yes, I think it is possible with CSS (I seem to recall a method Georg Sortun
> created but can't find it at the moment)  or possibly with scripting.
> Although I am not so sure what vertical centering will buy you with a fixed
> height wrapper enclosing movable type. Try your page at minimum font-size
> 24px in FF for example...
>
__
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] Site Check: Can this DIV be vertically centered in the viewport?

[Gunlaug Sørtun]

David Laakso wrote:

>> I built this site, http://www.isadoratang.com/index.php, but I've 
>> been trying to determine if I can center the  
>> vertically in the viewport.

> Yes, I think it is possible with CSS (I seem to recall a method Georg
>  Sortun created but can't find it at the moment)  or possibly with 
> scripting. Although I am not so sure what vertical centering will buy
>  you with a fixed height wrapper enclosing movable type. Try your 
> page at minimum font-size 24px in FF for example...

Demo with no declared height: 

Article on how: 
...with more demos linked in.
(I'll have to update that article, as IE8 does of course line up
perfectly with the other CSS2.1 capable browsers.)

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] Site Check: Can this DIV be vertically centered in the viewport?

[David Laakso]

Stephen Tang wrote:
> Hello,
>
> I built this site, http://www.isadoratang.com/index.php, but I've been
> trying to determine if I can center the  vertically in
> the viewport. 
>
> Any advice on this would be helpful.
>
> Sincerely,
> Stephen
>   


Yes, I think it is possible with CSS (I seem to recall a method Georg 
Sortun created but can't find it at the moment)  or possibly with 
scripting. Although I am not so sure what vertical centering will buy 
you with a fixed height wrapper enclosing movable type. Try your page at 
minimum font-size 24px in FF for example...
__
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] Site Check: Can this DIV be vertically centered in the viewport?

[Stephen Tang]

Hello,

I built this site, http://www.isadoratang.com/index.php, but I've been
trying to determine if I can center the  vertically in
the viewport.  The inside of this div has some additional divs that
are floated left or right).   I'm not sure if my margin: auto on the
 is really centering this div in the viewport (IE6
excluded).

I previously tried to and gave up, so the  is
absolutely positioned a fixed distance from the top.  I found this
article that talked about various ways of centering vertically with
CSS: http://blog.themeforest.net/tutorials/vertical-centering-with-css/.
  Method 3 looked promising, but it does not work.

I was wondering if there is a way to do CSS vertical centering.  I
have a separate CSS file for IE6 for corrections.

The CSS file are http://www.isadoratang.com/css/reset.css,
http://www.isadoratang.com/css/site.css,
http://www.isadoratang.com/css/site_ie.css

Any advice on this would be helpful.

Sincerely,
Stephen
__
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/