28211 sujets

CSS et mise en forme, CSS3

Liste avec image et texte a coté de chaque image [Résolu]

Bonjour,

J'ai une liste de lien et pour chaque li je dois avoir une image et un texte. Chaque image doit floter a gauche du texte respectif mais pour chaque li j'aimerai que les image s'aligne du coté droit pour ne pas avoir de décalage entre les images puisqu'elles sont de taille différentes. Comment faire ? avec des tableaux c'est fait en 10 secondes Smiley bawling Smiley lol
Modifié par Parmenioneyes (07 Sep 2006 - 00:58)
Bonsoir,

j'ai du mal a comprendre ce que tu souhaites...

Tu peux faire flotter tes images a droite , dans le <li>, en leurs attribuant float: right en css, mais tu dois placer les images avant les liens dans le code html:

html

<ul class="toto">
<li><img src="" alt="" /><a href="#" title="">ton lien</a></li>
</ul>


css

ul.toto img {float: right;}

Modifié par Hum (05 Sep 2006 - 22:56)
Hum a écrit :
Bonsoir,

j'ai du mal a comprendre ce que tu souhaites...

Tu peux faire flotter tes images a droite , dans le <li>, en leurs attribuant float: right en css, mais tu dois placer les images avant les liens dans le code html:

html

<ul class="toto">
<li><img src="" alt="" /><a href="#" title="">ton lien</a></li>
</ul>


css

ul.toto img {float: right;}


imagine une liste de lien dans un tableau de deux colonnes a gauche tu as les images à droite un texte descriptif du lien dans la première tu fais un align right pour que les images de taille différentes soit aligné vers la droite.

En css tout se complique très vite, le float left ou right j'y ai pensé mais ca fonctionne pas le texte en position float à droite sort du <li> et se met en bas.
Parmenioneyes a écrit :


imagine une liste de lien dans un tableau de deux colonnes a gauche tu as les images à droite un texte descriptif du lien dans la première tu fais un align right pour que les images de taille différentes soit aligné vers la droite.

En css tout se complique très vite, le float left ou right j'y ai pensé mais ca fonctionne pas le texte en position float à droite sort du <li> et se met en bas.


ok jai presque trouvé la soluce. je poste mon code dès que tous est ok.
Bonjour,

Sinon, essaye ça : (à améliorer encore !!)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

	<meta http-equiv="Content-Language" content="fr" />



<style type="text/css">	

.conteneur{
   width: 900px;
   overflow: hidden;
   border: 1px solid blue; 
}

.element{
   width: 900px;


}

.image{
   width: 476px;
   float: left;


}

.element img{
   float: right;
   border: 1px solid #000;
   margin: 10px;
}

.element p{
   text-align: justify;
   float: left;
   width: 400px;
   margin-left: 10px;
   margin-right: 10px;
}
.separateur{
   clear: both;
   margin: 0;
}

</style>

</head>
<body>

<div class="conteneur">	

<div class="element"><!-- ligne 1 -->
<div class="image">
<img src="ton_image1" alt="" />
</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi egestas pede ac quam. Etiam lectus elit, vehicula et, ornare in, gravida a, urna. Donec vel ipsum in pede adipiscing scelerisque.
</p>
</div>

<hr class="separateur">

<div class="element"><!-- ligne 2 -->
<div class="image">
<img src="ton_image2.jpg" alt="" />
</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi egestas pede ac quam. Etiam lectus elit, vehicula et, ornare in, gravida a, urna. Donec vel ipsum in pede adipiscing scelerisque.
</p>
</div>
 
<hr class="separateur">

<div class="element"><!-- ligne  -->
<div class="image">
<img src="ton_image3.jpg" alt="" />
</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi egestas pede ac quam. Etiam lectus elit, vehicula et, ornare in, gravida a, urna. Donec vel ipsum in pede adipiscing scelerisque.
</p>
</div>



</div>
<p class="separateur"></p>


</body>

</html>
Salut,

fonctionne ton code en div c'est facile ! mais y a des calques qui se perdent t'a pas lu l'article ?

Perso voici mon code mais il n'aligne pas les images a droite.


#listeliens ul {
list-style: none;
margin:0;
padding:0;
}

#listeliens li {
clear:both;
list-style: none;
margin:0px;
padding:0px;
width:100%;
}

#listeliens li a img {
float:left;
}

/******************************/

<ul id="listeliens">
<li>
<a href=""><img src="..." alt="" /></a>
	<span>du texte</span>    
  </li>
  <li><a href="..."><img src="..." alt="" /></a>
	<span>du texte</span> 
</li>
  </ul>


je peux fixer la taille des image en ajoutant un width à listliens li a img mais c'est pas ca que je veux. Le clear:both dans le listlien est nécéssaire car les images sont sorti du flux je lui dit que je veux rien ni a gauche ni a droite de chaque li ca fonctionne ok dans firefox et explorer. Comment obtenir le même résultat que toi mais sans div.
Bonjour,

Des listes de ce genre j'ai du en faire ... pas mal je crois et je n'ai jamais eu de problème particulier. Concernant la "perte des calques" ma foi, pas d'info à ce sujet mais je suis toujours preneur...

Pour travailler avec tes listes et divers <span> et <em>, tu vas devoir jouer avec des positions relative et absolute qui sont assez compliquées à gérer pour differents navigateurs...

Des fois les solutions les plus simples sont peut être les moins mauvaises à moins d'en faire un exercice de style.

Bon courage
ghost a écrit :
Bonjour,

Des listes de ce genre j'ai du en faire ... pas mal je crois et je n'ai jamais eu de problème particulier. Concernant la "perte des calques" ma foi, pas d'info à ce sujet mais je suis toujours preneur...

Pour travailler avec tes listes et divers <span> et <em>, tu vas devoir jouer avec des positions relative et absolute qui sont assez compliquées à gérer pour differents navigateurs...

Des fois les solutions les plus simples sont peut être les moins mauvaises à moins d'en faire un exercice de style.

Bon courage


effectivement y pas que les positions qui sont relative si je comprend bien Smiley lol
Bonjour,

Que vous êtes compliqués, parfois... Smiley cligne 

li {
padding: 2px 0;
list-style-type: none;
clear: left;
}
li a {
float:left;
width: 150px;
text-align: right;
margin: 0 15px 0 0;
}

<ul>
   <li><a href="#"><img ... /></a> Investigationes demonstraverunt</li>
   <li><a href="#"><img ... /></a> Claritas est etiam</li>
</ul>


(Cosmétique à ajouter)
Laurent Denis a écrit :
Bonjour,

Que vous êtes compliqués, parfois... Smiley cligne 

li {
padding: 2px 0;
list-style-type: none;
clear: left;
}
li a {
float:left;
width: 150px;
text-align: right;
margin: 0 15px 0 0;
}

<ul>
   <li><a href="#"><img ... /></a> Investigationes demonstraverunt</li>
   <li><a href="#"><img ... /></a> Claritas est etiam</li>
</ul>


(Cosmétique à ajouter)


Ra la la je suis dég ! vivement que je recoive mon livre la c'est la tehon Smiley lol un gros merci quand même la classe ce Laurent
Comme d'habitude impressionnant !!!
Je crois qu'il me faudra 2 ou 3 vies de plus pour commencer à "savoir" (et encore !!)
Hello !

Et alors, moi, ce qui m'impressionnerait encore plus (Laurent, on a l'habitude ! Smiley lol ) c'est de voir un petit résolu floater à gauche du titre du sujet !

Parce que vous le valez bien ...
Smiley biggrin
Sujet clos
Aller à