Streepje tussen elk menu item

[joris345]

Hallo.

Ik heb nu een aardig css menu in elkaar zitten, maar ik wil graag tussen elke menu item een |. Hoe krijg ik dat voor elkaar?

Dit is mijn css tot nu toe:

.nav {
	float: right;
	width: 688px;
	height: 14px;
	text-align: right;
	font-family: Calibri;
	font-size: 12px;
	text-transform: uppercase;
	padding-right: 12px;
	padding-top: 36px;
	color: #8d9192;
}

.nav ul{
padding: 0;
margin: 0;
white-space: no-wrap;
}

.nav ul li{
display: inline;
border-right: 1px solid #000000;
padding-right: 2px;
padding-left: 2px;
}

.nav ul li a{
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: #8d9192;
}

.nav ul li a:hover{
color: #000000;
}

.nav ul li a.menuactive {
color: #000000;
}

 

[csshunter]

Hoi Joris,
't Is merkwaardig, maar bij mij zijn die streepjes met jouw css gewoon te zien, zelfs in Internet Explorer.
Je hebt er toch niet toevallig een zwarte background onder zitten?

Met vriendelijke groet,
CSShunter
____________
PS: het is {white-space: nowrap;} zonder streepje tussen de "no" en de "wrap".

 

[joris345]

haha. lompe fout van me het werkt nu inderdaad wel.
Is het ook nog mogelijk om bij het laatste item geen streepje te hebben?
En bedankt voor de tip!

 

[Naarling]

Dat zou moeten kunnen met
.nav ul li:last-of-type{border:0;}
Al zal dat in IE8 en ouder weer niet werken.
EEn andere oplossing is om dat laatste item een class mee te geven en daarmee de rand weg te halen.

 

[csshunter]

Ja, vele wegen leiden naar Rome!
Ik zou voor de tweede mogelijkheid gaan, om de IE gebruikers te vriend te houden.
Of optie 3, dan is er geen extra class voor de laatste <li> nodig:

• de .nav {padding-right:12px;} tot .nav {margin-right:12px;} maken,
• toevoegen: .nav {overflow:hidden;},
• en dan het laatste bordertje verdonkemanen door de hele <ul> een pixel buitenboord naar rechts te trekken: .nav ul {margin: 0 -1px 0 0;}.

Met vriendelijke groet,
CSShunter

 

[joris345]

Het werkt. Bedankt!