Topic: horizontal & vertical centering Pages that link to <a href="https://ozoneasylum.com/backlink?for=10689" title="Pages that link to Topic: horizontal &amp;amp; vertical centering" rel="nofollow" >Topic: horizontal &amp; vertical centering\

 
Author Thread
u-neek
Bipolar (III) Inmate

From: Berlin, Germany
Insane since: Jan 2001

IP logged posted posted 03-07-2002 09:10 Edit Quote

Look at this and tell me if it works in your browser or not.


Thanks.

Jeni
Paranoid (IV) Mad Scientist

From: 8675309
Insane since: Jul 2000

IP logged posted posted 03-07-2002 14:32 Edit Quote

no
IE 5.1 Mac

Ducati
Paranoid (IV) Inmate

From: in your head
Insane since: Feb 2001

IP logged posted posted 03-07-2002 14:49 Edit Quote

yes

IE 6.0 Win XP

:: m a x ::

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 03-07-2002 14:53 Edit Quote

That is a brilliant method. Did you come up with that yourself?

Works here in IE 6, and it's only slightly off center in Mozilla 0.9.3.

DigitalUbiquity
Bipolar (III) Inmate

From: St. Paul, MN, USA
Insane since: Jan 2002

IP logged posted posted 03-07-2002 15:30 Edit Quote

The above works for me on my Win2000 box in IE6 and N6.2...

It not a vertical centering solution, but here is another example of cross-borwser horizontal positioning.

http://www.jasonstahl.net/misc/align-with-css.jsp

DigitalUbiquity

[This message has been edited by DigitalUbiquity (edited 03-07-2002).]

u-neek
Bipolar (III) Inmate

From: Berlin, Germany
Insane since: Jan 2001

IP logged posted posted 03-07-2002 16:07 Edit Quote

Thanks all,
I read a lot of horizontal centering with css, but never found a solution for vertical centering.

Jeni, can you send me a screenshot?

Anybody uses Opera?

edit: Slime, I fixed it. Now it looks the same on both browsers.



[This message has been edited by u-neek (edited 03-07-2002).]

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

IP logged posted posted 03-07-2002 16:10 Edit Quote

Everything's fine in Opera 5.0 and 6.0!

edit: but in NN 4.7, the negative margins don't work, and the distance from the top is the same as the distance from the right (50% of the window's width).

kuckus

[This message has been edited by kuckus (edited 03-07-2002).]

DigitalUbiquity
Bipolar (III) Inmate

From: St. Paul, MN, USA
Insane since: Jan 2002

IP logged posted posted 03-07-2002 20:35 Edit Quote

Yes, I am very excited to have a vertical centering option...

DigitalUbiquity

Pugzly
Paranoid (IV) Inmate

From: 127.0.0.1
Insane since: Apr 2000

IP logged posted posted 03-07-2002 22:47 Edit Quote

Hey DigitalUbiquity - Thanks for the link! I was reading the page that he links to, and I think that just solved nearly every CSS positioning issue I've ever had.

Thanks!

Ducati
Paranoid (IV) Inmate

From: in your head
Insane since: Feb 2001

IP logged posted posted 03-08-2002 20:05 Edit Quote

Hey why don't you just use one big table set it as height="100%" width="100%" the put a cell in there with horizontal centered and vertical middle???

Is there a difference to what you just did and what I am trying to say?

:: m a x ::

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

IP logged posted posted 03-08-2002 21:09 Edit Quote

Ducati, his goal is CSS-only layout, so no tables are allowed (but you can do that with tables, too)...


Ducati
Paranoid (IV) Inmate

From: in your head
Insane since: Feb 2001

IP logged posted posted 03-09-2002 20:59 Edit Quote

Hmm.. thats what I thought after I looked at it and read the threads above..

but what would be the benefit of using CSS instead of tables for something like this??

:: m a x ::

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

IP logged posted posted 03-09-2002 22:28 Edit Quote

Tables should only be used for presenting tabular content, they shouldn't be used for page layouts anymore. That's what CSS should be used for...


Lurch
Paranoid (IV) Inmate

From: Behind the Wheel
Insane since: Jan 2002

IP logged posted posted 03-11-2002 01:54 Edit Quote

I'd love to use css more for page layouts, but what about browsers like nn4? I know we should not have to worry about designing for nn4, but the fact is that a lot of people still have it. wouldn't tables be more reliable for now?

--Lurch--

trevorsaint
Obsessive-Compulsive (I) Inmate

From: Crewe, Cheshire
Insane since: Aug 2003

IP logged posted posted 08-18-2003 21:17 Edit Quote

Hi all, that vertical centering is fantastic. I have been after that for some time. However we have one small problem. If the user resized the browser window, the centered table does not move with the resize! is there a cure for this? . please advise. Trevor Saint

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 08-18-2003 22:47 Edit Quote

Well, first of all, it's a centered div, not a table.

Second, it does move with the resize. What browser are you using?


Since someone already dug this up, I'd like to point out that a disadvantage to this method is that if the browser window is sized smaller than the div, parts will be pushed off the screen by the negative margins (and that you can't scroll over to them).

And Lurch: Yes, people still use NN4 (*shudder*) but I usually just hide tricky CSS from it using the @import method, and possibly serve it a simpler stylesheet through the more common <link>.

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

IP logged posted posted 08-18-2003 23:13 Edit Quote

WOW! It's a blast from the past This topic was started a way back in March 2002...


ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 08-19-2003 00:39 Edit Quote

Holy crap, I thought that said March 2003!

OK then, take back what I said about NN4

trevorsaint
Obsessive-Compulsive (I) Inmate

From: Crewe, Cheshire
Insane since: Aug 2003

IP logged posted posted 08-19-2003 03:19 Edit Quote

2002 lol, well I tried that css in Opera 7.0 and although it works on a first load, when you manually resize the browser window, the centered box does not flow with it. I wonder if you managed to correct this problem at all?

ozphactor
Maniac (V) Inmate

From: California
Insane since: Jul 2003

IP logged posted posted 08-19-2003 03:24 Edit Quote

I've tested it in IE 6, Netscape 7, and Firebird 0.6, and in all of those browsers, the vertical centering automatically adjusts as I resize the window.

So I'm assuming it must be a problem specific to Opera 7 or to your particular configuration.

mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

IP logged posted posted 08-19-2003 09:48 Edit Quote

I've just tested that page in Opera 7.11 and I can confirm that it doesn't properly position div layer when you resize window. So, it must be an Opera only bug, which they will probably fix in the upcoming 7.2 version (that is if someone reports the problem to them).

Anyway, only way to fix this is to reload complete page when window is resized, and the following code will do the trick:

<body onresize="if (window.opera) { document.location.reload() }">
</body>




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


« BackwardsOnwards »

Show Forum Drop Down Menu