18041 sujets

Questions générales et questions de débutants

[Résolu] Liste alignée à gauche IE

Pour me premier post je vais faire le gros débutant ! Je cherché avec Google mais je n'ai pas trouvé la réponse, je n'ai certainement pas utilisé les bons mots.

Mon souci : je voudrais aligner une liste à gauche pour quelle soit au même niveau que mon texte.

Ma liste :
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

...

<style type="text/css">
<!--
ul {
  margin: 0;
}
-->
</style>

...

<ul>
  <li> <a href="#">Batterie/Percussions</a></li>
  <li><a href="#">Basse</a></li>
  <li> <a href="#">Guitare</a></li>
  <li> <a href="#">MAO</a></li>
  <li><a href="#">Clavier/Piano</a></li>
  <li><a href="#">Accord&eacute;on chromatique</a></li>
  <li><a href="#">Chant</a></li>
</ul>


J'ai bien ma liste à gauche mais les puces ont disparues sur IE...

Une idée ?
Modifié par yslo (10 Sep 2007 - 01:30)
Bonsoirr et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif

a écrit :
Mon souci : je voudrais aligner une liste à gauche pour quelle soit au même niveau que mon texte.
Pas compris.

a écrit :
J'ai bien ma liste à gauche mais les puces ont disparues sur IE...

C'est normal : en mettant margin:0, tu supprimes l'espace nécessaire à l'affichage des puces.
Les autre navigateurs utilisent un padding-left pour cela.
Modifié par Hermann (09 Sep 2007 - 23:21)
Bonjour, autant pour moi, sorry,

J'ai modifié mon CSS avec tes indications, la FAQ (que je n'avais regardé, mea culpa) et quelques essais... et ça fonctionne sur IE et FF.


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


Ci-joint une capture avant/après.

upload/13998-css01.gif

Encore merci Smiley smile
Modifié par yslo (10 Sep 2007 - 01:32)
Sujet clos
Aller à