...

View Full Version : Css menu overlapping problem



kinger251285
11-10-2011, 11:43 AM
Hi

I am absolutely stumped with this problem.

i have created a tabbed style menu navigation bar. I have this working fine with a set number of elements. However when i increase the number of navigation items the menus automatically drops to a new row, as if you were typing in a word document, which is exactly what i want.

However when it does this the top and bottom rows overlap each other. I would like a line (white space) in between the elements as they overflow onto a new row.

Any help appreciated!

Css:

.navBar{
width : 980px;
}

.halfmoon {
margin-bottom : 1em;
}
.halfmoon ul {
padding : 0px 0px 0px 0px;
font : 14px Arial;
margin : 0;
margin-left : 0;
margin-right : 0;
list-style-type : none;
}

.halfmoon li {
display : inline;
}
.halfmoon li a {
text-decoration : none;
padding : 3px 9px 2px 5px;
margin : 0;
margin-right : 0;
color : white;
font-size : 14px;
background : #492d67;
}
.halfmoon li a:visited {
color : white;
}
.halfmoon li a:hover {
background-color : #0099ff;
color : white;
}

HTML:


<div class="navBar">
<div class="halfmoon">
<ul>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Internal-Lighting-/_i.html?_fsub=2599398018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Internal Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Intruder-Alarms-/_i.html?_fsub=2599394018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Intruder Alarms</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Switches-Sockets-/_i.html?_fsub=2599402018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Switches & Sockets</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/TV-Satellite-/_i.html?_fsub=2599403018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">TV & Satellite</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Ventilation-/_i.html?_fsub=2599404018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Ventilation</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Switches-Sockets-/_i.html?_fsub=2599402018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Switches & Sockets</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/TV-Satellite-/_i.html?_fsub=2599403018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">TV & Satellite</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Ventilation-/_i.html?_fsub=2599404018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Ventilation</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Internal-Lighting-/_i.html?_fsub=2599398018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Interna</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Internal-Lighting-/_i.html?_fsub=2599398018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Internal Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Intruder-Alarms-/_i.html?_fsub=2599394018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Intruder Alarms</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Switches-Sockets-/_i.html?_fsub=2599402018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Switches & Sockets</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/TV-Satellite-/_i.html?_fsub=2599403018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">TV & Satellite</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Ventilation-/_i.html?_fsub=2599404018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Ventilation</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Internal-Lighting-/_i.html?_fsub=2599398018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Internal Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Intruder-Alarms-/_i.html?_fsub=2599394018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Intruder Alarms</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Switches-Sockets-/_i.html?_fsub=2599402018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Switches & Sockets</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/TV-Satellite-/_i.html?_fsub=2599403018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">TV & Satellite</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Ventilation-/_i.html?_fsub=2599404018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Ventilation</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES_External-Lighting_W0QQ_fsubZ2599401018QQ_sidZ1024992838QQ_trksidZp4634Q2ec0Q2em322" target="_blank">External Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fire-Alarms-/_i.html?_fsub=2599396018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fire Alarms</a></li>
<li class="selected"><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Fixtures-Fittings-/_i.html?_fsub=2599395018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Fixtures & Fittings</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Heating-/_i.html?_fsub=2599397018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Heating</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Internal-Lighting-/_i.html?_fsub=2599398018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Internal Lighting</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Intruder-Alarms-/_i.html?_fsub=2599394018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Intruder Alarms</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Switches-Sockets-/_i.html?_fsub=2599402018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Switches & Sockets</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/TV-Satellite-/_i.html?_fsub=2599403018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">TV & Satellite</a></li>
<li><a href="http://stores.ebay.co.uk/STAVERTON-ELECTRICAL-SUPPLIES/Ventilation-/_i.html?_fsub=2599404018&_sid=1024992838&_trksid=p4634.c0.m322" target="_blank">Ventilation</a></li>
</ul>
</div>
</div>

SB65
11-10-2011, 11:55 AM
Have a try making your css:


.halfmoon li {
/*display: inline;*/
float: left;
margin: 0 4px 9px 0;
}

kinger251285
11-10-2011, 12:03 PM
Have a try making your css:


.halfmoon li {
/*display: inline;*/
float: left;
margin: 0 4px 9px 0;
}

Hi

I thought it would be a case of margins or padding but couldnt figure it out.

Thanks for that, almost what i wanted. The spaces are there however i dont like the look of the float left. Ive tried float center however that sent the menu vertically down the middle of the page.

Is there a way to have it centrally aligned (aligning does not work either)?

SB65
11-10-2011, 12:07 PM
You can centre the whole menu with:


.navBar {
margin: 0 auto;
width: 980px;
}

(make you sure you have a valid doctype for this to work with IE).

Is that what you mean?

kinger251285
11-10-2011, 12:25 PM
You can centre the whole menu with:


.navBar {
margin: 0 auto;
width: 980px;
}

(make you sure you have a valid doctype for this to work with IE).

Is that what you mean?

Ok so this is working as i want within html. Why would it not work with a php document??

Thank you for your help so far.

SB65
11-10-2011, 12:26 PM
Can you link to your page?

kinger251285
11-10-2011, 12:34 PM
Unfortunately im using a local host at the mo. Ive added a screen shot if that helps.

http://www.clarksonevans.co.uk/ebay/EbayHTMLTemplate/ScreenShotStav.JPG

SB65
11-10-2011, 12:40 PM
Not much help, unfortunately.

I see you are testing in IE - looks like it might be IE7. Just to rule out IE being awkward, can you view your page in Chrome - do you get the same problem?

EDIT: Actually, are you sure that menu isn't centred on the page - it looks like it might be.

kinger251285
11-10-2011, 12:44 PM
Ive already tried that, firefox, chrome and safari. I regularly try different browsers when developing a site.

Unfortunately all are the same, minor layout differences, all aligned to the left.

Seems like the code is missing out the navbar div for some reason.

SB65
11-10-2011, 12:47 PM
Wonder if we are at cross purposes here - the menu is centred but it's component lis are aligned left - is that not what you want? I assumed it was because you said it worked for you in html.

If you want the items centred within the list have a try with:


.halfmoon li {
display: inline-block;
/* float: left;*/
margin: 0 4px 9px 0;
}

kinger251285
11-10-2011, 12:52 PM
Top Man absolutely spot on, thanks very much for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum