dzygners' forums
You have never visited, or are not logged in.
Not logged in [Login - Register]

Printable Version | Send to Friend
Subscribe | Add to Favorites
Author Subject: [ tip ] Vertical and Horizontal centering
jimdrake
flash guru






385 Posts
Location . Bristol, UK
Status: Offline

posted on 6.14.2002 at 10:05 Reply With Quote
[ tip ] Vertical and Horizontal centering

This will center both your content vertically and horizontally. The easiest way to use it is to put all your content into one div with class="main", and then apply this style to the main div.

code:
.main {  
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}

The only problem with this is that it isn't dynamic, ie, you have to put in the values yourself, and work out the margins as minus-half of the width/height. You can't just stick it onto any div without adjusting it manually.

The good side of it though, is that it works on most browsers.

Tested
Internet Explorer 5
Internet Explorer 6
Mozilla 0.9.9
Netscape 6.2.1
Netscape 7.0 Preview Release 1
Opera 6.0.

Fails
Netscape 4

Test - Thanks to Sergi.

Click the link above, if the content is centered go to Help -> About in the browser you are using. Send me a U2U (click the U2U button below my signature) and give me the details of what browser you are using. Lets see if we can build up a good, comprehensive list of browser support.






View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U jimdrake
Sergi
backend messer






465 Posts
Location . Barcelona
Status: Offline

posted on 6.18.2002 at 11:14 Reply With Quote
I posted that solution in april, I think, at DC. And I got it from milov anyway, so nothing new. Thanx for pointing out though, it's very handy.

Note that Netscape 4 wont handle it correctly, you will have to use either java script or any server side trick.

I personnaly use a PHP trick to detect ns4 and change the CSS accordingly. In ns4 my layer isnt centered, it shows on top right. Otherwise it would show further down the page and show the scrollbars too.


btw your site is very nice, fresh air. i like orange.


[Edited on 2002.6.18 by Sergi]




Sergi: [ meddle v2 ] || [ gen7es ] || [ e ]
View User's Profile Visit User's Homepage View All Posts By User U2U Sergi
jimdrake
flash guru






385 Posts
Location . Bristol, UK
Status: Offline

posted on 6.18.2002 at 11:50 Reply With Quote
I think I got the idea from bluerobot.com.

I always apply all my CSS to do with positioning elements after i have done a DOM check, which I assume fails in NS4.

For anyone doesn't know about DOM checks, head on over to DHTMLCentral.com and do a search for DOM check.





View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U jimdrake
Sergi
backend messer






465 Posts
Location . Barcelona
Status: Offline

posted on 6.18.2002 at 12:14 Reply With Quote
Go here to check the thread I opened in dhtmlcentral.

The examples I created are here (simple) and here (not that easy)

For a trick to check for ns4 in PHP, let me know if you're interested and I'll post it here too.




Sergi: [ meddle v2 ] || [ gen7es ] || [ e ]
View User's Profile Visit User's Homepage View All Posts By User U2U Sergi
rem_sr
Senior Member






481 Posts
Location . Sweden
Status: Offline

posted on 6.18.2002 at 15:04 Reply With Quote
Sergi, I would be interested in that PHP trick of yours, would appreciate if you posted it...
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U rem_sr
Sergi
backend messer






465 Posts
Location . Barcelona
Status: Offline

posted on 6.18.2002 at 16:20 Reply With Quote
look here




Sergi: [ meddle v2 ] || [ gen7es ] || [ e ]
View User's Profile Visit User's Homepage View All Posts By User U2U Sergi
hzr
Moderator






1701 Posts
Location . localhost
Status: Offline

posted on 7.12.2002 at 23:50 Reply With Quote
Actually the div must be positioned absolute too (suppose you just forgot that ), so I updated the tip, hope you dont mind!




hzr
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U hzr
jimdrake
flash guru






385 Posts
Location . Bristol, UK
Status: Offline

posted on 7.20.2002 at 10:44 Reply With Quote
quote:
Actually the div must be positioned absolute too (suppose you just forgot that ), so I updated the tip, hope you dont mind!


Cheers





View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U jimdrake
Alan
Junior Member






89 Posts
Location . Notts, England
Status: Offline

posted on 7.30.2002 at 15:00 Reply With Quote
Works in Netscape 7.0 Preview Release 1


View User's Profile View All Posts By User U2U Alan
bodyvisual
Senior Member






490 Posts
Location . in my own fantasy world
Status: Offline

posted on 3.21.2003 at 00:53 Reply With Quote
Hey.

I have MSN Explorer 8 ( which is really just IE 6 i think) and it works fine.

I got this tutorial off of www.dhtmlnirvana.com .

Hmmm




_bdvis loves you.
View User's Profile E-Mail User Visit User's Homepage View All Posts By User U2U bodyvisual

© 2002 - 2005 dzygn.com
Powered by XMB v1.5 Beta :: Blue Moon
Processed in 0.2599921 seconds, 37 queries