Menu horizontal

Je cherche à creer un menu horizontal simple à base de <ul> et de <li>. J'ai suivi un tutoriel quelconque sur internet pour le faire:
http://pcbelair.free.fr/elec4e/resistance.htm
Le problème est que lorsque je redimensionne la fenêtre les items du menu se superposent alors que je souhaiterais qu'ils restent fixes et q'u'un ascenseur vertical, dans ce cas, s'installe.

Voici: la partie du code de la page concernant le menu horizontal:

<div class="entete">
	<p>

<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="308" height="114">
	<param name="movie" value="../../pcbelair.swf">
	<param name="quality" value="High">
	<embed src="../pcbelair.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="308" height="114"></object>
</p>
	<ul class="entete">
	<li class="entete"><a class="entete" href="../../troisieme.htm">TROISIEME</a></li>
	<li class="entete"><a class="entete" href="../../quatrieme.htm">QUATRIEME</a></li>
	<li class="entete"><a class="entete" href="../../cinquieme.htm">CINQUIEME</a></li>
	<li class="entete"><a class="entete" href="../../divers.htm">DIVERS</a></li>
	<li class="entete"><a class="entete" href="../../contact.htm">CONTACT</a></li>
	<li class="entete"><a class="entete" href="../../ficheExo.htm">FICHE EXO</a></li>
	<li class="entete"><a class="entete" href="../../sectionProf.htm">section prof</a></li>
	</ul>
</div>

et la partie concernant le code css du menu d'entete:

/*STYLE DE L ENTETE*/
*/-----------------*/
div.entete{
	background-color=#041943; 
	color:white;
	width=100%; 
	height=150px; 
	position: absolute; top=0px; left=0px;
}
ul.entete{
	position:absolute; right:300px;top:30px;
}
li.entete{
	display:inline;
	border:solid 1px white;
	padding:5px 10px 5px 10px;
	margin:0px;	
}
a.entete:link{color:white;text-decoration:none}
a.entete:hover{background-color:blue; color:white;}
a.entete:visited{color:white;text-decoration:none}

Je vous remercie d'avance de me venir en aide.
pcbelair.
Modifié par Florent V. (20 Apr 2008 - 23:07)

Personne pour me répondre?

Note de modération: j'ai fait un peu de ménage dans ce sujet en supprimant quelques messages hors-sujet postés suite à une petite méprise.

Pour la question posée elle-même: il serait plus simple d'éviter que les items du menu ne se superposent. Cela peut se faire en jouant sur le line-height de l'élément ul du menu, ou en utilisant des li flottants (float: left) plutôt qu'en display: inline).

Mais avant ça:
1. rajouter un Doctype en bonne et due forme à la page (indispensable);
2. simplifier un peu le code HTML (pas indispensable mais toujours utile).

Pour ce dernier point, tu as le code suivant:

<div class="entete">
	<p></p>
	<ul class="entete">
		<li class="entete"><a class="entete">...</a></li>
		<li class="entete"><a class="entete">...</a></li>
	</ul>
</div>

Je ne les ai pas toutes mises mais tu as en tout 16 utilisations de la classe «entete». Je te propose de tomber à... zéro.

<div id="entete">
	<p></p>
	<ul>
		<li><a>...</a></li>
		<li><a>...</a></li>
	</ul>
</div>

Et côté CSS, on utiliser le sélecteur de descendants (l'espace) pour parvenir à viser facilement les bons éléments:

div#entete {...}
div#entete p {...}
div#entete ul {...}
div#entete ul li {...}
div#entete ul li a {...}

Et voilà.
Modifié par Florent V. (20 Apr 2008 - 23:07)

Merci beaucoup pour ces quelques indications.
Effectivement le code est grandement simplifié et la mise ne oeuvre également.
Je devrais ganger pas mal de temps...
Merci encore,
pcbelair