Menu horizontal

Bonjour à tous,

Je suis novice concernant les menus, j'ai essayé de faire un menu avec <ul> et <li>
Seulement j'ai deux problèmes : sous ie il me laisse de points assez étranges des balises <li> :

http://img406.imageshack.us/img406/6963/capturega.png

Et surtout comme vous pouvez le voir, je n'ai pas réussi à mettre les 3 catégories côte à côte.

Voici le code :

<ul id="internet">
<li><a id="prem2" href="index.html#internet">Internet</a></li><br /> <li><img src="img/fleching.gif" alt="=>" /> <a id="deu2" href="accueil g4-optimiser.html#pr">Protéger et optimiser votre PC</a></li><br /> <li><img src="img/fleching.gif" alt="=>" /> <a id="deu2" href="accueil g4-html.html#html">Le langage HTML</a></li> <li><img src="img/fleching.gif" alt="=>" /> <a id="deu2" href="accueil g4-css.html#css">Le langage CSS</a></li><br /> <li><img src="img/fleching.gif" alt="=>" /> <a id="deu2" href="accueil g4-hebergements.html#heb">Hébergements</a></li>
</ul>
<ul id="logiciels">
<li><a id="prem2" href="index.html#logi">Logiciels / Systèmes d'exploitations</a></li><br /> <li><img src="img/fleching.gif" alt="=>" /> <a id="deu2" href="accueil g4-machines virtuelles.html#mach">Machines virtuelles</a></li><br /> <li><img src="img/fleching.gif" alt="=>" /> <a id="deu2" href="accueil g4-ini linux.html#ilinux">Initiation sous Linux</a></li> <li><img src="img/fleching.gif" alt="=>" /> <a id="deu2" href="accueil g4-console linux.html#clinux">Console sous Linux</a></li><br /> <li><img src="img/fleching.gif" alt="=>" /> <a id="deu2" href="accueil g4-msdos.html#msdos">Invite de commande MS-DOS</a></li>
</ul>
<ul id="materiels">
<li><a id="prem2" href="index.html#mat">Matériels / Composants</a></li><br /> <li><img src="img/fleching.gif" alt="=>" /> <a id="deu2" href="accueil g4-cg.html#cg">Carte graphique (en cours de création)</a></li>
</ul>

et css :

#internet li
{
	display: block;
}
#logiciels li
{
	display: block;
}
#materiels li
{
	display: block;
}

Merci de m'éclairer

Salut,

il existe un tuto sur les menus très complet.

Ensuite quelques remarques :
* l'élément UL n'accepte que le LI comme élément enfant donc tu ne peux pas mettre de BR entre les LI. C'est d'ailleurs inutile puisque ce dernier a déjà un rendu de type bloc par défaut.
* quand plusieurs éléments ont la même présentation c'est tout l'intérêt des css de simplifier la mise en forme : on peut donc mettre l'image de flèche en background css et il est inutile de donner des ids ou des classes à chaque élément.

Un exemple :

#menu {
	width: 960px;
	margin: 0 auto;
}

#menu div {
	float: left;
	width: 320px;
}

#menu p a {
	background-image: url("img/accueil/fond ciel titre haut de page.png"); 
	border: 3px solid black;
}

#menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#menu li {
	padding-left: 25px;
	margin-bottom: 5px;
	background: url(img/fleching.gif) top left no-repeat;
}

<div id="menu">
	<div>
		<p><a href="#">Internet</a></p>
		<ul>
			<li><a href="#">Protéger et optimiser votre PC</a></li>
			<li><a href="#">Machines virtuelles</a></li>
			<li><a href="#">Carte graphique<br />(en cours de création)</a></li>
		</ul>
	</div>
	<div>
		<p><a href="#">Logiciels / Systèmes d'exploitations</a></p>
		<ul>
			<li><a href="#">Protéger et optimiser votre PC</a></li>
			<li><a href="#">Machines virtuelles</a></li>
			<li><a href="#">Carte graphique<br />(en cours de création)</a></li>
		</ul>
	</div>
	<div>
		<p><a href="#">Matériels / Composants</a></p>
		<ul>
			<li><a href="#">Protéger et optimiser votre PC</a></li>
			<li><a href="#">Machines virtuelles</a></li>
			<li><a href="#">Carte graphique<br />(en cours de création)</a></li>
		</ul>
	</div>
</div>

Modifié par Heyoan (21 Mar 2010 - 14:40)

Merci beaucoup, j'ai réussi à faire ce que je voulais

Avec ton code j'arrive à ça :



Comment faire pour décaler légèrement à gauche la catégorie "Matériels/composants" ?


<modéré par Heyoan : merci de générer un aperçu quand les images sont trop grandes />
Modifié par Heyoan (21 Mar 2010 - 21:40)

Décalé à droite, pardon

Eh bien comme tu l'as remarqué les 3 éléments DIV sont flottants pour se placer les uns à côté des autres et ont une largeur égale au tiers de celle de #menu. Donc tu pourrais par exemple augmenter la largeur de #menu et celle des div.

A voir en complément : Guide de survie du positionnement CSS.

En fait je comprends pas pourquoi l'espace entre "internet" et "logiciel / systeme..." est plus grand qu'entre "logiciel / systeme..." et "matériel". Dans le code rien n'indique cela ?

Ben c'est simplement parce que "Internet" et "Matériel" prennent moins de place en largeur que "Logiciels / Systèmes d'exploitations".

oui je me doute mais je ne comprends quand même pas l'espace à gauche de "logiciel / syste..."

Les bords gauches sont tous les 3 au dessus des flèches... je t'invite à utiliser l'extension Firebug de Firefox en mode inspection pour mieux voir.

Bah comme on te l'a dit, les trous colonnes de liste sont de même largeur avec des titres de longueur très différentes.

Pour remédier à ça, soit il faut trouver un titre plus court, soit faire des colonnes de largeur différentes...

Ou décaler ponctuellement la colonne du milieu :

#colonne-du-milieu{position:relative;right:15px;}

ah ouais parfait merci !