Problème affichage liste avec images sous Fir
duddy67
-
duddy67 -
duddy67 -
Bonjour,
J'ai un menu horizontal qui est une liste avec des images
à la place des textes:
#hrzmenu { //div
clear:both;
overflow: hidden;
}
.ulimg {
margin:0 0 0 20px;
padding:0;
}
.liimg {
display:inline;
margin:0;
padding:0;
border:1px solid #000000;
}
<ul class="ulimg">
<li class="liimg"><img src="monimage.gif" /></li>
...
</u>
Mais sous FF les images débordent vers le haut un peu comme
un problème de contexte de formatage. J'ai essayé overflow: hidden;
dans ulimg et liimg mais ça ne fonctionne pas.
Est ce que quelqu'un porrait m'aider ?
Merci.
J'ai un menu horizontal qui est une liste avec des images
à la place des textes:
#hrzmenu { //div
clear:both;
overflow: hidden;
}
.ulimg {
margin:0 0 0 20px;
padding:0;
}
.liimg {
display:inline;
margin:0;
padding:0;
border:1px solid #000000;
}
<ul class="ulimg">
<li class="liimg"><img src="monimage.gif" /></li>
...
</u>
Mais sous FF les images débordent vers le haut un peu comme
un problème de contexte de formatage. J'ai essayé overflow: hidden;
dans ulimg et liimg mais ça ne fonctionne pas.
Est ce que quelqu'un porrait m'aider ?
Merci.
A voir également:
- Problème affichage liste avec images sous Fir
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Liste code ascii - Guide
- Affichage double ecran - Guide
- Des images - Guide
15 réponses
Je suppose que ton image repousse les limites de ton li... essaye de la placée via le css et utilise quelque chose dans le genre :
<ul>
<li><a class="menu1" href="tapage.html" title="Ma page">Ma page</a></li>
[...]
</ul>
a.menu1 { display:block; text-indent:-9999px; width:[width de ton image]; height:[height de ton image]; background:url(image/imageMenu1.jpg) 0 0 no-repeat; }
<ul>
<li><a class="menu1" href="tapage.html" title="Ma page">Ma page</a></li>
[...]
</ul>
a.menu1 { display:block; text-indent:-9999px; width:[width de ton image]; height:[height de ton image]; background:url(image/imageMenu1.jpg) 0 0 no-repeat; }
Merci pour ta soluce ;-)
Malheureusement ça ne convient pas à ma problématique.
1) Il n'y a pas du tout de texte dans mes <li>. J'ai bien
compris que tu les cachais avec: text-indent:-9999px, mais ça
ne change rien à mon pb.
2) Tu mets l'image en background: background:url(image/imageMenu1.jpg),
et là non plus ça va pas car mon menu utilise une image pour chaque lien
du menu (une image accueil.gif, liens.gif etc...) donc en background ça
marchera pas.
Note: Je précise que sous IE8 tout fonctionne bien, c'est FF qui fait des histoires.
Quelqu'un aurait une idée ?
Malheureusement ça ne convient pas à ma problématique.
1) Il n'y a pas du tout de texte dans mes <li>. J'ai bien
compris que tu les cachais avec: text-indent:-9999px, mais ça
ne change rien à mon pb.
2) Tu mets l'image en background: background:url(image/imageMenu1.jpg),
et là non plus ça va pas car mon menu utilise une image pour chaque lien
du menu (une image accueil.gif, liens.gif etc...) donc en background ça
marchera pas.
Note: Je précise que sous IE8 tout fonctionne bien, c'est FF qui fait des histoires.
Quelqu'un aurait une idée ?
Je ne vois pas pourquoi ça ne fonctionnerais pas... le principe est juste d'afficher l'image comme étant un lien et non une image dans un lien... le fait de mettre du texte est juste un plus pour l'accessibilité, il n'est pas visible car remplacé par ton image. C'est plus "propre" que de mettre une image qui n'a aucun sens pour un navigateur vocal par exemple.
Et pour ce qui est de plusieurs images... tu dois juste créer autant de classe que de liens. Rien de bien méchant si tu fais ça proprement.
A part ça, aurais-tu un lien ou screnshot de ton site pour "voir" le problème ?
Merci !
Et pour ce qui est de plusieurs images... tu dois juste créer autant de classe que de liens. Rien de bien méchant si tu fais ça proprement.
A part ça, aurais-tu un lien ou screnshot de ton site pour "voir" le problème ?
Merci !
Oui je vois ce que tu veux dire, toutefois:
Pour l'accessibilité c'est pas trop grave, si la balise alt de l'image
est bien renseignée c'est suffisant.
Pour ce qui est de créer autant de classes qu'il y a de liens ce n'est pas
une bonne solution pour moi car le site est fait avec un CMS qui génère
les liens dans des boucles etc... et je n'ai pas trop envie de hacker
le code ;-)
C'est pour ça que j'en reste à mon histoire d'images à la place de texte dans la liste.
Une idée ?
Pour l'accessibilité c'est pas trop grave, si la balise alt de l'image
est bien renseignée c'est suffisant.
Pour ce qui est de créer autant de classes qu'il y a de liens ce n'est pas
une bonne solution pour moi car le site est fait avec un CMS qui génère
les liens dans des boucles etc... et je n'ai pas trop envie de hacker
le code ;-)
C'est pour ça que j'en reste à mon histoire d'images à la place de texte dans la liste.
Une idée ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
L'overflow:hidden n'a pas d'effet, par contre en mettant la hauteur fixe dans .ulimg les images
se remettent en place mais la bordure autour ne s'affiche qu'à moitié.
Donc il reste encore ce pb mais je vois pas d'où ça peut venir.
se remettent en place mais la bordure autour ne s'affiche qu'à moitié.
Donc il reste encore ce pb mais je vois pas d'où ça peut venir.
Essaye d'enlever la bordure au liimg et de la mettre sur les images... avec un margin-top:-1px; peut-être...
Je viens de trouver une soluce mais je suis un peu perplexe.
En fait j'ai mis un float:left; dans liimg et apparemment ça marche.
J'ai souligné tout ce que j'ai rajouté :
.ulimg {
margin:0 0 0 20px;
padding:0;
overflow: hidden; /* <--- */
height: 22px; /* <--- */
}
.liimg {
display:inline;
float: left; /* <--- */
margin:0;
padding0;
border:1px solid #000000;
}
Qu'en penses tu ?
En fait j'ai mis un float:left; dans liimg et apparemment ça marche.
J'ai souligné tout ce que j'ai rajouté :
.ulimg {
margin:0 0 0 20px;
padding:0;
overflow: hidden; /* <--- */
height: 22px; /* <--- */
}
.liimg {
display:inline;
float: left; /* <--- */
margin:0;
padding0;
border:1px solid #000000;
}
Qu'en penses tu ?
J'ai essayé aussi le float left... et il n'est pas vraiment utile... as-tu essayé avec ce que je t'ai proposé ? Sous Firebug ça résout ton problème...
Oui, le margin-top:-1px; et la bordure sur l'image contourne le pb et fonctionne,
mais chez moi le float left fonctionne aussi.
Ça donne quoi sur Firebug ?
mais chez moi le float left fonctionne aussi.
Ça donne quoi sur Firebug ?