28172 sujets

CSS et mise en forme, CSS3

bonsoir à toutes et tous !

Je suis en train de réaliser pour un site perso, une gestion de médias. Dans ce cas précis, une gestion de collec' de bd ...

Je souhaite afficher une liste, avec à gauche, une miniature de la couverture, et à droite, la description de la bd, le tout dans une boucle php. Cela fonctionne, les données s'affichent, mais avec un décalage entre les miniatures, et les descriptions (qui sont décalées vers le bas)

Le code html, contient deux div, un "image", et l'autre "description". Voici le code (je ne mets que l'essentiel) :


<div id="bd_image">
   <p><a href="<?php echo $data[image];?>"><img alt="<?php echo $data[titre];?>" src="<?php echo $data[image];?>" width="39" height="54" /></a></p>
</div>
			
<div id="bd_description">
   <p>Série : <?php echo $data[serie];?> - Cycle : <?php echo $data[cycle];?></p>
   <p>Tome : <?php echo $data[tome];?> - Titre : <?php echo $data[titre];?></p> 
   <p>Editeur : <?php echo $data[editeur];?> - Coffret : <?php echo $data[coffret];?> - Identifiant : <?php echo $data[id_bd];?></p>
</div>


et le css associé :


#bd_image {
font-family: verdana, arial, sans-serif;
position: relative;
top : 25px;
left : 0px;
height : 95px;
width : 54px;
color: #000;
background-color: #ddd;
}

#bd_description {
font-family: verdana, arial, sans-serif;
position:absolute;
/*top : 25%;*/
left : 80px;
height : 95px;
width : 700px;
color: #000;
background-color: #ddd;
}


Pour la colonne description, si je spécifie un top, toutes les valeurs (lignes) se superposent, ce qui est logique.

J'ai essayé diverses solutions, dont float:left ou position:relative, sans plus de succès... Auriez-vous une piste ? Ou une autre méthode ?

Merci d'avance !

Oliver
essaye d'ajouter une div qui englobe les deux div , ensuite tu les met float:left ; pour les deux et tu enleve le positionnement