Sujet Précédent Sujet Suivant

Insérer 3 textes sur même ligne code HTML

Fermé
cathy - Modifié par cathy le 2/04/2012 à 22:46
nEm3sis Messages postés 710 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 - 3 avril 2012 à 22:23
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

7 réponses

Réponse 1 / 7
nEm3sis Messages postés 710 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 113
Modifié par nEm3sis le 2/04/2012 à 23:39
tu peux faire comme ça
<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.
3
cathy
Modifié par cathy le 3/04/2012 à 00:51
Merci pour ta réponse. ça à fonctionné seulement j'aimerais que une image soit à droite, une centré et l'autre gauche. Là elles sont cote à cote.
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.
0
nEm3sis Messages postés 710 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 9 avril 2012 113
Modifié par nEm3sis le 3/04/2012 à 23:09
oui bien sur c'est possible
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
0
Réponse 2 / 7
cathy
2 avril 2012 à 23:39
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....
1
Réponse 3 / 7
kisscool387 Messages postés 260 Date d'inscription jeudi 22 novembre 2007 Statut Membre Dernière intervention 20 août 2016 11
2 avril 2012 à 23:44
<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>
1
Réponse 4 / 7
kisscool387 Messages postés 260 Date d'inscription jeudi 22 novembre 2007 Statut Membre Dernière intervention 20 août 2016 11
2 avril 2012 à 23:24
il faut que tu crée une table pour aligner un texte sous chaque photo.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
cathy
3 avril 2012 à 00:16
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 ?
0
Réponse 6 / 7
Briglim
3 avril 2012 à 08:14
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.
0
Réponse 7 / 7
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
3 avril 2012 à 10:37
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: 
. 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 &nbsp;&nbsp; Légende 2 etc...


Le bonheur est la seule chose que l'on peut donner sans l'avoir.
0

Discussions similaires

Alignement du texte à gauche et à droite
Owrell -
Anonyma16_42 -

8 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses
comment donner les droits sur fichier partage
ch'ti du 57 -
fil1958 -

2 réponses
Aller à la ligne sur iPhone ?
Smack -
Benvie -

6 réponses
Résolution d'une image 500 pixels largeur
sassou -
transat -

2 réponses