Insérer 3 textes sur même ligne code HTML
cathy
-
nEm3sis Messages postés 722 Statut Membre -
nEm3sis Messages postés 722 Statut Membre -
Bonjour,
J'ai réussi à mettre 3 photos sur la même ligne : aligné droit, centrer, aligné gauche. Voici mon code HTML
<p style="text-align:center">
<img src="http://ebsd_logo_100x100.jpg" style="float:left;"/>
<img src="http://Logo-100x100_full.gif" style="float:right;" />
<img src="http://picture_66458.png" />
</p>
Sur le même principe, je souhaite faire la même chose avec du texte mais je n'y arrive pas. J'ai regardé pas mal de tuto mais je n'ai pas trouvé de réponse.
L'idée est de mettre un texte sous chaque photo. A gauche, centré, à droite.
Quelqu'un a-t-il la solution ?
Merci
Cathy
J'ai réussi à mettre 3 photos sur la même ligne : aligné droit, centrer, aligné gauche. Voici mon code HTML
<p style="text-align:center">
<img src="http://ebsd_logo_100x100.jpg" style="float:left;"/>
<img src="http://Logo-100x100_full.gif" style="float:right;" />
<img src="http://picture_66458.png" />
</p>
Sur le même principe, je souhaite faire la même chose avec du texte mais je n'y arrive pas. J'ai regardé pas mal de tuto mais je n'ai pas trouvé de réponse.
L'idée est de mettre un texte sous chaque photo. A gauche, centré, à droite.
Quelqu'un a-t-il la solution ?
Merci
Cathy
A voir également:
- Mettre du texte sur la meme ligne html
- Partager photos en ligne - Guide
- Mètre en ligne - Guide
- Editeur html - Télécharger - HTML
- Mettre un texte en majuscule - Guide
- Comment se mettre hors ligne sur instagram - Guide
7 réponses
tu peux faire comme ça
les width dans le style sont facultatifs
Si une réponse est utile pense au +1
Si tu as résolu ton problème passe nous le dire et met ton sujet en résolu.
<style type="text/css">
.left-col { float: left; width: 100px; }
.mid-col { float: left; width: 100px; }
.right-col { width: 100px; }
</style>
<div class="left-col">
<img><br>
blabla1
</div>
<div class="mid-col">
<img><br>
blabla2
</div>
<div class="right-col">
<img><br>
blabla3
</div>
les width dans le style sont facultatifs
Si une réponse est utile pense au +1
Si tu as résolu ton problème passe nous le dire et met ton sujet en résolu.
Merci pour ta réponse.
Est-ce le seul moyen ? j'ai jamais fait de tableau.
Lorsque j'essaye le basique il me renvoi à la ligne. donc c'est bien à gauche, au centre et à droite mais sur 3 ligne.
<h4 align="center">Titre aligné au centre</h4>
<h4 align="left">Titre aligné à gauche</h4>
<h4 align="right">Titre aligné à droite</h4>
si c'est le seul moyen je me lance....
Est-ce le seul moyen ? j'ai jamais fait de tableau.
Lorsque j'essaye le basique il me renvoi à la ligne. donc c'est bien à gauche, au centre et à droite mais sur 3 ligne.
<h4 align="center">Titre aligné au centre</h4>
<h4 align="left">Titre aligné à gauche</h4>
<h4 align="right">Titre aligné à droite</h4>
si c'est le seul moyen je me lance....
<table style="width:100%" border="0">
<tr><td>
<img src="IMAGE01">
</td><td>
<img src="IMAGE02">
</td><td>
<img src="IMAGE03">
</td></tr>
<tr><td>
TEXTE01
</td><td>
TEXTE02
</td><td>
TEXTE03
</td></tr></table>
<tr><td>
<img src="IMAGE01">
</td><td>
<img src="IMAGE02">
</td><td>
<img src="IMAGE03">
</td></tr>
<tr><td>
TEXTE01
</td><td>
TEXTE02
</td><td>
TEXTE03
</td></tr></table>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Merci Kisscool
ça fonctionne. Par contre même si <table style="width:100%" border="0"> mon image de gauche n'est pas collé à droite, il faut que je mette 120 - 130%
c'est normal ?
ça fonctionne. Par contre même si <table style="width:100%" border="0"> mon image de gauche n'est pas collé à droite, il faut que je mette 120 - 130%
c'est normal ?
Essaye peut être de jouer avec les feuilles de style pour régler l'espace entre tes images avec (padding et margin) vois ce que ça donne.
Salut à tous,
L'autre option est de faire <style>display:inline;</style> pour les images ou de bien de créer une classe pour ces photos:
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
L'autre option est de faire <style>display:inline;</style> pour les images ou de bien de créer une classe pour ces photos:
. photo { /* photos cote à cote */
display:inline;
}puis au lieu de
<img src="http://ebsd_logo_100x100.jpg" style="float:left;"/>faire:
<img src="http://ebsd_logo_100x100.jpg" class="photo"/><br /> Légende 1 Légende 2 etc...
Le bonheur est la seule chose que l'on peut donner sans l'avoir.
De même le texte n'est pas tout a fait centré sous l'image, est-il possible de le faire ?
/!\ Pour Infos complémentaire, en fait ça fonctionne que sous IE et Opera. Sous Chrome et Fire fox, la dernière image est à la suite.
comme ceci c'est mieux ?
<style type="text/css"> .col { float: left; width: 33%; min-width: 160px; text-align: center } .clear { clear: both; } </style> <div class="col left"> <img src="..."><br> blabla1 </div> <div class="col mid"> <img src="..."><br> blabla2 </div> <div class="col right"> <img src="..."><br> blabla3 </div> <div class="clear"></div>pour le problème de la dernière image c'était un oubli de ma part :/
le min-width est à regler pour éviter que les div se superposent au fait (si la page est trop petite)
ps: les classe css left mid et right ne sont pas utilisée pour le moment mais pourraient servir si tu veux mettre des style uniquement sur certaine colonne