Streepjes Menu (CSS)

Hallo,

Het is mogelijk om in een menu streepjes te zetten. Nu heb ik mijn menu in een list gemaakt (horizontaal). Hoe zet ik nu die streepjes ernaast? Heb al gezocht op Google maar weet niet waar ik precies naar moet zoeken. Het moet ongeveer zo eruit zien:

Home | Algemene Voorwaarden | Contact

Alvast bedankt voor de hulp.

Gewoon zo doen:

Home |
Nieuws |
Contact

En dan in je html

Dat gaat niet werken. Heb het ook liever in de CSS. Volgens mij kan het met een class [

]. Maar ik heb geen idee hoe ik dit in de CSS verwerk.

Dit werkt wel hoor, zo doe ik het namelijk ook.

Waarom wil je het in je css?

Dat ziet er sowieso netter uit. En wanneer ik gewoon een streepje | plaats in mijn list dan komt hij onder de menuknop te staan in plaats van ernaast.

Plaats de html eens van je menu....

Heb nu iets gedaan. Maar dit moet toch ook via een class kunnen? Zo staan ze in ieder geval wel goed.

<div id="navigatie">
        <ul>
            <li><a href="index.html">Main</a></li>
            <li><img src="images/streepje.png" alt="Streep" style="margin-top: 9px;" /></li>
            <li><a href="index.html">Products</a></li>
            <li><img src="images/streepje.png" alt="Streep" style="margin-top: 9px;" /></li>
            <li><a href="index.html">Tools</a></li>
            <li><img src="images/streepje.png" alt="Streep" style="margin-top: 9px;" /></li>
            <li><a href="index.html">Support</a></li>
            <li><img src="images/streepje.png" alt="Streep" style="margin-top: 9px;" /></li>
            <li><a href="index.html">Partners</a></li>
            <li><img src="images/streepje.png" alt="Streep" style="margin-top: 9px;" /></li>
            <li><a href="index.html">Email</a></li>
            <li><img src="images/streepje.png" alt="Streep" style="margin-top: 9px;" /></li>
            <li><a href="index.html">Contact</a></li>
        </ul>
</div>

HTML:

<div id="navigatie">
        <ul>
            <li><a href="index.html">Main</a></li>
            <li><class="streepje"></li>
            <li><a href="index.html">Products</a></li>
            <li><class="streepje"></li>
            <li><a href="index.html">Tools</a></li>
            <li><class="streepje"></li>
            <li><a href="index.html">Support</a></li>
            <li><class="streepje"></li>
            <li><a href="index.html">Partners</a></li>
            <li><class="streepje"></li>
            <li><a href="index.html">Email</a></li>
            <li><class="streepje"></li>
            <li><a href="index.html">Contact</a></li>
        </ul>
</div>

CSS:

.streepje {
background: images/streepje.png;
margin-top: 9px; }

Zoiets? Wist niet dat je images deed

Zo kan het ook. Het is mijn bedoeling om zoiets te krijgen:

Main

Mocht dat niet kunnen, dan zal ik het zo doen.

Main

Misschien kan dit. Als je hem ervoor zet, krijg je hem er ook voor.

<a href="index.html">home</a>| <a href="faq.html">Algemene Voorwaarden</a> | <a href="contact.html">Contact</a>

@ Frozenflame : zet ook eens je css hier in dit topic.
Je hoeft namelijk geen aparte class, je kan dit in de li van je css verwerken.

/*Menu*/
#navigatie 
{ 
    font-family: Verdana; 
    font-size: 8pt; 
    color: #828282; 
    margin-left: 5px; 
    margin: 0 auto;    
}
#navigatie ul 
{ 
    list-style: none; 
    margin: 0 auto; 
    padding: 0; 
}
#navigatie ul li 
{ 
    float: left; 
    padding-left: 5px; 
}
#navigatie ul li a 
{ 
    display: block; 
    color: #828282; 
    text-decoration: none; 
    padding-left: 20px;
    padding-top: 8px;
    padding-right: 20px;
    height: 24px; 
    width: 44px;
}
#navigatie ul li a:hover 
{ 
    background-image: url(images/hover.png);    
}

Ik weet niet hoe je afbeelding is van images/streepje,png maar ik ga ervan uit dat dit een small streepje is van 1 of 2 px? Dan zou het ook gewoon zo kunnen:

#navigatie ul li a 
{ 
    display: block; 
    color: #828282; 
    text-decoration: none; 
    padding-left: 20px;
    padding-top: 8px;
    padding-right: 20px;
    height: 24px; 
    width: 44px;
    background: url(images/streepje.png) no-repeat top right;
}

@ Marjolein: Dat bedoelde ik inderdaad. Is het ook mogelijk om het plaatje een margin te geven? Hij staat nu namelijk te hoog en moet 9 pixels omlaag.