Porbléme de div
Résolu
lolerki
Messages postés
675
Statut
Membre
-
lolerki Messages postés 675 Statut Membre -
lolerki Messages postés 675 Statut Membre -
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 :
Code php :
Si vous avez des suggestions, je suis preneur, merci de votre aide ! :)
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
-
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 -
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
