Horizontaal menu met <ul>-tag

Door Lasse op 28-09-2006 21:47

1.993 views

Ik ben voor mijn site een menu aan het maken.
Het wordt een horizontaal menu en is opgebouwd via een lijst.
Zoiets:


<ul id="menu">
<li><a href="#">home</a></li>
<li><a href="#">nieuws</a></li>
<li><a href="#">info</a></li>
<li><a href="#">blaat</a></li>
</ul>

Het probleem is dat een <li>-tag een block-tag is.
Daardoor zullen alle items onder elkaar staan en krijg je dus een verticaal menu.
Daar heb ik 2 oplossingen voor gevonden:

1. De li-tags de style display: inline; meegeven
2. De li-tags de style float: left; meegeven.

Bij 1 heb ik het probleem dat ik de <a>-tag die er in genest zit niet display: block kan meegeven (zodat ik width en height kan gebruiken in de <a>-tag) omdat de li-tag dan ook weer een blockelement wordt.

Bij 2 is het probleem dat het menu links komt te staan, en ik wil hem gecentreerd hebben.

Ik hoop dat jullie dit verhaal een beetje kunnen volgen (ik weet dat ik soms onduidelijk kan schrijven;-))
Weet iemand hier een oplossing voor?

Frank -

28-09-2006 22:12

Hier een url naar een uitgebreide beschrijving voor het maken van fraaie tabs voor de navigatiestructuur. Dat heb je misschien niet nodig, maar de basis om de boel netjes naast elkaar te zetten wordt ook besproken.

Succes!

Lasse

28-09-2006 22:53

Tja, hier gebruiken ze de door mij beschreven manier 2.
Bij hun is dat geen probleem, want zij centreren het menu niet. Maar dat wil ik dus wel.

Frank -

28-09-2006 23:18

Wat heeft het menu, de <ul>, te maken met de <li> ? Het lijkt mij dat wanneer je de complete navigatie wilt centreren, je moet zorgen dat de <ul> wordt gecentreerd. Je kunt daarvoor bv. 'menu' gaan centreren. Of begrijp ik je verkeerd?

Lasse

29-09-2006 08:37

Tja, daar heb je wel gelijk in, en dat heb ik ook geprobeerd, maar ik krijg hem niet gecentreerd:(
B.v. deze code http://www.allesoverelektronica.nl/menu_test.html
Dit krijg ik echt met geen mogenlijkheid gecentreerd, maar zoals je ziet staat er wel text-align: center;

Joren de Wit

29-09-2006 11:11

Dat komt doordat je 'float: left' hebt gebruikt voor je list items. Zo werkt het wel:


<html>
<head>

<style type="text/css">
*
{
	padding: 0px;
	margin: 0px;
}
#menu
{
	width: 500px;
	margin: 5px auto;
	border: solid 2px #FF0000;
	text-align: center;
}
#menu li
{
	padding: 0px 5px 0px 5px;
	list-style-type: none;
	display: inline;
}

</style>

</head>
<body>

<div id="menu">
<ul>
	<li><a href="#">test1</a></li>
	<li><a href="#">test2</a></li>
	<li><a href="#">test3</a></li>
	<li><a href="#">test4</a></li>
	<li><a href="#">test5</a></li>
	<li><a href="#">test6</a></li>
</ul>
</div>
	
</body>
</html>

Kalle P

29-09-2006 12:08

voor centreren van je menu:

[code]
body{
padding: 0px;
margin: 0px;
text-align:center;
}
#menu{
text-align:right; /* uitlijning terugzetten (default == right)*/
margin: 0 auto;
}

Lasse

29-09-2006 16:55

@blanche:
Zoals ik in mijn beginbericht al zei heb ik dan een ander probleem (zie mijn beginpost)

@kalle: Ik lijk het toch nog niet helemaal te begrijpen.
Hier zie je wat ik nu heb.
Is niet gecentreerd zoals je ziet. (getest in MSIE en FF)
[edit]typ0[/edit]

Jesper Diovo

29-09-2006 17:02

Maar er moeten per sé die stipjes voor staan, of niet? Want anders kan je ook td's gebruiken ipv ul en li

Lasse

29-09-2006 17:08

Ja, dat klopt die stipjes hoeven er ook niet te staan (die heb ik ook uitgezet), maar als je dit artikel leest zal je misschien wel begrijpen waarom ik dat doe.

Jesper Diovo

29-09-2006 17:15

Dus met dat bericht wil je zeggen dat het beter is om divs te gebruiken? Oké, dan gebruiken we divs. :P

Misschien moet je dit eens bekijken:

<div id="menu" style="POSITION: absolute; LEFT: 50%">

Of 50% juist is, mag jij beslissen :p

Bij mij schuift hij iig op ;)

Reageren

Inloggen om te reageren