Hi,
I’m working my way through the first edition of CSS: The Missing Manual and following all of the tutorials.
I’ve built the horizontal navigation bar from an unordered list of links and have used it in a tutoring website that I’m currently developing, but I can’t get the resulting navigation bar to center on the page. Does anyone know how I can do this? Obviously, the <div align=“center”> doesn’t do it.
The code with the internal style sheet is copied here. I hope I’ve included enough for a diagnosis.
You have to use overflow:hidden; on the main wrapping div when using the Widthless Float & Relative Position method. Not a problem most of the time but if you can’t set overflow:hidden; on the main wrapper for any reason you will get large horizontal scrollbars from the RP.
Paul’s article that Ryan linked to also covers the Inline-Block method at the end of the article. Inline-Block is widely supported these days and there is a workaround for IE6/7 so that has become my method of choice.
Hi RyanReese,
Actually I found that link right after I posted. Guess I should have looked first! It wasn’t a perfect solution for me but it does work. Thanks.
And Rayzur,
I’ll take a look at what you suggested as well. Being new to CSS, every small step is an effort for me, but I like challenges.
Hi Rayzur,
I took a look at the Centered Inline-Block List Items page you set up as an example, and I was pleased to see that I could interpret the source code. Like I said, I’m new to CSS and it’s like realizing that I can actually read AND understand a new language (which IS what it is for me!).
What you showed me is so much simpler and far more straight-forward than what I got from the “float” method. I appreciate your sharing this with me.