28173 sujets

CSS et mise en forme, CSS3

Un texte côté d'une image mais en bas de celle-ci ?

Bonjour,

Je cherche une méthode qui me permettrait de positionner un texte en bas à droite d'une image.

Pour l'heure j'ai le code HTML suivant :


<div class="rubrique">
<img src="image" alt=""/>
<p id="legende">texte</p>
</div>

la classe rubrique me permet une marge gauche de 20 pixels et définit une largeur maxi du conteneur de 680 px:



.rubrique {
	margin-left: 20px;
	width: 680px;
}


La balise img est donc définie avec une propriété float :



img {
	float: left;
	margin-left: 20px;
}


l'ID legende définit juste la typo.

Si j'attribue le float LEFT à la balise IMG mon texte passe bien à gauche mais il est en haut de l'image. Je peux donc ensuite jouer sur la marge du haut pour descendre mon texte, mais je cherche une méthode qui serait applicable à toutes les autres images insérées, puisque le principe sera toujours le même : une image et sa légende en bas à gauche.

J'ai pensé également configurer la hauteur de bloc <P> de mon texte à la hauteur de mon image et ensuite de définir une position basse, mais là aussi les images ne seront pas d'égales hauteurs.

Quelqu'un a-il une solution simple ? En HTML la solution était très facile puisque il suffisait d'ajouter une propriété à l'image, mais en CSS/XHTML ?

Merci pour votre aide.
Modifié par Bjorken (14 Jul 2007 - 12:32)
En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Bonjour, merci de donner une url de ta page, il est difficile de répondre à ta question sans avoir le contexte dans lequel se trouve ta class rubrique…

[mode extrapolation pure]
De plus le fait de spécifier ta div en class, laisse supposer que plusieurs div pourraient être dans ta page. Dans ce cas pourquoi mettre legende en id ? Ne serait-ce pas plus logique de le laisser en class ?
[/mode extrapolation pure]
Modifié par zzzazzz (14 Jul 2007 - 12:01)
Une solution standard serait de basculer le mode d'affichage des éléments compris dans rubrique en display:table-cell afin de pouvoir jouer sur un alignement vertical. De tête, et en encapsulant ton image dans une balise p par exemple:
.rubrique p {display:table-cell; vertical-align:bottom;}
Toutefois, il faut savoir qu'Internet Explorer ne reconnaîtra pas cette propriété. On passera donc le cas échéant dans un tableau de mise en forme à deux cellules.
zzzazzz a écrit :
Ne serait-ce pas plus logique de le laisser en class ?
[/mode extrapolation pure]


C'est tout à fait vrai, j'ai tapé le code un peu vite !
Je n'ai rien mis en ligne pour le moment, je réfléchi à la méthode la plus simple possible de manière à optimiser au maximum les CSS pour éviter de venir bidouiller dans le code.
ghost a écrit :
Bonjour,

Un display: block; a ton image devrait peut être te donner une piste.
Smiley cligne


A bon ? Je ne vois pas sincèrement !:)
Re,

Suis peut être à côté de la plaque Smiley biggol 
	   <style type="text/css">
*{margin: 0; padding: 0;}

img{
display: block;

}

.rubrique {
margin-left: 20px;
width: 680px;
}

.legende{
color: lime;
font-weight: bold;
margin-left: 5px;
}
       </style>

   </head>

   <body>

<div class="rubrique">
<img src="image.jpg" />
<p class="legende">texte</p>
</div>
</body>
Sauf erreur...
Ca ne change rien avec ton exemple car on reste dans le flux et le texte va se positionner sous l'image.
Et je me retrouve avec le même problème c'est à dire que si je définie un float position LEFT à img le texte vient à droite de l'image mais en haut.
Modifié par Bjorken (14 Jul 2007 - 13:17)
Re,

Mouis, pas sur d'avoir tout compris ...

*{margin: 0; padding: 0;}

img{
display: block;

}

.rubrique {
margin-left: 20px;
width: 680px;
}

.legende{
color: lime;
font-weight: bold;
margin-left: 5px;
}

.image{
float: left;
margin-left: 20px;
}
       </style>

   </head>

   <body>

<div class="rubrique">
	<div class="image">
		<img src="image.jpg" />
		<p class="legende">texte</p>
	</div>
	<div class="image">
		<img src="image.jpg" />
		<p class="legende">texte</p>
	</div>	
	
</div>
</body>
Benjamin D.C. a écrit :
Mais quoi, tu as testé ma proposition ou non?


Non désolé car comme tu le dis toi même table-cell n'est pas reconnue par Internet Explorer et de plus je ne veux pas utiliser le principe des tableaux, mais des blocs CSS.
Modifié par Bjorken (14 Jul 2007 - 13:33)
Benjamin D.C. a écrit :
Mon message induisait qu'il n'y a naturellement pas d'autre solution viable à l'heure actuelle...


Et si !
J'ai trouvé et j'en ai honte tellement c'était simple ! Smiley bawling

Le HTML

<div class="affiches">
<img id="image.jpg" alt=""/>
Texte de legende
</div>


Le CSS

img {
	margin-left: 20px;
	vertical-align: text-bottom;
}

.affiches {
	width: 700px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
}

Modifié par Bjorken (14 Jul 2007 - 13:51)
... mais évidemment qu'avec une seule ligne de texte ça va fonctionner, c'est un comportement normal! Je pensais que tu cherchais à ce qu'un bloc de texte soit toujours aligné sur le bas d'une image quelque soit sa longueur...
Re,

Bas à droite ! il aurait fallut faire un schéma pour mes vieux neurones Smiley lol

Avec un positionnement en absolute et a condition de connaitre le width de la légende, ça ne le fais pas?
	   <style type="text/css">
*{margin: 0; padding: 0;}

img{
display: block;

}

.rubrique {
margin-left: 20px;
width: 680px;
}

.legende{
color: blue;
font-size: 0.6em;
position: absolute;
width: 100px;
bottom: 0;
right: -110px;
}

.image{
float: left;
margin-left: 20px;
position: relative;
}
       </style>

   </head>

   <body>

<div class="rubrique">
	<div class="image">
		<img src="image.jpg" />
		<p class="legende">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sit amet diam vitae quam euismod rhoncus. Nunc non sapien.</p>
	</div>
	
	
</div>
Sujet clos
Aller à