28217 sujets

CSS et mise en forme, CSS3

[résolu] Insertion d'images dans un menu liste

Je ne sais pas si c'est possible mais je demande quand même.

En fait, je voudrais insérer des images différentes devant chacun des items d'un menu liste horizontal.

Mes images font 20x20 px.

Le code que j'utilise est le suivant


      <div id="haut">
        <ul id="menuhaut">
          <img src="img.gif" /><li><a href="#">ACCUEIL</a></li>
          <img src="img.gif" /><li><a href="#">LE BLOG MAG</a></li>
          <img src="img.gif" /><li><a href="">LES SORTIES A PARIS</a></li>
          <img src="img.gif" /><li><a href="#">ESPACE MEMBRE</a></li>
	  <img src="img.gif" /><li><a href="#">LES CARTES</a></li>
        </ul>
      </div>


#haut {
	background-color:#000000;
	vertical-align: text-top;
}
#menuhaut {
list-style-type: none;
margin-left: 5px;
margin: 0;
padding:0;
}
#menuhaut li {
	display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #FFFFFF;
text-decoration: none;
}
#menuhaut a:hover {
text-decoration: underline;
}


Malheureusement ce code crée un décalage du texte vers le bas. La boite qui contient le tout dépasse de qq pixels sous les images. C'est pas clean quoi.

qq'un aurait-il une idée sur le petit truc CSS à faire figurer le code pour bien caler tout ça.

Merci de votre aide
Modifié par Jojo (18 Jul 2005 - 11:04)
Administrateur
Salut,

Si tes images sont uniquement décoratives (= elles n'apportent aucun contenu pertinent), il est préférable d'employer les arrières-plans.

Voici un menu conçu ainsi :
http://css.alsacreations.com/modelesmenus/p1.htm

Autre chose : ton code comporte une erreur de taille : l'élément <ul> ne peut contenir directement que des éléments <li>. Or chez toi, il contient des balises <img>. Il faudrait à la rigueur que tes images soient inclues dans les <li> pour que cela soit valide.
Modifié par Raphael (14 Jul 2005 - 23:48)
Malheureusement mes images ne sont pas que décoratives.
Malgré tout merci pour ce lien vers un menu qui pourrait finalement me servir si je ne trouve pas de solution.

Merci également sur ta remarque sur le fait d'inclure les IMG à l'intérieur des tags <li>.

En fait, ma question est plus une question concernant Le XHTML que le CSS. Enfin je pense. A mon avis, il n'y a pas de moyen CSS pour faire en sorte qu'il n'y ai pas de décalage dans un menu liste horizontal à l'intérieur duquel on veut insérer des images.

Mais si qq'un a encore une idée, je suis preneur.

Merci
Administrateur
Jojo a écrit :
En fait, ma question est plus une question concernant Le XHTML que le CSS. Enfin je pense. A mon avis, il n'y a pas de moyen CSS pour faire en sorte qu'il n'y ai pas de décalage dans un menu liste horizontal à l'intérieur duquel on veut insérer des images.

Tout ce qui a trait à la mise en page passe obligatoirement par les CSS.
(X)HTML ne constitue que la structure (balisage et contenu).

Pour tes décalages, l'origine peut venir de plusieurs choses (vertical-align, taille de police, de l'interligne, des marges, des paddings par défaut, etc.)

As-tu pensé à suivre la Méthodologie pour résoudre les problèmes d'affichage ?
Modifié par Raphael (15 Jul 2005 - 15:17)
On peut dire qu'il est résolu.
Avec un vertical-align: text-top; dans la boite qui contient le menu liste et les images (à l'intérieur des <li>), c'est pas forcément super joli mais ça fonctionne tout de même assez bien.

J'en profite aussi pour dire, que j'ai découvert (personne n'est parfait) que les normes W3C n'acceptent pas les border="0" à l'intérieur des images linkées. J'ai donc aussi utilisé les css pour déclarer un
img {
border: 0;
}
général sur toute la page pour que mon code soit conforme aussi à ce niveau là.

C'est rigolo le respect des normes et l'accessibilité, mais quand on a commencé l'intégration HTML old school il y a quelques années, on se fait bien mal à la tête. Merci pour votre site qui nous aide beaucoup.
Sujet clos
Aller à