Tables must die

[Negmis]

Hi,
I’m new here and I do hate tables especially when I create my web-site using CSS. They just put all elements out of place and I can barely control them.
Well, finally I got rid of all the tables and created my site with DIVs. But there is a problem there too – I’m having a problem with my main menu arrangement.

Code:

Now I want both menu navigation items to be centered within "main_nav". This is a portion of CSS file:

Code:

#main_nav {
width: 570px;
height: 50px;
background-color: #E8ECED;
padding: 0;
margin: 30px 0 0 0;
}
main_nav_list {
position: relative;
height: 50px;
margin: 0;
}
#menunav {
position: relative;
height: 39px;
float: left;
margin: 0 13px 0 13px;
}

I tried to float the entire "main_nav_list" to the right, and no effect, and tried to margin it – same, no result. The only margin that I can do is on "menunav" items. What am I doing wrong here? It seem that the container for the menu items (main_nav_list) is not moving at all. I thought I could nest DIVs inside another DIV, move them to the left, and then align the containing DIV within another DIV. Please, don’t make me go back to tables:(

[Negmis]

"al_m473" wrote:

can you not center #main_nav by adding "text-align: center;"?
it does have a width so should center.

Al

I did. No luck.
Looks like float:left property overrides any center positioning. I removed "float:left" and added "text-align: center", and it did center itself, with one huge bug – all the elements were positioned into a column instead of the row. I’m going to try using <ul id="main_nav_list"> and try to put all elements in a row (that way I don’t have to use "float: left" and "text-align:center" will work, hopefully).
Nevertheless, if I move all elements to the left with "float:left" inside a <DIV> why can’t I align that <DIV> inside another <DIV>?

[Negmis]

Ok, I’ve changed the code a little bit. I’ve replaced "main_nav_list" DIV with UL.

Code:

And the CSS looks like this:

Code:

#main_nav {
width: 570px;
height: 50px;
background-color: #E8ECED;
padding: 0;
margin: 30px 0 0 0;
}
#main_nav_list {
position: relative;
height: 50px;
}
#menunav {
position: relative;
height: 39px;
margin: 10px 6px 0 6px;
float: left;
}

Now all the menu items are positioned in the center. But the <UL> part looks completely wrong to me. I never even edited <UL> properties in CSS, therefore it’s pure HTML. Although it works for me, it makes no sense to me. I’ve checked the page on my IE8, Firefox and Safari – and looks centered in all of them. Sorry guys, my web-site has not been published yet online. Should be there by tomorrow. But if anyone has answer before I publish it, I will greatly appreciate it.

[Negmis]

"ikthius" wrote:

A link to the file so we can actually see what is going on would be very helpful

Ok, I’ve just uploaded the site:
http://aizhanastore.com
You can see in the Source that I’m using <UL> for the top navigation – Home, Jewelry, About. It’s positioned OK, but doesn’t make sense in terms of the way I’m using <UL>. Use Index.html (Home page) for reference in code (it has less code that any other pages).
Here’s the CSS files:
http://aizhanastore.com/PageSetup.css
http://aizhanastore.com/PageStyle.css
The PageSetup.css is where all the arragement, backgrounds happen. The CSS is arranged in order – the same order where all DIV tags occur on the HTML page for easy reference (excluding "absolute" positioned items). I’ve coded HTML nicely too to easy reference and see all the DIVs and tags. In other words – if the Main navigation appears at the top of the page, I will be somewhere at the top of the CSS file (it’s pretty long), and the bottom elements, at the bottom.
Thanks:)

[Negmis]

Thanks a lot:) I’ve changed my code into <ul><li>… And thanks for the tip about using classes – I’m new to CSS:) Used it only for a month:)
But here’s the problem about spacing top navigation items. Now it won’t even move to the left. If I space them, all the items move to the right.
http://aizhanastore.com – Updated index.html
http://aizhanastore.com/PageSetup2.css – Updated CSS only for index.html – other pages use PageSetup.css
Now, if I space them more, how can I move that entire navigation to the left? Or even center it? It keeps moving to the right into the black background if I increase margin of ".menunav" from 7 to 10 or more… For some reason there is an empty space in front of Home button.

[Negmis]

Everything is sized:) I’ve checked.
The main container is 800px wide.
The header, where the main navigation resides is 570px and the conatiner where all info is displayed – is too – 570px, and the footer.
There is no problems there.And I did sketch it out on the paper;)
And sorry for the description. But here, http://aizhanastore.com – check it out now – I’ve spaced main navigation by 10px 13px 0 13px, and it uses PageSetup2.css file ( http://aizhanastore.com/PageSetup2.css ). See? All nav items move to the right beyond and out towards the right side, not left. And there is a big gap between the left side and "Home" navigation button. How can I move it to the left?

[Negmis]

Thanks:) I thought about that, but I didn’t know that ul/li does shifts to the right by default:) Now I know and move it to negative left:)

[Author]

Posts