Bonsoir,

voila, en fait je suis en train de réaliser le design d'une messagerie privée instantanée, et j'en suis a la fin: afficher l'avatar.

Voici mon design pour le moment:

Voici ce que je voudrais obtenir, je vous fais un schéma (grossier):

Lien de l'image si c'est trop gros: https://user.oc-static.com/upload/2017/03/24/14903830652314_Sans%20titre%201.png

Donc voici le CSS de .item, .item_wrapper, .author, .horaire, .comment

.item {
    margin-bottom: 15px;
}	

.item .item_header {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 25px 0 0;
    float: left;
}	

.item .item_wrapper {
    background-color: #fff;
    padding: 10px;
    min-height: 50px;
    overflow: hidden;
}

.item .item_wrapper .author {
    margin-bottom: 5px;
    color: #222;
}

.item .item_wrapper .comment {
    font-size: 12px;
    line-height: 18px;
    word-break: break-all;
}

.horaire {
    font-size: 12px;
    padding-bottom: 8px;
    padding-top: 0;
    color: lightgrey;
}

J'espère avoir été compréhensible, merci beaucoup d'avance pour votre aide !

Salut il te suffit de mettre ta div container en position:relative;

et ton image en position:absolute;

sachant que elle sera positionné au sein de la div si tu veut qu'elle en sorte pour être à cheval faudra mettre des valeurs négatives à top et left

Bonjour, merci de la réponse,

J'obtiens ça:

Voici mon CSS:

.item .item_wrapper .comment {
	font-size: 12px;
	line-height: 18px;
	word-break: break-all;
}

.comment {
	position: relative;
}

.avatar img {
	position: absolute;
}

Et mon html (se trouvant dans une boucle while):

<div class="item">
	<div class="item_wrapper">
		<div class="avatar"><img class="img-circle" width="68px" height="68px" src="Membres/Avatar/<?= $infoSender['avatar'] ?>" alt="Avatar de <?= $infoSender['pseudo'] ?>" /></div>
		<div class="author"><a target="_blank" href="profil/<?= $infoSender['pseudo'] ?>"><?= $infoSender['pseudo'] ?></a><span> a dit:</span><?php if($m['lu_receiver'] == 1) { ?>&emsp;<img src="http://linkprivé.com/oths/uK4aYjN9.png" width="14px" height="14px" title="Vu" /><?php } ?></div>
		<div class="horaire"><?= affichDateH($m['datesend']) ?></div>
		<div class="comment"><?= $m['content'] ?></div>
	</div>
</div>

Je sais qu'il manque top et left mais où dois-je écrire ces données ?

Faut-il que je mette le fichier complet sur un pastebin ?

-
Edité par Beignet 26 mars 2017 à 14:40:11

Bonjour,

les top et left doivent être sur le même sélecteur que position: absolute, tu es sur la bonne voie.

En revanche, position: relative doit être sur le parent d' .avatar, et c'est .avatar lui-même qui doit être en absolute. Et il faudra aussi mettre un peu de padding sur le parent d' avatar, pour éviter la superposition avec le texte.

J'ai obtenu ce que je voulait !

.item {
	margin-bottom: 15px;
}	

.item .item_header {
    position: relative;
    width: 50px;
    height: 50px;
    margin: 0 25px 0 0;
    float: left;
}	

.item .item_wrapper {
    background-color: #fff;
    padding: 10px;
    min-height: 50px;
    overflow: hidden;
}

.item .item_wrapper .author {
    margin-bottom: 5px;
    color: #222;
}

.item .item_wrapper .comment {
    font-size: 12px;
    line-height: 18px;
	word-break: break-all;
}

.horaire {
	font-size: 12px;
	padding-bottom: 8px;
	padding-top: 0;
	color: lightgrey;
}

.item {
	position: relative;
}

.item_wrapper div.author, div.horaire {
	padding-left: 55px;
}

.item_wrapper div.comment {
	padding-left: 30px;
}

.avatar {
	position: absolute;
	top: -20px;
	left: -10px;
}

.all-item {
	padding-left: 7px;
	padding-top: 15px;
}

<div class="all-item">
	<div class="item">
		<div class="item_wrapper">
			<div class="avatar"><img class="img-circle" width="65px" height="65px" src="Membres/Avatar/<?= $infoSender['avatar'] ?>" alt="Avatar de <?= $infoSender['pseudo'] ?>" /></div>
			<div class="author"><a target="_blank" href="profil/<?= $infoSender['pseudo'] ?>"><?= $infoSender['pseudo'] ?></a><span> a dit:</span><?php if($m['lu_receiver'] == 1) { ?>&emsp;<img src="http://stock-perso.esy.es/oths/uK4aYjN9.png" width="14px" height="14px" title="Vu" /><?php } ?></div>
			<div class="horaire"><?= affichDateH($m['datesend']) ?></div>
			<div class="comment"><?= $m['content'] ?></div>
		</div>
	</div>
</div>

Merci beaucoup pour vos indications/pistes !

Avez-vous des choses à redire sur mon code ?

il suffit de mettre ta div conteneur en relative et après pour  situé ton image en position absolute + float:right; ou left et margin-top-ou-bottom:0;

MelvinPinte1 > inutile de mettre float et position, c'est ce dernier qui prendra le dessus.

J'ai résolu mon problème....

Je demandais juste si vous trouviez quelque chose à améliorer