Porbléme de div

Résolu/Fermé
lolerki Messages postés 606 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 1 mars 2017 - 21 janv. 2016 à 12:12
lolerki Messages postés 606 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 1 mars 2017 - 21 janv. 2016 à 16:00
Bonjour,

Je viens vers vous car j'ai un soucis avec mes divs. Vue que une image c'est toujours mieux voilà une illustration : https://www.zupimages.net/up/16/03/mhzq.png
L'image (avatar) sort de sont conteneur ce qui donne cette superposition affreuse.

code css :

.avatar{
        display:inline-block;
        width:19%;
        position: absolute;
}

.textenews{
        display:inline-block;
        width:79%;
        margin-left: 20%;
} 

#commentaire{
	background-color : #DEDEDE;
	border-radius: 10px;
	padding-bottom: 1%;
	padding-right: 1%;
        padding-left: 1%;
}


Code php :
<div id="commentaire" >
	<p style="color:#585858"><b><?php echo $communaute['auteur']; ?></b> | Le <?php echo $communaute['date']; ?>
	
        <div class="avatar"><img src="img\avatar\default.jpg" alt="Avatar"/></div>
        <div class="textenews"><?php echo $communaute['contenu']; ?>
        </div>   
</div>


Si vous avez des suggestions, je suis preneur, merci de votre aide ! :)

2 réponses

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 544
21 janv. 2016 à 14:12
Salut,

Tu peux essayer quelque chose comme ceci :
.avatar img {
    width: 100%;
}


Tu peux également supprimer le position: absolute; sur la classe .avatar qui ne devrait pas être nécessaire.

Bonne journée
0
lolerki Messages postés 606 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 1 mars 2017 101
21 janv. 2016 à 14:29
Bonjour,

Merci de ta réponse, mais la position absolute me permet de mettre cote à cote l'image est le texte. C'est ce que je n'arrive pas a faire. Bien que cela règle le soucis du div.

Merci d'avance.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 544
21 janv. 2016 à 15:04
La position absolute ne devrait pas être utilisé pour aligner des éléments horizontalement.

Pour afficher l'image et le texte à coté, il faut définir ces deux éléments en inline-block (ou en float) et leur définie une largeur.

Une solution possible :
<div id="commentaire" >
  <p style="color:#585858"><b>Auteur</b> | Le date</p>
  <div class="avatar"><img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Avatar"/></div><div class="textenews">texte</div>   
</div>


.avatar{
  display: inline-block;
  width:20%;
  vertical-align: top;
}

.avatar img {
  width: 100%;
}

.textenews{
  display: inline-block;
  width: calc(80% - 20px);
  vertical-align: top;
  margin-left: 20px;
} 

#commentaire{
  background-color: #DEDEDE;
  border-radius: 10px;
  padding: 0 10px;
}


Quelques remarques :
- ta balise <p> n'était pas fermée
- je te conseil d'éviter les pourcentages pour les propriétés margin et padding
- un identifiant html est sensé être unique, donc à moins que tu n'aies qu'un seul commentaire, tu devrais utiliser une classe à la place d'un id
- si on utilise le positionnement en inline-block, il faut bien penser à supprimer le moindre espace ou saut de ligne entre les deux balises html concernées, sinon un espace apparaitra dans le rendu de la page (plus d'info : https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html
0
lolerki Messages postés 606 Date d'inscription lundi 21 avril 2008 Statut Membre Dernière intervention 1 mars 2017 101
21 janv. 2016 à 16:00
Merci de ta réponse rapide !

J'ai corrigé les points que tu ma cité. Je te remercie de ton aide ! :)
0