5 images une en dessous de l'autre, texte en // - HTML/CSS - Programmation
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.
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 ...
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
Code :
|
Code :
|
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é ...
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.
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)
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:
}
Marsh Posté le 10-12-2009 à 19:51:32
ta balise <img est mal fermée ... faute de copie ou faute dans ton code ?
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
donc ma question
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