Re: [css-d] Site Check: Can this DIV be vertically centered in the viewport?
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 div id=page 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: http://www.gunlaug.no/tos/moa_15a.html Article on how: http://www.gunlaug.no/contents/wd_additions_20.html ...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?
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 da...@chelseacreekstudio.com 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 div id=page 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?
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 gunla...@c2i.net 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 div id=page 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: http://www.gunlaug.no/tos/moa_15a.html Article on how: http://www.gunlaug.no/contents/wd_additions_20.html ...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 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/
[css-d] Site Check: Can this DIV be vertically centered in the viewport?
Hello, I built this site, http://www.isadoratang.com/index.php, but I've been trying to determine if I can center the div id=page 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 div id=page is really centering this div in the viewport (IE6 excluded). I previously tried to and gave up, so the div id=page 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/
Re: [css-d] Site Check: Can this DIV be vertically centered in the viewport?
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 div id=page 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/
