Probleme de listes avec des div et span

bonsoir,

je n'arrive pas a faire un mise en forme a base de liste,

j'ai fait un petit dessin pour montrer ce que je recherche a faire.




j'aimerais avoir un titre avec en face une description, la description peut avoir 2 lignes le titre peut etre plus court en longueur que les autres mais le texte s'adapte ...

je n'ai que des retour a la ligne ou des escaliers ...

merci de votre aide !

mims1664 a écrit :
bonsoir,

je n'arrive pas a faire un mise en forme a base de liste,

j'ai fait un petit dessin pour montrer ce que je recherche a faire.

upload/14472-li.png


j'aimerais avoir un titre avec en face une description, la description peut avoir 2 lignes le titre peut etre plus court en longueur que les autres mais le texte s'adapte ...

je n'ai que des retour a la ligne ou des escaliers ...

merci de votre aide !

Tu peux gérer ça avec une div ou un span, il te suffit de faire quelquechose comme cela en html:

<ul>
<li>Le titre: <div>J'ai ici une div positionnée à la suite de mon titre décalé d'un espace.</div></li>
<li>Le titre:<div></div>J'ai ici une div positionée à la suite de mon titre sans décalage.</li>
<li>Le titre: <span>J'ai ici un span qui aura le même effet, pour cela il ne faut pas oublier de le changer son affichage en "block"</span></li>
</ul>

Avec ca, tu insère un code dans le genre pour ton css:

li div {
  float: left;
  width: 140px; 
}
li span {
  display: block;
  float: left;
  width: 140px;
}

(Si je ne m'abuse, il n'est pas nécessaire de préciser la valeur float).

Comment l'élément qui suivra ton titre sera de type block, il s'affichera sous forme d'un bloc, pour éviter qu'il y ait un retour à la ligne, il est impératif que tu spécifie une largeur, sinon ton bloc sera à la ligne suivante pour profiter de toute la place disponible.

Ha .... on est obligé de spécifier une taille du block ! je me disais bien qu'il y avait quelque chose !

ca va pas aller je ne peux pas spécifier la taille du span car il dépendra de la longueur du titre, il peut varier de quelques caractère à chaque fois ...

Hello,

Bon, je propose qu'on parte plutôt sur une vraie solution qui marche.

<ul id="test">
	<li>
		<span class="first">Bla bla</span>
		<span class="second">Du texte qui peut être long ou pas.</span>
	</li>
</ul><!-- #test -->

#test {
	margin: 10px 0;
	padding: 0;
	list-style: none;
}
#test li {
	width: 100%; /* nécessaire pour IE6 pour empêcher le dépassement des flottants */
	overflow: hidden;
}
#test li .first {
	float: left;
	max-width: 40%;
	margin-right: 15px;
	background: #faa;
}
#test li .second {
	display: block;
	zoom: 1; /* HasLayout: dans l'idéal, à adresser à IE6 uniquement, via un commentaire conditionnel */
	overflow: hidden; /* contexte de formatage pour que l'élément soit repoussé par le flottant */
	background: #aaf;
}

Et voilà.

Pour le concept de HasLayout et les commentaires conditionnels, voir la FAQ du forum. Pour le concept de contexte de formatage (et un exemple de son utilisation), voir du côté du tutoriel pour un design fluide en trois colonnes.

Merci Florent V exactement ce que je cherchais a faire !!! dis donc comme ton avatar l'indique tu est un magicien du css !!!

encore merci