Topic: Vertical Centering Pages that link to <a href="https://ozoneasylum.com/backlink?for=10669" title="Pages that link to Topic: Vertical Centering" rel="nofollow" >Topic: Vertical Centering\

 
Author Thread
Schitzoboy
Paranoid (IV) Inmate

From: Yes
Insane since: Feb 2001

IP logged posted posted 02-04-2002 22:40 Edit Quote

Is it possible to verticly center something (preferable a div or an image) easily? It seems like it would be used a lot but I just don't know how.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

IP logged posted posted 02-04-2002 22:49 Edit Quote

SB: I was going to say that I'd tried and I didn't think it was possible (as I've said this before) although you would think that margin-top: auto; margin-bottom: auto; would do the trick. However, I did a little nosing around and there is a trick to make it work:
www.damowmow.com/mozilla/demos/centring

However, I can't get this to work in IE5/Win2k but it may work in more recent versions of IE. Otherwise its probably not worth looking at. I'll have another look around and see what I can find.

Emps


A good buttock will always find a bench for itself - Estonian proverb

Schitzoboy
Paranoid (IV) Inmate

From: Yes
Insane since: Feb 2001

IP logged posted posted 02-05-2002 03:31 Edit Quote

Didn't work in the latest my IE either. My old hompage use to have a verticle centering jscript but it was slow and you had to wait for all the images to load to boot.

MissTerry
Bipolar (III) Inmate

From: somewhere in the old world
Insane since: May 2001

IP logged posted posted 02-05-2002 08:30 Edit Quote

Bugimus made this script for CPrompt. You may find it interesting.

The thread was: http://www.ozoneasylum.com/Forum2/HTML/001368.html

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

IP logged posted posted 02-05-2002 10:20 Edit Quote

Verticle centering with Javascript isn't slow at all. Not if it's done right.

The link to bugs' script that MissTerry posted works well. Althought that won't work in Opera as it doesnt support the onResize() method. There is a way around this however the explanation is a little lengthy and best left to the DHTML/Javascript forum.

As for the images loading before the JS will center it.... Well I don't think there's a way around that. I was doing a similar thing once and encountered the same problem. I ended up putting in a preloader to cover it as nothing else I tried worked. However, once it's loaded and for non image elements it's lighting fast.

Sadly you can't even fake it with relative margin or padding values as theise % values are relative to the width of the page regardless of the value like so:

If we are given a page at this size:
Page Height = 200px
Page Width = 500px

The following:
margin-top: 10%; margin-left: 10%

Would actually be:
margin-top: 50px; margin-left: 50px

Not 20px & 50px as one would expect. Which is just outright poo if you ask me.

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

IP logged posted posted 02-06-2002 19:56 Edit Quote

Yes that script that Bugs did for me works great.

However, I have been playing around with it for one reason. The page that I was going to use this on has a table that is 750px wide and I wanted it centered vertically as well as horizontally.

The problem is that for some reason when the position:absolute; left:0px is taken out the whole thing crashes on me. And as Draciuss said it doesn't work at all in Opera. I HATE OPERA! :mad

I will post a page as soon as I get my problems with it worked out.

Later,
C:\


~Binary is best~

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 02-06-2002 20:56 Edit Quote

Has anyone tried Bugs' script on a page with the XHTML 1.0 DTD? I get the centered content at the top of the screen, with only the bottom half showing. If I remove the DTD to test, it works fine.

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

IP logged posted posted 02-08-2002 00:09 Edit Quote

Did you try putting the script in an external .js file?



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu