Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2508 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1948789
xsat1
Posté le 09-12-2009 à 16:19:16  profilanswer
 

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

mood
Publicité
Posté le 09-12-2009 à 16:19:16  profilanswer
 

n°1948815
NewsletTux
<Insérez ici votre vie />
Posté le 09-12-2009 à 17:28:04  profilanswer
 

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
n°1948836
xsat1
Posté le 09-12-2009 à 19:39:04  profilanswer
 

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

n°1948909
phosphorel​oaded
Posté le 10-12-2009 à 06:56:30  profilanswer
 

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
n°1948921
NewsletTux
&lt;Insérez ici votre vie /&gt;
Posté le 10-12-2009 à 09:11:59  profilanswer
 

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
n°1948991
xsat1
Posté le 10-12-2009 à 12:22:08  profilanswer
 

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:  
}

n°1949209
NewsletTux
&lt;Insérez ici votre vie /&gt;
Posté le 10-12-2009 à 19:51:32  profilanswer
 

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


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Mailing: récupérer automatiquement texte de l'adresseLibrairie pour manipuler du texte et des images?
topic à suprimerMenu images, espace dans IE6 lorsqu'on agrandit la taille du texte
Images et texte avec xsl:fo[resolu] Synchroniser un texte descriptif et des images en float
images avec du texte dessusInclure valeur images dans champ texte [ - job's done - ]
[php/images dynamiques] images avec du texte mis en forme?HTML = aliminer l'espace entre le bord des fenetre et le texte/images
Plus de sujets relatifs à : 5 images une en dessous de l'autre, texte en //


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR