Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» CSS et mise en forme, CSS3
» Menu horizontal
Auteur
KelT
# 21 Mar 2010 - 12:37:49
Citer
58 Posts
 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
http://www.kelt-informatique.fr 
^
Heyoan
# 21 Mar 2010 - 14:04:10
Citer
Modérateur
8101 Posts
 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)
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
KelT
# 21 Mar 2010 - 20:53:43
Citer
58 Posts
 Merci beaucoup, j'ai réussi à faire ce que je voulais smile

http://www.kelt-informatique.fr 
^
KelT
# 21 Mar 2010 - 21:30:39
Citer
58 Posts
 Avec ton code j'arrive à ça :

previews/8634-KelTUL.png

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)
http://www.kelt-informatique.fr 
^
KelT
# 21 Mar 2010 - 21:31:27
Citer
58 Posts
 Décalé à droite, pardon smile

http://www.kelt-informatique.fr 
^
Heyoan
# 21 Mar 2010 - 21:45:27
Citer
Modérateur
8101 Posts
 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.
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
KelT
# 21 Mar 2010 - 21:53:11
Citer
58 Posts
 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 ?
http://www.kelt-informatique.fr 
^
Heyoan
# 21 Mar 2010 - 21:55:46
Citer
Modérateur
8101 Posts
 Ben c'est simplement parce que "Internet" et "Matériel" prennent moins de place en largeur que "Logiciels / Systèmes d'exploitations". langue
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
KelT
# 21 Mar 2010 - 22:00:20
Citer
58 Posts
 oui je me doute mais je ne comprends quand même pas l'espace à gauche de "logiciel / syste..."
http://www.kelt-informatique.fr 
^
Heyoan
# 21 Mar 2010 - 22:06:47
Citer
Modérateur
8101 Posts
 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.
Éléments html, hiérarchie XHTML 1.0 Strict et propriétés CSS
^
darkstar2023
# 21 Mar 2010 - 23:45:31
Citer
307 Posts
 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;}

Graphiste amateur à mes heures perdues.
http://dsofficial.free.fr/public/new_theme3 
^
KelT
# 22 Mar 2010 - 00:15:43
Citer
58 Posts
 ah ouais parfait merci !
http://www.kelt-informatique.fr 
^
Le sujet est clos.
Aller à