28173 sujets

CSS et mise en forme, CSS3

Alignement dans un dl

Bonjour je travaille sur un systeme de vignettes pour un galerie d'image. Pour cela j'utilise des dl et dt.

Voila pour le contexte, mais ce n'est pas nécessaire a mon avis c'est plutot un cas général.

Ma question est : Comment faire pour dans un dt faire apparaitre un texte centré, et sur la même ligne une image alignée a droite ?

Exemple les | sont les bords de mon dt et le Smiley smile correspond à l'image :

|      texte centré          [smile] |



<dl>
 <dt class="vign_img">
  <img  height="205px" width="150px" src="conversation.JPG" />
 </dt> 
 <dt class="vign_titre">
  Amusante conversation
 </dt>
 <dt class="vign_ref">
  65 x 54 cm - <strong>Ref.:8</strong>
 </dt>
 </dt>
  <img src="components/pecAtqp/vert.jpg" />
 </dt>
</dl>

Modifié par Florent V. (23 Jun 2007 - 14:11)
Bonjour,

pelloq1 a écrit :
Pour cela j'utilise des dl et dt.

Ce qui est déjà un abus. Pas de raison particulière d'utiliser une liste de définition ici (non, les légendes ne définissent pas les images, qui d'ailleurs n'ont pas de texte alternatif semble-t-il...).

Bref, on peut virer les dl, dt, dd.

pelloq1 a écrit :
Ma question est : Comment faire pour dans un dt faire apparaitre un texte centré, et sur la même ligne une image alignée a droite ?

Faire un tableau à deux colonnes. La première contient le texte, et la seconde les images. Centrer le texte dans la première colonne et restreindre la largeur de la seconde à la largeur maximale des images ne devrait pas être bien compliqué.

Sinon, on peut aussi utiliser des images flottantes.
[b]HTML :[/b]
<p>
	<img src="..." alt="" />
	<span>Mon texte</span>
</p>

[b]CSS :[/b]
p {
	width: 100%;
	overflow: hidden;
}
p img {
	float: right;
}
p span {
	display: block;
	margin-right: 110px;
	text-align: center;
}

Ici, on considère que les images ont une largeur maximale de 100px.

Le overflow:hidden sert à empêcher le dépassement des flottants (de même que le width: 100%, mais uniquement pour IE6... si on a une feuille de style spéciale pour IE6 et inférieurs appelée via un commentaire conditionnel, on pourra y rejeter cette propriété... mais bon, elle ne devrait pas faire de mal en l'état).

La question qui va se poser, c'est : quel est le rôle des images ? En particulier : est-ce qu'il y aura un lien de placé sur les images ? Auquel cas, il ne sera à priori pas très pertinent d'avoir un texte alternatif vide. À moins de faire porter le lien sur l'ensemble image + texte.
Sujet clos
Aller à