Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Css menu overlapping problem

    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:
    Code:
    .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:

    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have a try making your css:

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

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Have a try making your css:

    Code:
    .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)?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You can centre the whole menu with:

    Code:
    .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?

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    You can centre the whole menu with:

    Code:
    .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.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Can you link to your page?

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately im using a local host at the mo. Ive added a screen shot if that helps.


  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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.

  • #9
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    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:

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

  • #11
    New Coder
    Join Date
    Oct 2011
    Posts
    26
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Top Man absolutely spot on, thanks very much for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •