Click to See Complete Forum and Search --> : Elements Not Appearing


Ryan123
01-19-2007, 12:14 AM
(First off, sorry if this is a duplicate of a thread out there... I searched but being new to CSS, it's hard to know what's the same and what's not...)

This is my website:
http://www.boehr-realty.com/test2/index.htm

This is my CSS code:
http://www.boehr-realty.com/test2/style.css

And attached is what I want my website to look like, with the exception of Ryan being vertically centered in that box.

a) Why doesn't the div with the white background and blue border show up? I tried z-index but that didn't work; unless, of course, I messed it up.

b) Is there a way to vertically center "Ryan"? I looked and found a lot of pages about it on Google but it was mostly setting line-height to 8em or something of the like. That didn't seem to center it, and the more I increased the em (to 15em, just for example), the box would grow...understandable. However, I don't know of any other way to vertically center it.

[EDIT]» After much tweaking, I think I found my answer to the first part (so you don't even have to embarrass me by telling me my dumb mistakes!! :P). However, I'm still a little confused on the vertically centering.

Centauri
01-19-2007, 08:11 AM
In your css - the highlighted closing brcket is wrong way around #container{
position: relative;
width: 780px;
height: 100%;
margin: auto;
{

Cheers
Graeme

Centauri
01-19-2007, 08:18 AM
The h1 tag has default margins, which differ by browser. Adding margin:0;
line-height:110px; to your h1 css will center the text.

Good practise to zero all browser default margins / paddings by starting the css file with * {border:0; margin:0; padding:0;}

Cheers
Graeme