28172 sujets

CSS et mise en forme, CSS3

Puce sur la dernière ligne d'un item de liste ????

Salut à toutes et tous,

Mon problème ne concerne que IE7, et paraît si simple que je serais étonné qu'il n'ait pas déjà été abordé ici — mais j'ai (bien ?) cherché et je n'ai pas trouvé la réponse Smiley decu

Dans un calque "textes" de 778 px de largeur, j'ai 3 listes qui doivent toutes faire 444 px de largeur (afin que les textes soient alignés).
La 2ème liste a une image de fond, qui doit être alignée tout à droite par rapport au calque "textes". Pour ce faire, je donne la largeur de "textes" à cette liste. Et pour aligner le texte avec les autres listes, je donne à la balise li de cette 2ème liste la largeur de 444px — Et là, rien ne va plus sous IE7, il me met les puces de cette 2ème liste sur la dernière ligne des items Smiley fache
Uniquement à cause de cette largeur !? Si je l'ôte, les puces sont placées normalement (sur la 1ère ligne).
Mais j'ai besoin de cette largeur, à la fois pour aligner l'image de fond tout à droite du calque "textes", et aligner les textes de toutes les listes.

Un peu de code, si ce n'est pas clair…

<div id="textes">
<ul id="publications">
<li><span>ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1<br />
ligne B</span></li>
<li><span>ligne 2<br />
ligne B</span></li>
<li><span>ligne 3</span></li>
</ul>

<ul id="travaux_recherche">
<li><span>ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1 ligne 1<br />
ligne B</span></li>
<li><span>ligne 2<br />
ligne B</span></li>
<li><span>ligne 3<br />
ligne B</span></li>
</ul>

<ul id="communication">
<li><span>ligne 1<br />
ligne B</span></li>
<li><span>ligne 2<br />
ligne B</span></li>
<li><span>ligne 3</span></li>
</ul>
</div>

Et le css…

#textes {
	position:relative;
	clear:both;
	top:-5px;
	left:49px;
	font-size:90%;
	background-image:url(../images/trait_vertical.JPG);
	background-repeat:repeat-y;
	width:778px
}
#textes ul {
	margin:20px 0 0 50px;
	padding-bottom:28px;
	list-style-type:square;
	color:#5C7C95;
	padding:0 0 0 15px;
	line-height:140%;
}
#textes li {
	margin-bottom:10px;
	width:auto
}
#textes li span {
	color:black;
}
#publications ,#communication {
	width:444px;
}
#travaux_recherche {
	width:778px;
	background-image:url(../images/chromosomes.png);
	background-repeat:no-repeat;
	background-position:right top;
}
#travaux_recherche li {
	width:444px
}


Une aide, s'il-vous-plaît…
Merci !
Modifié par supunna (18 Dec 2008 - 13:12)
Bonjour

Tu as oublié de rajouter ; à plusieurs valeurs Smiley cligne
Tu n'aurais pas une URL à nous envoyer pour y voir plus clair avec tout le contenu image ?
Bonjour,

Pas constaté ce problème avec IE6 ou IE7. Le seul problème observé est une fusion des marges qui ne se fait pas, sans doute à cause du hasLayout.
(Faire une recherche sur ces deux notions si elles ne sont pas connues: fusion des marges, haslayout.)

Deux remarques générales:

1. D'une manière générale, on utiliser la propriété width aussi peu que possible. Un élément de type bloc est en width: auto par défaut et prend toute la largeur de son conteneur. Il suffit généralement de marges ou de padding pour créer des retraits à gauche ou à droite d'un bloc. On ne précisera la largeur du bloc que lorsqu'il doit être passé en float: left|right, par exemple.

2. Une image de fond en PNG de 150 ko? Je crois qu'il va falloir se renseigner sur l'optimisation des images! Pour cette image, du JPEG serait bien plus adapté.
Sujet clos
Aller à