Positioning text [Archive] - Dynamic Drive Forums

Zaph

04-25-2005, 01:12 PM

Very quick question:
How do i position something so that it is still centered, but set so that it is touching the top of the page?
When i tried to use:
<p align="center">
<font face="Boca Raton ICG Solid" color="#3366FF" size="6" style='position:absolute;top:0'>My Heading</font></p> the text positioned at the top but not centered, instead being too far to the right, as if it was right justified.

I know i'm doing something wrong, but i can't seem to found out what.

Thanks,
Martyn.

jscheuer1

04-25-2005, 03:05 PM

That's a real hack looking piece of code. Not that that's a bad thing but, you will be doing alot of it if you do a little of it and it can tend to clutter up your mark up. Anyways, once you use position:absolute and give a coordinate for top or left, you lose any centering. You may be able to regain the center with clever padding or margins but, best to avoid the absolute positioning to begin with. If you want it at the top and centered, place your element just after the <body> tag. Like this:

<body style="margin-top:0">
<h1 align="center" style="margin-top:0">My Heading</h1>or using an on page stylesheet, which is a better habit:

<html>
<head>
<title>My Title</title>
<style type="text/css">
body {
margin-top:0;
}
h1 {
margin-top:0;
text-align:center;
}
</style>
</head>
<body>
<h1>My Heading</h1>

Zaph

04-25-2005, 04:15 PM

Thanks for that, it works a treat, although I had to set the margin for -5 instead of 0 to get it as high as I wanted.

I realise the code was a bit of a mish mash, but it's an improvement on what it was like before - I had some word art as my heading instead: about 50 lines of gibberish code! At least this way i reduces it to 1 line, with the style going in my css file.

Thanks again!