Webmaster Hub > Positionner une image dans un dl et dt

Version complète: sur le forum Webmaster Hub : Positionner une image dans un dl et dt

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

doomer2

vendredi 21 janvier 2005 à 22:36

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 :

CODE

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 :

CODE

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

samedi 22 janvier 2005 à 13:07

Bonjour dommer2,

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

doomer2

samedi 22 janvier 2005 à 18:03

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

Merci

Perrine

samedi 22 janvier 2005 à 18:06

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

samedi 22 janvier 2005 à 18:09

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

samedi 22 janvier 2005 à 20:00

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à :

CODE

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

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.