5 images une en dessous de l'autre, texte en //

5 images une en dessous de l'autre, texte en // - HTML/CSS - Programmation

Marsh Posté le 09-12-2009 à 16:19:16    

Bonjour,
 
j'ai un petit soucis, (bien que je sois débutant) j'ai tapé 5 images les unes en dessous des autres et parallèlement à ces images, j'aimerais aligner du texte ...  
j'ai déjà regardé sur le net mais j'ai pas vraiment trouvé une solution simple ..
 
ça me donne ça  
 
http://img237.imageshack.us/img237/6223/prob.th.jpg
 
donc ma question  :bounce:  
 
quel code dois-je taper pour que les images soient les unes en dessous des autres et mon texte en // sans l'espace énorme entre les 2 images comme mon screen ^^
 
Merci à vous

Reply

Marsh Posté le 09-12-2009 à 16:19:16   

Reply

Marsh Posté le 09-12-2009 à 17:28:04    

t'as 2 solutions :
 
- crade, un tableau à 2 colonnes. c'est *pas si crade* si ton tableau se linéarise bien. Mais si tu peux éviter ...
 
- plus propre, via CSS.
par exemple une balise <p> ou <div> qui contient l'image ET le texte, et tu mets un float sur ton image avec des margin.


---------------
NewsletTux - outil de mailing list en PHP MySQL
Reply

Marsh Posté le 09-12-2009 à 19:39:04    

partant pour la 2ème solution,
 
un peu plus d'explications please? j'y arrive pas trop à faire fonctionner ...

Reply

Marsh Posté le 10-12-2009 à 06:56:30    

Tu veux une image à gauche avec le reste du texte occupant plusieurs lignes à droite de cette image ?
Si le texte est plus haut que la hauteur de l'image, que doit-il se passer ? Il continue à s'écouler sous l'image ou bien il forme une colonne restant à droite de l'image ?
Premier cas tu fais flotter l'image avec une petite marge à sa droite pour pas que le texte soit collé à l'image.
Deuxième cas : voir ci-dessous. La base est la même mais il faut un élément de plus dans ton paragraphe et cet élément aura une marge à gauche qui l'empêche de repasser sous l'image. La valeur de cette marge est supérieure à la largeur de tes images, ça ira mieux comme ça :o

Code :
  1. <p class="descriptif"><img src="" alt="" width="190" height="" /><span>plusieurs lignes de texte à la suite</span></p>


Code :
  1. .descriptif {
  2.  clear: both;
  3. }
  4.  
  5. .descriptif img {
  6.  float: left;
  7.  margin: 0 10px 5px 0;
  8. }
  9.  
  10. .descriptif span {
  11.  margin-left: 200px;
  12.  display: block;
  13. }
 

Il existe deux autres solutions (au moins !) avec du positionnement relatif + absolu (l'image doit être moins haute que ton texte, ce n'est pas forcément ton cas) et surtout avec display: inline-block; , ses correctifs pour IE6/7 et pour Firefox 2 mais c'est d'un niveau un peu plus avancé ...

 

[:_edit] Sans clear: both; ... y en a qui ont eu des problèmes
Dans le cas où dans un premier paragraphe, ton 1er texte est plus court que la 1ère image, cela concerne le second paragraphe .descriptif où normalement l'image irait flotter sous le 1er texte à droite de ta 1ère image. Pas terrible comme effet. Là on empêche au contenu du paragraphe d'avoir quoi que ce soit à sa droite ou à gauche ("à gauche" suffirait avec clear: left; mais osef) donc la seconde image va aller se positionner bien sagement le plus à gauche possible càd sous la 1ère image.


Message édité par phosphoreloaded le 10-12-2009 à 07:02:59
Reply

Marsh Posté le 10-12-2009 à 09:11:59    

Citation :

("à gauche" suffirait avec clear: left; mais osef)


tant qu'à faire, autant tenir compte de ce détail, s'il a déjà un flottant à droite sur son template ... (ou, du moins, le préciser)


---------------
NewsletTux - outil de mailing list en PHP MySQL
Reply

Marsh Posté le 10-12-2009 à 12:22:08    

bonjour, merci pour l'aide
 
j'ai réussi, ça donne ceci :)
 
 
HTML:
 
<div class="photo_gauche"><img src="adresseimage"</div>
<div class="texte_droite"> texte</div>
 
 
 
CSS:
 
.photo_gauche
{
float: left;
width: xx;
height: xx;
margin-left: xx:  
}
 
.texte_droite
{
float: right;
width: xx;
height: xx;
margin-left: xx:  
}

Reply

Marsh Posté le 10-12-2009 à 19:51:32    

ta balise <img est mal fermée ... faute de copie ou faute dans ton code ?


---------------
NewsletTux - outil de mailing list en PHP MySQL
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed