Navigatie: kleine CSS review gevraagd.

Door Onbekende gebruiker op 31-10-2013 00:29 gewijzigd op 31-10-2013 01:44

1.577 views

Hallo,

Ik ben bezig met het verbeteren van mijn navigatiebalk, deze heeft op dit moment lijnen tussen de verschillende urls staan- zoals PHPhulp ook heeft. Ik vraag me echter af of, zoals ik het gedaan heb, de juiste manier is.


<div id = "nav">
	<ul>
		<li><a href = "index.php">Home</a></li>
		<li><a href = "http://">Test1</a></li>
		<li><a href = "http://">Test2</a></li>
		<li><a href = "http://">Test3</a></li>
		<li><a href = "contact.php">Contact</a></li>-->
	</ul>
</div>

De CSS:

#nav{
	background: #F4F4F4;
	box-shadow: 0 1px 1px 0px black;
	height: 55px;
	margin-left: 1px;
	width: 100%;
	

}

#nav ul li{
	list-style: none;
	display: inline;
}

#nav ul li a{
	padding: 5px 0;
	width: 100px;
	color: #000;
	float: left;
	text-align: center;
	border-left: 1px solid #cccccc;
	height: 45px;
}

Wouter J

31-10-2013 07:57

Oef, haal die display:inline; weg en ga werken met float:left; om elementen naast elkaar te krijgen. Voor de rest ziet het er goed uit.

Behalve dat je misschien nog dit moet toevoegen om bij het eerste element geen border te krijgen:
[code lang=css]#nav ul li:first-child a{
border-left:none;
}[/code]

Joakim Broden

31-10-2013 10:23

Wouter waarom met float werken? Ik werk zelden met float bij menu items maar ipv inline gebruik ik inline-block. Waarom ik dit gebruik ipv float? Met behulp van display kun je menu items centreren en met float niet, en dit centreren gebruik ik veel voor Responsive op de mobiele versie en bij paginering etc.

Onbekende gebruiker

31-10-2013 11:53 gewijzigd op 31-10-2013 14:01

Wouter J op 31/10/2013 07:57:41

Oef, haal die display:inline; weg en ga werken met float:left; om elementen naast elkaar te krijgen. Voor de rest ziet het er goed uit.

Behalve dat je misschien nog dit moet toevoegen om bij het eerste element geen border te krijgen:
[code lang=css]#nav ul li:first-child a{
border-left:none;
}[/code]

Thanks, ik heb de border veranderd naar border-right, maakt verder geen verschil, en zal last-child toevoegen.

Reageren

Inloggen om te reageren