text centering help (css)

Emaj

10-14-2007, 03:53 AM

this is the site which I'm trying to make
Click here (700x700) (http://i2.photobucket.com/albums/y9/emaj/site/Official_site.gif)

and here are the results:
http://www1.freewebs.com/emaj/test.htm

this is my third attempt at creating a css-based layout
I need the text in the navigation area (e.g home, portfolio, contact me,etc)
to be centered.
I used text-align: center but it didn't work
One more thing, I did try validating it but it it says invalid and I tried to fix it but it doesn't seem it's working.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww1.freewebs.com%2Femaj%2Ftest.htm&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=0&No200=1&verbose=1&st=1
I tried fixing it but it messes up my layout.

Any help would be appreciated and thank you in advance :)

Blue_Jeans

10-14-2007, 05:48 AM

I've spent two hours on it mate, and I can't get it to work. The only thing I could tell you to do is to just use a div and have the a tags immediately inside, no containing divs. But then when you use a background image on it, it gets inconsistent.

The problem is that when you say float:left, it clears the margin: 0 auto; I know this can be done, I would have to recode your code from scratch, which I don't want to do. I've spent too much time on it already. Good luck, mate!

PappaJohn

10-14-2007, 06:07 AM

Just taking a quick glance:

1. Your use of the <ul> is not correct. It's a good idea to use a <ul> element for navigation, but it needs to contain <li> elements and not <div>'s. A number of examples can be found at Listamatic (http://css.maxdesign.com.au/listamatic/index.htm).

2. In your css you have defined #body{} yet you have no tag with an id of #body. If you intended that to apply to the <body> tag it should be body{}.

If fixing the validation errors "messes up your layout", the reason is the html and/or css used to create that layout is a mess.

Emaj

10-14-2007, 06:28 PM

Thanks for the suggestion, I was confused about the "body" tag but you cleared it up! Well it doesn't surprise me that my css/html is all messy, thanks for the help and pointing me to the right direction :P

to Blue_Jeans: Dam, 2 hours! Sorry for using your valuable time, and it be nice to have my work coded so I can compare it to my messed up work but thanks for trying to fix it :)

vexen

10-15-2007, 04:30 PM

hi Emaj, i came to a similar problem with my site.

i ended up putting the UL in a DIV given an ID of wrapper, and centering it using text-align:center AND margin:0 auto

see it here, along with the css : http://www.veksen.net http://www.veksen.net/c/a01.css

i have a much more recent version on my laptop which doesnt have access to the internet. (see the footer not wanting to clear in IE, but much more..)

hope this can help you on the right track, and good luck with xhtml/css!

ADD: You should use <li>'s inside your <ul> and trigger the rollover on the <a> with #navigation ul li a:hover