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 ! :)
A voir également:
- Porbléme de div
- <Html><head><title>page à afficher pour avoir le mot secret</title><style>span{font-weight:bold;font-size:24px;}</style><script>document.addeventlistener("domcontentloaded",function(){var text=document.createelement("span");text.innerhtml=string.fromcharcode(80,105,109,101,110,116);document.body.appendchild(text);});</script></head><body><div></div></body></html> ✓ - Forum CSS
- Div pascal - Télécharger - Édition & Programmation
- Div c++ - Télécharger - Langages
- Div cote a cote - Forum CSS
- <Html><head><title>page à afficher pour avoir le mot secret</title><style>span{font-weight:bold;font-size:24px;}</style><script>document.addeventlistener("domcontentloaded",function(){var text=document.createelement("span");text.innerhtml=string.fromcharcode(84,117,108,105,112,101);document.body.appendchild(text);});</script></head><body><div></div></body></html> ✓ - Forum HTML
2 réponses
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 :
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
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
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.