I’m real new to css. I’m wanting to center the top nav bar at:
h
ttp://law-of-attraction-info.com/kate/
I’d like to have everything spread out evenly. Right now, there is too much space after the last menu item on the right and too little space before the first menu item on the left. Is there a way to get the menu items spread out evenly along the whole length of the menu bar? Any help will be so appreciated. Here’s the partial css file:
I did everything you said - I’m still seeing too much blue at the end of the last menu item “Kate’s Articles.” Do you know what I might be doing wrong? Here’s the partial css
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
margin-top: 0;
padding-top: 0;
padding: 0 0 0 0;
background-color: #136096;
text-align:center;
color: #fff;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li {display:inline-block;}
#navcontainer ul li a
{
padding: 0.1em 1em;
background-color: #136096;
text-align:center;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size:9.0pt;
font-weight: bolder;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer #nav_art a {
border: none;
}
#navcontainer ul li a:hover
{
background-color: #a87933;
color: #fff;
Hi, for one thing, when I went to your site I saw on “#navcontainer ul li” you set display:inline and not inline-block (whether you were messing around with that I don’t know because in the code you posted you have that inline-block)
Then once that is set, you need to remove the left margin you set on all the <li>'s
#navcontainer ul li{display:inline-block;margin:0;}
If it is, I’m not seeing any difference.
At the beginning of this code above, I have ul…
but that’s not part of my navigation code right?
I just needed to change this? #navcontainer ul li{display:inline-block;margin:0;}
Hi, I just went to the kate2 page again (I went there before as well) and I cleared my cache and the display:inline; is still there.
Are you sure your giving me the correct link? Clear your cache and make sure that the page is being updated in your control panel (or whatever you use)
And yes the inline-block and margin set to 0 is all taht you need to set now
I see the problem - In the head section it was:
<style type=“text/css” media=“screen”> @import url(…/kate/goldstyle.css);
</style>
and I should have had: @import url(…/kate2/goldstyle.css);
Now I’m seeing the nav bar being two rows and I just want one row.
Also, I’m seeing gold stars and I don’t want to see those. They are
in the:
li {
background: url(images/star.jpg);
list-style:none;
background-repeat: no-repeat;
background-align: top;
background-position: left top;
padding-left: 1em;
margin-left:1.5em;
vertical-align: top;
}
but that shouldn’t have anything to do with my menu, should it? #navcontainer ul
{
padding-left: 0;
margin-left: 0;
margin-top: 0;
padding-top: 0;
padding: 0 0 0 0;
background-color: #136096;
text-align:center;
color: #fff;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li{display:inline-block;margin:0;}
#navcontainer ul li a
{
padding: 0.1em 1em;
background-color: #136096;
text-align:center;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size:9.0pt;
font-weight: bolder;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer#nav_art a {
border: none;
}
#navcontainer ul li a:hover
{
background-color: #a87933;
I’m using Safari and I know it probably doesn’t show up the same way in other browsers, so I’m never sure. But right now, I am seeing two rows in the menu, are you?
Try taht. I have this working locally so I don’t know where you are going wrong if this doesn’t work lol. Make sure to update your link if it still isn’t working
Thanks Ryan for all your help. It is so appreciated. I don’t expect you to write me anymore, just wanted to say thanks. This is how I have everything now:
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
margin-top: 0;
padding-top: 0;
padding: 0 0 0 0;
background-color: #136096;
text-align:center;
color: #fff;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li{display:inline-block;margin:0;}
#navcontainer ul li a{padding:0.1em 1em 0.1em 0;
background-color: #136096;
text-align:center;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size:9.0pt;
font-weight: bolder;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#navcontainer #nav_art a {
border: none;
}
#navcontainer ul li a:hover
{
background-color: #a87933;
color: #fff;
}
I'm seeing two rows still (could be because of safari) also seeing little gold stars in menu which I don't understand. Anyway, thank you so much for everything.
