28172 sujets

CSS et mise en forme, CSS3

bonjour,

je n'arrive pas à positionner les éléments qui compose un commentaire sur mon futur blog (dev. en local)

Code HTML

<li <?php echo $oddcomment; ?> id="comment-<?php comment_ID() ?>">
			
			<p class="comment-date">Il y a <?php echo human_time_diff(get_comment_time('U'), current_time('timestamp')); ?></p>
			<?php userphoto_comment_author_thumbnail() ?>
			<img src="./wp-content/themes/blueprint/images/bulle.png" alt="bulle"/>
			<div class="comment-nom"><?php comment_author_link() ?></div>
			<div class="comment-position"><?php comment_text() ?></div>
			
		</li>


voila ce que je cherche à positionner

- la date en haut à droite :

.comment-date {
	margin-top: 5px;
	margin-right: 20px;
	text-align: right;
	color: #D1D1D1;"
}


- image de l'avatar

.commentlist .photo {
	margin: 7px 5px 0 20px;
	vertical-align: top;
}


- l'image type bulle de BD (no css)

- nom du commentateur

.comment-nom  {
position:relative;
top:-25px;
left:22px;
bottom:0px;
}


- le commentaire

.comment-position {
position:relative;
width:430px;
top:-125px;
left:145px;
}


-pour info le css du <li>

.commentlist li { 
	background: #FFFFFF;
	border: 1px solid #E2E2E2;
	width:600px;
	margin: 30px 0px 35px 15px;
}


Comme vous l'imaginez c'est le GROS top:-125px qui met la pagaille, car si il permet de placer le commentaire dans la bulle de BD, il provoque aussi un vide en bas du cadre puisque le bas du cadre ne monte pas avec le texte...

Je viens de lire les articles alsacreations mais je n'arrive pas à les appliquer pour cette situation, auriez vous une piste à me proposer ?

Merci
Modifié par billboc (10 Oct 2010 - 14:28)
merci beaucoup pour cette piste qui me semble intéressante !!
je vais bosser ça ce week-end.. je vous tiens au courant Smiley cligne

MAJ: quelques div et postion:relative et tout est ok, merci
Modifié par billboc (10 Oct 2010 - 14:29)