28172 sujets

CSS et mise en forme, CSS3

Liste et image alignée sous IE9

Salut à toutes et tous,

Je rencontre un problème idiot avec IE9… Je dis bien IE9 seulement, car tout est OK avec les autres navigateurs.
Je voudrais simplement aligner une liste numérotée ol et une image… Mais les puces de ma liste se placent avant l'image Smiley eek
À voir ci-dessous entourées en rouge :
upload/15387-test.png

Voici mon code :
img {
	float:left;
	padding:0 30px 0 0;
}
ol#rencontre {
	padding-left:19px;
}


<body>
<img src="../images/main_web1.JPG">
<ol id="rencontre">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, nisl et semper aliquet, eros tortor dapibus nisi, vel suscipit nibh purus in nunc. Integer pellentesque ipsum eget metus rutrum :
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, nisl et semper aliquet, eros tortor dapibus nisi, vel suscipit nibh purus in nunc. Integer pellentesque ipsum eget metus rutrum et fringilla arcu auctor. Nunc massa nunc.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, nisl et semper aliquet, eros tortor dapibus nisi, vel suscipit nibh purus in nunc. Integer pellentesque ipsum eget metus rutrum et fringilla arcu auctor. Nunc massa nunc.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque faucibus, nisl et semper aliquet, eros tortor dapibus nisi, vel suscipit nibh purus in nunc. Integer pellentesque ipsum eget metus rutrum et fringilla arcu auctor. Nunc massa nunc.</li>
</ol>
</body>


Le lien de l'exemple
Merci pour votre aide !
Modifié par supunna (13 Nov 2011 - 02:09)
Bonsoir,

Bizarre bizarre ce comportement... impossible pour moi de l'expliquer mais j'ai trouvé deux solutions pour le palier, chacune souffrant d'un défaut :

1) Faire flotter non seulement l'image, mais aussi la liste <ol>. Cela implique par contre de donner une largeur à cette dernière pour éviter qu'elle ne s'affiche en-dessous de l'image.
Inconveignant : la liste ne "découle" plus autour de l'image, on obtient deux colonnes adjacentes.

#rencontre {
	width: 500px;
	float: left;
}


2) Ajouter la déclaration list-style-position: inside; à la liste <ol>.
Inconveignant : comme la valeur de cette déclaration l'indique, les puces (ou plutôt les numéros) se retrouvent insérées dans le texte et sont du coup moins discernables.

#rencontre {
	list-style-position: inside;
}
jeremy-p a écrit :
impossible pour moi de l'expliquer


Les marges par défaut suivant les navigateurs non ?
Modifié par jmlapam (13 Nov 2011 - 04:08)
jmlapam a écrit :


Les marges par défaut suivant les navigateurs non ?


Non, en mettant toutes les marges à zéro, le problème reste Smiley ohwell
Bon, je n'ai pas trouvé de solution entièrement satisfaisante, mais je me suis approché du but… En fait, il ne manque que le petit point que l'on trouve après le chiffre dans une liste numérotée : 1. Dommage… Smiley ohwell
J'ai utilisé les propriétés CSS li:before, et le couple content: counter et counter-increment qui insère des compteurs automatiques.

img {
	float:left;
	padding:0 30px 0 0;
}
ol {
	counter-reset: reunion;/* on initialise et nomme un compteur */
	padding-left:19px;
} 
li {
	list-style-type: none;
	counter-increment: reunion; /* on incrémente le compteur à chaque nouveau li */
}
li:before {
	content: counter(reunion); /* on affiche le compteur */
	padding: 0;
	margin: 0 8px 0 -17px;
	vertical-align: top;
	font-weight: bold;
}
Sujet clos
Aller à