Positionner une image dans un dl et dt

[doomer2]

Bonsoir à tous,

Je suis en train de faire petit agenda en PHP et CSS et me voilà confronté à un petit probléme de positionnement d'une image.

Voici d'abord un petit lien vers une copie écran :

Copie ecran du soucis

Je souhaiterais positionner mon image juste en dessous de la date tout en laissant le reste de l'information à gauche.

Voici mon code en CSS :

dl.event
{
margin: 2em 0;
padding: 0;
font-family: georgia, times, serif;
}
.event dt
{
position: relative;
left: 0;
top: 0.5em;
width: 10em;
font-weight: bold;
border:1px solid #000;
background-color:#fff0d7;
}
.event dd
{
border-left: 3px double #000;
margin: 0 0 0 20em;
padding: 0 0 .5em .5em;
}

.event dd img{margin:5px;padding:5px;border:1px solid #cccccc;}

Pour l'instant rien d'extraordinaire et voici mon code XHTML et PHP :

echo "<dl class='event'>";
affiche_date($date_deb,$date_fin);
echo "<dd>$lieu</dd><dd>($rubrique)</dd>"; 	 
if (!file_exists("./admin/images/image_$id.jpg"))
{
	echo "<dd>$description</dd>
	<dd><strong>Entrée: $entree</strong></dd>
  </dl>";
   comment($id);
}
else
{
echo "
 <dd><img src='./admin/images/image_$id.jpg' width='110' height='120'/>  </dd>
<dd>$description</dd>
 <dd><strong>Entrée: $entree</strong></dd>
 </dl>";
 comment($id);
}
echo "<br />";
}
function affiche_date($date_deb,$date_fin)
{
	if ($date_fin==$date_deb)
	{
  $date_2=date("d-m-Y",$date_deb);
  echo "<dt><strong>le $date_2 </strong></dt>";
	}
	else
	{
  $date_2=date("d-m-Y",$date_deb);
  $date_3=date("d-m-Y",$date_fin);
  echo "<dt><strong>du $date_2 au $date_3</strong></dt>";
	}
}

Si quelqu'un à une petite idée pour placer cette fameuse image à gauche en dessous de mes dates serait la bienvenue. J'ai essayé avec un float mais en vain.

Merci à tous

PS: J'ai effectué tous de même des recherches sur le forum sans trouver une réponse concréte à mon probléme.

[Perrine]

Bonjour dommer2,

Pourquoi ne pas laisser le bloc dt dans le flux. Le bloc suivant viendra donc se mettre en dessous, non ?

[doomer2]

Je comprends pas trés bien ce que tu me dis azon. Peux tu être plus explicite.

Merci

[Perrine]

Oui je peux

Plutôt que de mettre le dt en fin du code et de le placer avec un position:relative, pourquoi ne pas le mettre en début de code ?

Dans la CSS, tu ne spécifies pas de position:relative pour le dt, en d'autres termes, tu ne le positionnes pas. Ainsi, l'élément dt étant de type bloc, les dd que tu mettras à sa suite viendront se positionner en dessous de lui.

Je suis plus claire ?

[doomer2]

Oui mais ma balise dt fait parti de la fonction affiche_date($date_deb,$date_fin) qui utilisé tout de suite derriére le dl (voir mon source).

Il est donc bien en début de code (enfin à mon avis).

[Perrine]

Ah ok pardon, je ne suis pas encore très à l'aise avec le PHP

Donc si ton dt est en début de code, pourquoi le positionner en relatif ?

Il est préférable de laisser se positionner les éléments dans le flux de lecture. Ici, puisque tu souhaites positionner ton dt au dessus de l'image, je ne comprends pas pourquoi tu ne laisses pas le dt se positionner tout seul. Je vais me répéter mais puisque c'est un élément de type bloc, l'élément qui le suit se placera en dessous de lui.

Il te suffit de retirer cette partie là :

position: relative;
left: 0;
top: 0.5em;

Si je n'ai pas compris ce que tu souhaites, le mieux est encore que tu mettes un extrait de ton code en HTML, une fois que le PHP a été exécuté ... ce sera plus facile de comprendre le code