28173 sujets

CSS et mise en forme, CSS3

[résolu] menu horizontal déroulant avec icone (pb alignement icones)

Bonsoir à tous,

Je suis conscient que le sujet que je poste présentement a été abordé plusieurs fois, mais à vrai dire, après plusieurs lectures des sujets du forum et de nombreux essais, je ne suis pas parvenu au résultat attendu. Je vous remercie par avance de la patience relative accordé à ce sujet qui "semble faire doublon", mais le fait-il réellement ...

Contexte :
Je souhaite créer un menu horizontal à partir d'une liste.

Contraintes à prendre en compte :
- l'onglet doit être cliquable sur la totalité de sa surface ;
- chaque élément du menu doit avoir sa propre image.

Voici le résultat que j'obtient sur IE :


upload/10067-resultat1i.png


1er problème

Les images qui remplacent les puces sont totalement à gauche. Voici le code CSS correspondant :


* {
margin : 0;
padding : 0;
}

#listeMenu li {
float : left; /*sur IE, float : left empêche l'affichage de la puce,  */
background-color : white;
width : 200px;
height : 33px;
border: solid 1px black;
text-align : center;
list-style-type:none; /*pas de puce (c'est pour que FF n'affiche pas de puce à cause de IE qui n'en affiche pas)*/
}

#listeMenu a {
display:list-item; /*passe l'élément a en type bloc et permet d'y adjoindre une puce*/

list-style-position: inside;
width : 100%; /*pour que tout l'onglet soit cliquable*/
text-decoration : none;
line-height : 33px; /*pour permettre l'alignement verticale du lien dans l'élément de la liste*/
}


Voici le code html correspondant :

<ul id="listeMenu">
        <li><a style="list-style-image:url('image1.gif')" href="#">Accueil</a></li>
         <li><a style="list-style-image:url('image2.gif')" href="#">Accueil</a></li>
</ul>


Je peux afficher les images de chaque élément de liste contre le texte en supprimant l'attribut css "width : 100%" mais l'onglet n'est alors plus cliquable dans sa totalité.

J'ai tenté de jouer sur la propriété padding et margin à 0, mais là encore, cela n'a rien changé.

2ème problème

Que cela soit avec IE ou FF, l'image n'est pas alignée horizontalement avec le texte. J'ai fait un essai en mettant l'image en tant que background-image et en jouant avec le positionnement, mais du fait que le texte de chaque élément du menu doit être centré et que chacun a une longueur différente, je ne peux pas gérer une position fixe de l'image dans l'onglet.


Merci d'avance pour l'intérêt porté à ce message.
Modifié par manu_css (03 Jun 2007 - 17:05)
Bonjour,

Quelques incohérences dans tes commentaires et dans ton code Smiley cligne
Si j'ai bien compris:
<style type="text/css">
* {
margin : 0;
padding : 0;
}

#listeMenu li {
float : left; 
background-color : white;
width : 200px;
height : 33px;
border: solid 1px black;
text-align : center;
list-style-type:none;
line-height : 33px; /*pour permettre l'alignement verticale du lien dans l'élément de la liste*/
 
}

#listeMenu a {
display: block; 
text-decoration : none;
}

#listeMenu a img{
width: 5px;
height: 5px;
margin-right: 5px;
}

#listeMenu a span{/* si necéssaire ?? */
vertical-align: middle;
}
</style>
</head>
<body>
<ul id="listeMenu">
    <li><a href="#" <img src="image1.jpg" alt="" /><span>Accueil</span></a></li>
    <li><a href="#" <img src="image2.jpg" alt="" /><span>Autre item</span></a></li>
</ul>
</body>
Merci Ghost pour ta proposition de solution (que je retiendrais si je ne réussi pas à faire ce que je veux). J'aurais voulu que tu me précises mes incohérences, une bonne critique permet de progresser.

Sinon, ta solution implique d'insérer une image ne me convient pas. Effectivement, l'image n'a qu'un rôle esthétique. Or, si j'ai bien appris ma leçon sur la séparation du contenu et de la forme, dans mon cas les images ne concernent que la forme. C'est pour cela que je voulais utiliser une image à la place de la puce. Ainsi, dans le cas d'un changement de feuille de style, je peux changer ces images.

Une autre proposition svp ?
Modifié par manu_css (28 May 2007 - 09:23)
Re,

Même chose avec les images en background, un seul problème ce n'est pas trop robuste à l'alignement horizontal en cas d'agrandissement des fonts et peut être un réglage de cet alignement pour avoir la même chose sous IE et FF, enfin encore à gratter quoi ! Smiley cligne 
<style type="text/css">
* {
margin : 0;
padding : 0;
}

#listeMenu li {
float : left; 
background-color : white;
width : 200px;
height : 33px;
border: solid 1px black;
text-align : center;
list-style-type:none;
line-height : 33px; /*pour permettre l'alignement verticale du lien dans l'élément de la liste*/
 
}

#listeMenu a {
display: block; 
text-decoration : none;
width: 100%;/* ------------------- pour IE6 ----*/
font-size: 15px;
}

#listeMenu a span em{
display: block;
width: 10px;
height: 10px;
position: absolute;
left: -15px;
top: 4px;
font-size: 1px;/* ------------------- pour IE6 afin qu'il respecte le height----*/
}

#listeMenu a span{
position: relative;
}

.image1{
background: url(image1.jpg);
}

.image2{
background: url(image2.jpg);
}
</style>
</head>
<body>
<ul id="listeMenu">
        <li><a href="#" ><span><em class="image1"></em>Accueil</span></a></li>
        <li><a href="#" ><span><em class="image2"></em>Autre item</span></a></li>
</ul>
</body>
Merci Ghost pour ta patience et tes conseils. Ta solution fonctionne bien, je l'adopte Smiley ravi .

Une question cependant : pourquoi utiliser la baliser <em> ? Etait-ce la seule solution ?

N'y avait-il donc aucune solution en utilisant une image à la place de chaque puce de la liste ? Si c'est le cas, là dessus, CSS a des lacunes importantes.


Merci encore Ghost pour ton aide.

PS : Je marque ce poste comme résolu dès que j'ai obtenu réponse à mes interrogations. Merci Smiley cligne
Re,

Tu peux le faire "plus classiquement" mais, je ne crois pas que tous les navigateurs (IE) le tolère (on ne peut déclarer qu'une puce pour tout le ul à vérifier)

* {
margin : 0;
padding : 0;
}

#listeMenu li {
float : left;
background-color : white;
width : 200px;
height : 33px;
border: solid 1px black;
text-align : center;
}

#listeMenu a {
display:block
list-style-position: inside;
width : 100%; /*pour que tout l'onglet soit cliquable*/
text-decoration : none;
line-height : 33px; /*pour permettre l'alignement verticale du lien dans l'élément de la liste*/
}
</style>
</head>
<body>
<ul id="listeMenu">

        <li style="list-style-image:url('puce1.jpg')"><a href="#">Accueil</a></li>
         <li style="list-style-image:url('puce2.gif')" ><a href="#">Accueil</a></li>

</ul>
</body>

Le truc c'est que tu avais attribué la class à ton lien et non à li Smiley cligne
Effectivement, cette solution pose quelques problèmes à l'affichage.

En tout cas merci à toi Ghost.
Modifié par manu_css (28 May 2007 - 18:28)
Rebonjour, me voilà de retour avec mon menu horizontal.

En raison de l'évolution du besoin, il m'a fallu abandonner la solution que j'avais retenu (voir messages précédents).

Je dois réaliser un menu déroulant. Pour cela j'ai opté pour la structure html suivante (pour des raisons de simplification, j'ai supprimé les éléments javascript qui n'ont pas d'importance pour mon pb) :

Code HTML adopté :


<div id="menu">

<dl>
       <dt>Menu 1</dt>
               <dd>
                       <ul>
                              <li><a href="#">sous-menu1</a></li>
                              <li><a href="#">sous-menu2</a></li>
                       </ul>
               </dd>
</dl>

</div>


Voici le style CSS correspondant :


* {
margin : 0;
padding : 0;
font-family : verdana, arial;
font-size : 10px;
}

#menu dl {
float: left;
width: 146px;
}

#menu dd {

border: 1px solid gray;
}

#menu li {
list-style-position: inside;
}

#menu a {
display: block;
text-decoration : none;
width: 100%;/* ------------------- pour IE6 ----*/
}


Voilà le résultat :
upload/10067-menu.png

Mon problème :
Comme on peut le constater sur l'image, mes puces de liste ne sont pas alignées avec le lien. Cela provient (si je me trompe, qu'on me le dise) à mon avis du fait que <li> est un élément de type bloc et que je met <a> en élément de type bloc également. J'ai besoin de cela pour qu'au survol du lien, l'intégralité de la largeur du sous menu soit cliquable. J'ai tenté un float : left dans l'élément li du fichier css mais cela ne fonctionne pas, il y a alors un bug d'affichage.

Merci de votre aide.
Modifié par manu_css (30 May 2007 - 18:43)
Je viens de me rendre compte que le pb n'est visible que sous Firefox.


Une idée SVP, je suis vraiment bloqué là. Smiley bawling

Merci
Salut,

Une piste:
		<style type="text/css">
* {
font-family : verdana, arial;
font-size : 10px;
}

#menu dl {
float: left;
width: 146px;
}

#menu dd {
margin: 0;
padding: 0;
border: 1px solid gray;
}

#menu ul {
margin: 0;
padding-left: 15px;
}

#menu a {
display: block;
text-decoration : none;
width: 100%;/* ------------------- pour IE6 ----*/

		</style>
	</head>
	<body>	
<div id="menu">
<dl>
       <dt>Menu 1</dt>
               <dd>
                       <ul>
                              <li><a href="#">sous-menu1</a></li>
                              <li><a href="#">sous-menu2</a></li>
                       </ul>
               </dd>
</dl>
</div>
Et bien, un grand merci à Ghost pour les diverses pistes qu'il m'a indiqué. J'ai réussi à obtenir ce que je voulais : voici un exemple qui fonctionne mais pour lequel le graphisme n'est pas terminé, mais bon ça donne une idée (de toute façon, tout le monde ou presque sait ce qu'est un menu déroulant :

upload/10067-Shot002.png

Rq : Ce menu me permet d'avoir un icône différent pour CHAQUE élément de menu, ce qui n'est pas le cas sur la photo.

Pour les intéressés, voici le code (sans le javascript) correspondant :

Voici un extrait HTML :


<div id="menu" class="">
	<dl>
		<dt>
			<a class="menu" href="" title="page d'accueil">
				<span>	
					<em class="iconeMenu"></em>Accueil
				</span>
			</a>
		</dt>
	</dl>
	<dl>
		<dt>
			<a class="menu" href="" title="" >
				<span>
					<em class="iconeMenu"></em>Prof
				</span>
			</a>
		</dt>
			<dd >
				<ul>
					<li >
						<a class="sousMenu" href="trombinoscope.php" title="Pour associer un visage à un nom.">
							<em class="iconeSousMenu"></em>Trombinoscope
						</a>
					</li>
					<li >
						<a class="sousMenu" href="edt_prof.php" title="Vous souhaitez rencontrer un collègue, consultez son emploi du temps.">
							<em class="iconeSousMenu"></em>Emploi du temps
						</a>
					</li>
				</ul>
			</dd>
	</dl>
</div>


Et voici le CSS correspondant :


#menu {
position : absolute;
z-index :10;
width : 1024px;
background: url('../../../images/front_office_design/menu/barre_menu/fond_barre.jpg');
background-repeat : repeat-x;
}

#menu  *{
font-family : arial;
font-size : 11px;
color : white;
line-height : 32px;

}

#menu dl {
float: left;
width: 142px;
}
/* éléments du menu principal*/
#menu dt {
cursor: pointer;
text-align: center;
/*background: url('../../../images/front_office_design/menu/barre_menu/bouton_off.jpg');*/
/*border: 1px solid black;*/
margin: 0px 0px 0px 5px;
height : 35px;
}

#menu dd {
display: none;
margin: 0;
padding: 0;
}

#menu ul {
margin: 0;
}

#menu a.menu{
background : url('../../../images/front_office_design/menu/barre_menu/bouton_off.jpg');
}

#menu a:hover.menu {
background : url('../../../images/front_office_design/menu/barre_menu/bouton_over.jpg');
}

#menu li {
margin: 0;
list-style-type: none;
background : maroon;
z-index : 10;
}

#menu a {
display : block;
text-decoration : none;
width: 100%;/* ------------------- pour IE6 ----*/
}

#menu li a.sousMenu {
background : black;
position : relative;
left : 0px;
width : 100%;
}

#menu li a:hover.sousMenu {
background : maroon;
}

#menu em {
display: block;
width: 16px;
height: 16px;
position: relative;
left: 0px;
top: 4px;
float : left;
margin-right:3px;
margin-left : 3px;
font-size: 1px;
background : url('../../../images/front_office_design/menu/mini_utilisateur.gif');
}

#menu em.iconeMenu {
background : url('../../../images/front_office_design/menu/mini_ecran.gif');
display: block;
width: 16px;
height: 16px;
position: absolute;
left: -30px;
top: 0px;
font-size: 1px;/* ------------------- pour IE6 afin qu'il respecte le height----*/
}

#menu a.menu span{
position: relative;
}


Encore merci, j'espère que ça pourra servir.
Modifié par manu_css (18 Jun 2007 - 23:16)
Sujet clos
Aller à