Horizontal CSS Menu - Nearly there now!

I have almost got it, just need a little assistance

[Foxhole]

Hi again all,

Sorry to keep pestering you all with the same issue!

I have now got all my link rollover buttons working underneath my header but I can not get them to position centrally and horizontally, they are currently sat vertically.

I read a previous post (2005), with a similar issue, I have tried removing display: block from all of my styles and they disappear!

It would be very much appreciated if someone was able to help me out on this, I have been struggling for weeks now and am really keen to learn.

Here is my code thus far:



HTML:

<img id="kwdheader" src="kwd_graphics/kwdbanner.png" alt="headerimage" title="KWD Logo"/>

<div id="center">

<div id="navcontainer">

<ul>
<li id="home"><a href="kwdhome.html" title="Home"><span>Home</span></a></li>
<li id="aboutus"><a href="kwdaboutus.html" title="About Us"><span>About Us</span></a></li>
<li id="services"><a href="kwdservices.html" title="Services"><span>Services</span></a></li>
<li id="portfolio"><a href="kwdportfolio.html" title="Portfolio"><span>Portfolio</span></a></li>
<li id="contactus"><a href="kwdcontactus.html" title="Contact Us"><span>Contact Us</span></a></li>
</ul>

</div>
</div>




CSS:

body {
background:#FFFFFF url('kwdbackgroundimg.jpg') scroll no-repeat center top;
margin-left: auto;
margin-right: auto;
}

#kwdheader {
display: block;
padding: 0;
margin-left: auto;
margin-right: auto;
border: 0;

}

span {
display: none;
}

#center {
text-align: center;
}

#navcontainer {
margin: 0 auto;
width: 100%;
text-align: center;
display: inline;
}

#navcontainer ul {
list-style-type: none;
text-align: center;
padding: 0;
}

#navcontainer li {
display: inline;
text-align: center;
}

#navcontainer li#home a:link, #navcontainer li#home a:visited, #navcontainer li#home a:active {
margin: 0;
width: 150px;
height: 40px;
display: block;
background: url("kwd_buttons/kwdhome.png") no-repeat;
}

#navcontainer li#aboutus a:link, #navcontainer li#aboutus a:visited, #navcontainer li#aboutus a:active {
margin: 0;
width: 150px;
height: 40px;
display: block;
background: url("kwd_buttons/kwdaboutus.png") no-repeat;
}

#navcontainer li#services a:link, #navcontainer li#services a:visited, #navcontainer li#services a:active {
margin: 0;
width: 150px;
height: 40px;
display: block;
background: url("kwd_buttons/kwdservices.png") no-repeat;
}

#navcontainer li#portfolio a:link, #navcontainer li#portfolio a:visited, #navcontainer li#portfolio a:active {
margin: 0;
width: 150px;
height: 40px;
display: block;
background: url("kwd_buttons/kwdportfolio.png") no-repeat;
}

#navcontainer li#contactus a:link, #navcontainer li#contactus a:visited, #navcontainer li#contactus a:active {
margin: 0;
width: 150px;
height: 40px;
display: block;
background: url("kwd_buttons/kwdcontactus.png") no-repeat;
}

#navcontainer li#home a:hover {
background-position: 0 -40px;
}

#navcontainer li#aboutus a:hover {
background-position: 0 -40px;
}

#navcontainer li#services a:hover {
background-position: 0 -40px;
}

#navcontainer li#portfolio a:hover {
background-position: 0 -40px;
}

#navcontainer li#contactus a:hover {
background-position: 0 -40px;
}




Thanks again all,

Foxhole

[Angelis]

float:left; position:relative; in the #navcontainer li might fix the problem, just make sure you stick float:none; in the next section down.

[Angelis]

Oh if you do it as above you also need to take display:block; off.

Code as below...

body {
background:#FFFFFF url('kwdbackgroundimg.jpg') scroll no-repeat center top;
margin-left: auto;
margin-right: auto;
}

#kwdheader {
display: block;
padding: 0;
margin-left: auto;
margin-right: auto;
border: 0;

}

span {
display: none;
}

#center {
text-align: center;
}

#navcontainer {
margin: 0 auto;
width: 100%;
text-align: center;
display: inline;
}

#navcontainer ul {
list-style-type: none;
text-align: center;
padding: 0;
}

#navcontainer li {
display: inline;
text-align: center;
float:left;
position:relative;
}

#navcontainer li#home a:link, #navcontainer li#home a:visited, #navcontainer li#home a:active {
margin: 0;
width: 150px;
height: 40px;
background: url("kwd_buttons/kwdhome.png") no-repeat;
}

#navcontainer li#aboutus a:link, #navcontainer li#aboutus a:visited, #navcontainer li#aboutus a:active {
margin: 0;
width: 150px;
height: 40px;
background: url("kwd_buttons/kwdaboutus.png") no-repeat;
}

#navcontainer li#services a:link, #navcontainer li#services a:visited, #navcontainer li#services a:active {
margin: 0;
width: 150px;
height: 40px;
background: url("kwd_buttons/kwdservices.png") no-repeat;
}

#navcontainer li#portfolio a:link, #navcontainer li#portfolio a:visited, #navcontainer li#portfolio a:active {
margin: 0;
width: 150px;
height: 40px;
background: url("kwd_buttons/kwdportfolio.png") no-repeat;
}

#navcontainer li#contactus a:link, #navcontainer li#contactus a:visited, #navcontainer li#contactus a:active {
margin: 0;
width: 150px;
height: 40px;
background: url("kwd_buttons/kwdcontactus.png") no-repeat;
}

#navcontainer li#home a:hover {
background-position: 0 -40px;
}

#navcontainer li#aboutus a:hover {
background-position: 0 -40px;
}

#navcontainer li#services a:hover {
background-position: 0 -40px;
}

#navcontainer li#portfolio a:hover {
background-position: 0 -40px;
}

#navcontainer li#contactus a:hover {
background-position: 0 -40px;
}





As I said the next div down might need float:none; as a parameter if it doesnt align properly.

This should work but if not let me know.

[Foxhole]

Thanks for your help Angelis, very much appreciated, I was starting to think that I was never going to get this issue resolved!

Just after posting the topic, I had another go and somehow found another way round it,

I changed all of- display: block; within the 'navcontainer li#******* selectors to-
display: inline-block;

I was then left with small gaps between each of the button images, which then drove to insanity for a while!
I found out that to remove these I just needed to join together all of the <ul> element codes into one string without 'hitting return' after each one and putting it in a new line. To make this more user friendly on my code editor, I selected the wrap text feature in the options.

I hope this helps other people who come across this problem.

Thanks again for your help,

Foxhole

[Foxhole]

Thanks for your help Angelis, very much appreciated, I was starting to think that I was never going to get this issue resolved!

Just after posting the topic, I had another go and somehow found another way round it,

I changed all of- display: block; within the 'navcontainer li#******* selectors to-
display: inline-block;

I was then left with small gaps between each of the button images, which then drove to insanity for a while!
I found out that to remove these I just needed to join together all of the <ul> element codes into one string without 'hitting return' after each one and putting it in a new line. To make this more user friendly on my code editor, I selected the wrap text feature in the options.

I hope this helps other people who come across this problem.

Thanks again for your help,

Foxhole

[Foxhole]

Thanks for your help Angelis, very much appreciated, I was starting to think that I was never going to get this issue resolved!

Just after posting the topic, I had another go and somehow found another way round it,

I changed all of- display: block; within the 'navcontainer li#******* selectors to-
display: inline-block;

I was then left with small gaps between each of the button images, which then drove to insanity for a while!
I found out that to remove these I just needed to join together all of the <ul> element codes into one string without 'hitting return' after each one and putting it in a new line. To make this more user friendly on my code editor, I selected the wrap text feature in the options.

I hope this helps other people who come across this problem.

Thanks again for your help,

Foxhole

[Foxhole]

Ooops! don't know why these messages come though so many times!