Journey To The Centre Of The Earth

Posted: 16 April 2002 04:43 AM

[ Ignore ]

stars_1

Total Posts: 144

Joined 2001-11-17

Or, rather, I want to place an image in the exact centre of the page I am building. I have been doing this for the last couple of years with HTML of the likes you’ll find here:

http://www.megasad.freeserve.co.uk/

(look at the source)

The key parts, for centering the image vertically, are the height=“100%” part of the TABLE and then the valign=“middle” (“center” on that page at present, but I only just found out that *this* wasn’t valid either) part of the TD within it.

However, according to the error checker in iCab, and indeed the W3C itself, the attribute HEIGHT is not allowed for the tag TABLE.

So; solutions?

How can I position an image in the exact centre of the screen, like you see on that page there, without making the table the same height as the browser window?

All help appreciated,
Simon

Signature

/megasad/ibookswan

Profile

ERNesbitt

Posted: 22 March 2002 10:50 AM

[ Ignore ] [ # 1 ]

stars_4

Total Posts: 558

Joined 2001-12-18

By putting the tags in the body it moves the whole table out to the borders of the window. If you’d like a small space around the content (text, etc.) so they’re not up against the window, change the cellpadding variable in the main table.

Then instead of setting your table height and width, set the cells height and width. That should work.

_________________
—
“I’ve never known a musician that regretted being one. Whatever else life gives you… music will never let you down.”
- Anon

<font size=-1>[ This Message was edited by: ERNesbitt on 2002-03-22 15:53 ]</font>

Signature

I’m out of time, patience and my mind… but I have plenty of excuses.

Profile

megasad

Posted: 22 March 2002 10:55 AM

[ Ignore ] [ # 2 ]

stars_1

Total Posts: 144

Joined 2001-11-17

On 2002-03-22 15:50, ERNesbitt wrote:
<body leftmargin=“0” topmargin=“0” marginwidth=“0” marginheight=“0”>

<table cellpadding=“0” cellspacing=“0” border=“0” width=“100%” height=“100%>
<tr>
<td align=“center” valign=“middle”>
<!—Content Here—>
</td>
</tr>
</table>

By putting the tags in the body it moves the whole table out to the borders of the window. If you’d like a small space around the content (text, etc.) so they’re not up against the window, change the cellpadding variable in the main table.

Thanks for the code, but that’s even less W3C compliant than what I have already; all those margin things aren’t allowed in the BODY tag (I’ve got it completely flush with the edges already, with my CSS’s “margin: 0px;”) and you’ve still got the HEIGHT attribute in the TABLE tag, the very thing I was trying to get away from. But thanks for trying.

Does anyone else know how I can do this?

Signature

/megasad/ibookswan

Profile

Gina Dentata

Posted: 22 March 2002 03:55 PM

[ Ignore ] [ # 3 ]

stars_3

Total Posts: 390

Joined 2002-01-09

Got it! Sorta.

According to this guy , there is no vertical centering yet. So I fudged it. The “auto” margins for left and right take care of horizontal centering, and a 25% top margin kinda gets it near the center. The margin shorthand works clockwise: top, right, bottom, left; or 12, 3, 6, 9.

The style sheet is here . The ugly borders are just for illustration/reference.

Edited to say: And it all validates!

<font size=-1>[ This Message was edited by: Gina Dentata on 2002-03-22 20:56 ]</font>

Profile

megasad

Posted: 26 March 2002 06:59 PM

[ Ignore ] [ # 4 ]

stars_1

Total Posts: 144

Joined 2001-11-17

...And it all validates!

Alas, it looks damn foolish on this Windows/IE combination I’m using right now. The swan is over on the left, near the bottom of the screen. Thanks though, and I’m guessing it does actually appear correctly in IE on a Mac?

The solution I have decided upon? Until there is a real way of centring things vertically, I shan’t.

Boom,
Simon.

Signature

/megasad/ibookswan

Profile

davidneale

Posted: 02 April 2002 12:03 PM

[ Ignore ] [ # 5 ]

stars_5

Total Posts: 1005

Joined 2001-08-26

Is this the sort of thing you’re looking for?

<HTML><HEAD>
<TITLE>Position test</TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF”>

</DIV>

</BODY>
</HTML>

Profile

Gina Dentata

Posted: 02 April 2002 12:33 PM

[ Ignore ] [ # 6 ]

stars_3

Total Posts: 390

Joined 2002-01-09

Naw, that doesn’t center it, really; it’s too dependent on the size of the browser window.

If I’d bothered to read the link I sent in my last message, I’d have known that IE5/Win doesn’t do the “auto” margin properly. And Lord knows it botches the box model something awful.

I think our li’l friend gave up and went home a coupla days ago, anyway.

Profile

megasad

Posted: 02 April 2002 03:14 PM

[ Ignore ] [ # 7 ]

stars_1

Total Posts: 144

Joined 2001-11-17

I think our li’l friend gave up and went home a coupla days ago, anyway.

Went home, yes, but not given up. Uploading my near-W3C-compliant sites within the next couple of days and will work on the totally-W3C-compliant versions after I finish revising for (and doing) my end of year exams. So they’ll keep the height=“100%” / valign=“middle” combination for now, and I’ll work something else out in the future.

-Simon.

Signature

/megasad/ibookswan

Profile

megasad

Posted: 02 April 2002 03:29 PM

[ Ignore ] [ # 8 ]

stars_1

Total Posts: 144

Joined 2001-11-17

On 2002-03-22 20:55, Gina Dentata wrote:
Got it! Sorta.

Hoom. Finally looking at this using IE on my iBook and whilst the image is centred horizontally, it is still closer to the bottom of the screen than it is the top. OmniWeb sticks it in the top left corner, iCab does the same as IE, Opera sticks it in the centre top, and Mozilla and Netscape also do the same as IE.

So not a single browser can centre an object vertically unless it uses non-W3C-compliant HTML. Curses.

Signature

/megasad/ibookswan

Profile

ERNesbitt

Posted: 03 April 2002 06:38 AM

[ Ignore ] [ # 9 ]

stars_4

Total Posts: 558

Joined 2001-12-18

You could do it with frames

<frameset cols="*,770,*" border="0"> 

  <frame name="blank" src="blank.html" scroling=no noresize>

  <frameset rows="*,590,*" border="0"> 

    <frame name="blank" src="blank.html" scrolling=no noresize>

    <frame name="content" src="splash.html" hscroll=no noresize>

    <frame name="blank" src="blank.html" scrolling=no noresize>

  </frameset>

  <frame name="blank" src="blank.html" scroling=no noresize>

</frameset>

This keeps the frame centered at all times (go to http://www.votsparky.com for an example of just horizontal centering)

Just change the 770 and 590 to your width and height of the image.

Signature

I’m out of time, patience and my mind… but I have plenty of excuses.

Profile

Gina Dentata

Posted: 03 April 2002 07:58 AM

[ Ignore ] [ # 10 ]

stars_3

Total Posts: 390

Joined 2002-01-09

Hoom. Finally looking at this using IE on my iBook and whilst the image is centred horizontally, it is still closer to the bottom of the screen than it is the top.

Probably because I did it on my big-*ss 19-inch monitor. In OS 9.

You’re right. I just looked at it on my iBook (in OS X), and it does push down to the bottom. And the purple border is only visible at the top, which would suggest it’s drawing the divs too big. Perhaps I’ve picked the wrong box to inherit the 25% from, or there’s a difference between the two versions.

OmniWeb sticks it in the top left corner, iCab does the same as IE,

Those two have rather limited support for CSS, so that’s to be expected.

Opera sticks it in the centre top, and Mozilla and Netscape also do the same as IE.

So not a single browser can centre an object vertically unless it uses non-W3C-compliant HTML. Curses.

I scoured the CSS2 spec (before I read that link), and there’s nothing there for vertical centering. Seems a rather odd omission.

But a table will validate, it’s just violating the presentation/content boundary. I don’t think Unka Jeffrey will mind.

<font size=-1>[ This Message was edited by: Gina Dentata on 2002-04-03 13:06 ]</font>

Profile

evren

Posted: 16 April 2002 04:43 AM

[ Ignore ] [ # 11 ]

stars_1

Total Posts: 4

Joined 2002-04-14

here is another perspective…

i am not a javascripter but as there is a javascript which dynamicly sets the browser window’s width and height to 0 of the monitor resolution, it seems possible to write a JS which positions the image relatively in the center and middle of a page independent from browser or OS versions.

Profile

‹‹ HTML newsletters in Mac's USB VideoBus II for Mac Belkin Part Number: F5U208-MAC ››

Apple Stock Quote (AAPL)

Hot Topics

TMO Express

Top Deals From DealBrothers.com

Recent Features