going crazy

[mukuta]

How do i get a h1 sized single sentence in the middle of the screen
please help . I managed to make it a hyperlink not underlined but with
<center > it goes in the middle of the line but not in the middle of the
screen i am very new to this all If it is not to much work send me a
solution ican cut and paste
please help as i tried now for days and i dont see a solution

 

[David Graham]

How do i get a h1 sized single sentence in the middle of the screen
please help . I managed to make it a hyperlink not underlined but with
<center > it goes in the middle of the line but not in the middle of the
screen i am very new to this all If it is not to much work send me a
solution ican cut and paste
please help as i tried now for days and i dont see a solution

Hi
Don't use <center> its deprecated.
To get it in the middle of the screen horizontally is simple, just put this
in the stylesheet

h1 { width: 40%; margin: 0 auto;text-align: center;border: 2px solid red;}

The width is so you can see that the block level element is indeed
centered - without the width it just goes straight across the viewport. The
text-align is to get the text within the h1 to center itself. The borders is
just to make things easier as you can see an outline of where the h1 is. The
snag with the above is IE 6 (Quirk mode) , IE5.5, IE5 and earlier don't
recognise the margin: 0 auto bit. Instead, these browsers incorrectly center
block level elements (thats the actual element) with text-align: center
which is only supposed to affect inline elements like text, span, image
etc.. So you can get these browsers to play ball by wrapping a div around
the h1 and centering the h1 from this wrapper div like this

<div>
<h1>some text</h1>
</div>

and in the css stylesheet

div {text-align: center; border: 2px solid green;}
h1 { width: 40%; margin: 0 auto;text-align: center;border: 2px solid red;}

The h1 text-align: center is probably redundant now as it will be inherited
from the div.

I know this doesn't answer your question about vertical centering on the
screen but it is a start. Vertical centering is more tricky because there is
no height, a page is as tall as it needs to be. So if you put position:
relative; top: 50%; on the div this will give unpredictable results
(assuming the div is a direct child of the body element here) - I think bad
browsers like IE5, IE5.5 and IE6 (quirk mode) will probably do what you want
but good browsers (Mozilla 1.4, Opera 7.1) will not. This is because the
body has a default of height: auto which means it is as tall as it needs to
be to contain the contents, not as tall as the viewport. The bad browsers
don't seem to care about this but good browsers do.
I have seen methods were the position of the containing div is played with
so that its top left corner is in the center of the viewport, and the
negative margins are used to pull the div top left until its center is at
the center of the viewport - this is done by have negative left and top
margins equal to 50% of the divs width and height. This method is not very
good as you tend to loose some of the div in small windows.
I don't know of a good reliable method to vertically center an element,
perhaps someone could help out here!
HTH
David

 

[Toby A Inkster]

How do i get a h1 sized single sentence in the middle of the screen
please help .

<hl style="text-align:center;">My Page</h1>

 

[David Graham]

<hl style="text-align:center;">My Page</h1>

--

Yes, this is the simple way to do it. My long preamble was because for some
reason I was thinking of the problem when a h1 block needs to be centered
because it has a visible border.
David

 

[PeterMcC]

I know this doesn't answer your question about vertical centering on
the screen but it is a start. Vertical centering is more tricky
because there is no height, a page is as tall as it needs to be. So
if you put position: relative; top: 50%; on the div this will give
unpredictable results (assuming the div is a direct child of the body
element here) - I think bad browsers like IE5, IE5.5 and IE6 (quirk
mode) will probably do what you want but good browsers (Mozilla 1.4,
Opera 7.1) will not. This is because the body has a default of
height: auto which means it is as tall as it needs to be to contain
the contents, not as tall as the viewport. The bad browsers don't
seem to care about this but good browsers do. I have seen methods
were the position of the containing div is played with so that its
top left corner is in the center of the viewport, and the negative
margins are used to pull the div top left until its center is at the
center of the viewport - this is done by have negative left and top
margins equal to 50% of the divs width and height. This method is not
very good as you tend to loose some of the div in small windows. I
don't know of a good reliable method to vertically center an element,
perhaps someone could help out here! HTH

I don't know if it is helpful to suggest it, but one method that I've seen
in a number of situations is to use a table with a single cell but, since
the method uses a table of height=100%, it doesn't validate and doubtless
breaks under a number of circumstances. The trick is to place all the page
contents inside the single cell with <td valign="middle" and align="center">

It's deprecated and won't validate but it's the only method, besides the
negative margin method above, that I've seen for centering vertically and
horizontally.

If you've got to have the contents centred, you'll need to choose which
flawed method you'd be prepared to accept - or, perhaps the best method, you
could accept that you can't have vertically centred contents.