[CSS] Horizontaal menu & dividers

[Verwijderd]

Ben momenteel aan het proberen om een unordered horizontaal list menu in elkaar te zetten dat er ongeveer zo uit zou moeten komen te zien:

| home | about us | products | contact us |

Nu heb ik voor de dividers een "border-right" toegepast. Nu mis ik dus op de eerste link een border aan de linkerkant. Deze heb ik erin gekregen door het gebruik van "nav ul a:first-child" en dan een border-left. Om één of andere frustrerende reden past hij nu alsnog op elke link in de lijst een border-left toe terwijl ik, volgens mij, alleen de eerste link target met de css die ik gebruikt heb.

Ander voorbeeld:

home | about us | products | contact us

Wanneer ik een "border-right" toepas aan aan de links en op de laatste link een "nav ul a:last-child" en dan border-left op none zet, worden alle dividers ineens ook magisch verwijdert.

Hier volgt de html & css die ik gebruikt heb bij de tweede situatie die ik hier boven geschetst heb, als ik er zo nu nog eens naar kijk kan ik de fout niet vinden, weten jullie dan misschien waar het aan kan liggen? Heb al behoorlijk wat menu's gegoogled en die doen het, volgens mij, op dezelfde manier als ik doe:

HTML:

        <div id="main-nav">
            <ul>
                <li><a href="#">Home</a>
                <li><a href="#">About Us</a>
                <li><a href="#">Products</a>
                <li><a href="#">Contact Us</a>
            </ul>
        </div>

Cascading Stylesheet:

#main-nav {
    width:896px;
    height:30px;
}

#main-nav ul {
    list-style-type:none;
}

#main-nav li {
    float:left;
}

#main-nav ul a {
    border-right:1px solid #F00;
    line-height:30px;
    display:block;
    padding:0 20px;
}

#main-nav ul a:last-child {
    border-right:none;
}

[Verwijderd]

Die a is toch ook de last-child van de li. Je moet op de li elementen letten, niet op de a elementen.

[Verwijderd]

#main-nav li:last-child en dan een "border-right:none;" bedoel je? Geprobeerd, maar alsnog verdwijnen al m'n dividers.

[Bosmonster]

Gebruik trouwens first-child, dat ondersteunt IE7 en 8 ook en komt op hetzelfde neer (border-left dus).

Verder moet je specifieker zijn in je selector:

ul>li:first-child>a

Het gaat om de LI, niet de A

[Verwijderd]

Bedankt voor de reactie. Ben er inmiddels zelf na uren ploeteren nog uitgekomen. Was ten eerste al vergeten om de li tags te sluiten en heb hierna een wrapper om het menu gezet met relative positioning, float left & left 50% waarna de ul tag hetzelfde heeft gekregen maar dan float left -50%. Had dit volgens mij al eerder geprobeerd maar denk dat het niet 100% wou werken vanwege de niet gesloten li tags?

Ergens toch wel fijn om noob te zijn, ben erg blij met kleine resultaten zoals ik ze in mijn design had gezet en vervolgens precies zo in mijn html & css.

[Verwijderd]

Op voorbeeld 1 kan je ook een border-left op de ul zetten. Je geeft dan elke li een border-right.

ul { border-left: 1px solid #000; }
li { border-right: 1px solid #000; }


Voorbeeld twee:

ul li { border-left: 1px solid #000; }
ul li:first-child { border: 0; }