| 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!
|
|
|
