Rem: comme dit ailleurs, si ca marche sous IE mais pas sous un moteur Gecko, c'est probablement une erreur d'encodage. IE bug sévèe et fais n'importe quoi, parfois en affichant comme on le veut un code qui ne devrait pas produire ce résultat voulu. Il vaut toujours mieux tester d'abord sous un browser gecko et ensuite regler IE que le contraire...
Bon, si je comprends bien, le problème est dans le rendu du code suivant sous FF et autres gecko:
HTML
<img src="images/souris.jpg" class="image_menu" alt="" />
<div class="menu_gauche">
<ul><li><hr /></li><li><span class="titre_menu">SOURIS</span></li><li><hr /></li>
J'avoue avoir du mal à comprendre la logique de ce bout de code... Es tu sur que c'est l'affichage de l'image qui pose problème?
Je ne connais pas bien le comportement normal des HR mais je me demande si ils n'ont pas un rôle dans ce problème. D'autant que je ne vois pas leur utilité. L'effet de "bordure" qu'il donne peut-être facilement obtenu via le CSS et devrait l'être, puisque c'est du style, pas du contenu.
L'utilisation d'une liste pour contenir deux HR et le titre me semble étrange elle aussi. Et risque de poser problème puisque tu as attribué à style à tes UL et LI pour le menu principal, sans distinction de class ou de id...
A ta place, j'essayerais avec un code plus dans le style:
<div class="catmenu">
<img src="images/souris.jpg" alt="" />
<h2>Souris</h2>
</div>
Mis en page avec
div.catmenu {
background: white;
width: -largeur du truc-;
}
div.catmenu H2 {
border-width: 2px 0;
border-style: solid;
border-color: -code couleur de gris foncé-;
margin: 0;
padding: 0;
font-size: 10px;
font-weight: bold;
Ca devrait donner a peu près le même résultat en plus stable.
Si tu as du contenu (c'est un menu, non?) tu peux normalement l'ajouter sous le H2 dans une liste. Pour atteindre cette liste dans le CSS, le pointeur
div.catmenu UL devrait suffire, pas besoin de lui donner une id ou class propre. idem pour ses élèment (
div.catmenu LI).
Voilà, c'était mon idée...
Edit: autre solution imaginée en relisant mon post:
Tu peux aussi mettre tout ton menu dans une seule liste de définition, qqch comme:
<dl class="catmenu">
<dt>Souris</dt>
<dd class="illus"><img src="..." alt="" /></dd>
<dd>item #1</dd>
<dd>item #2</dd>
</dl>
Puisque la hauteur de ton image t'es connue d'avance, tu peux jongler avec le positionement en CSS pour la faire passer au dessus du DT. Et les bordure du DT donneraotn les lignes horizontales.
Encore un autre code utilisable:
<ul class="catproduct">
<li class="illus"><img src="..." alt="" /></li>
<li class="titre">Souris</li>
<li>item #1</li>
<li>item #2</li>
</ul>
Mais ca me semble moins pratique, parceque ta liste met, d'une certaine manière, sur le même pied les diffèrents élèments qu'elle contient: illustration, titre et "items". Seul ces derniers forement effectivement une "liste de liens".
Just my two cents hein. si quelqu'un a des remarques pertinentes à faire, c'est le bon endroit
Modifié le 19 Dec 2004 - 11:46
