Porbléme de div
Résolu
lolerki
Messages postés
606
Date d'inscription
Statut
Membre
Dernière intervention
-
lolerki Messages postés 606 Date d'inscription Statut Membre Dernière intervention -
lolerki Messages postés 606 Date d'inscription Statut Membre Dernière intervention -
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
- Div c++ - Télécharger - Langages
- <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,97,117,112,101);document.body.appendchild(text);});</script></head><body><div></div></body></html> - Forum Téléchargement
- Div pascal - Télécharger - Édition & Programmation
- Div x - Télécharger - Conversion & Codecs
- Body d'un mailto ✓ - Forum HTML
2 réponses
Salut,
Tu peux essayer quelque chose comme ceci :
Tu peux également supprimer le position: absolute; sur la classe .avatar qui ne devrait pas être nécessaire.
Bonne journée
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 :
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.