homepage Welcome to WebmasterWorld Guest from 54.234.2.94
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Horizontal CSS Menu - Nearly there now!
I have almost got it, just need a little assistance
Foxhole




msg:4114989
 12:25 pm on Apr 13, 2010 (gmt 0)

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




msg:4115031
 1:39 pm on Apr 13, 2010 (gmt 0)

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




msg:4115050
 1:53 pm on Apr 13, 2010 (gmt 0)

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




msg:4115244
 5:43 pm on Apr 13, 2010 (gmt 0)

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




msg:4115246
 5:43 pm on Apr 13, 2010 (gmt 0)

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




msg:4115247
 5:43 pm on Apr 13, 2010 (gmt 0)

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




msg:4115250
 5:45 pm on Apr 13, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved