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
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
A voir également:
- Porbléme de div
- Div c++ - Télécharger - Langages
- #Div/0 excel moyenne - Guide
- Div cote a cote - Forum CSS
- Remplacer #div/0 par vide - Forum Bureautique
- Div x - Télécharger - Conversion & Codecs
2 réponses
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
21 janv. 2016 à 14:12
21 janv. 2016 à 14:12
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
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
21 janv. 2016 à 15:04
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 :
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
lolerki
Messages postés
606
Date d'inscription
lundi 21 avril 2008
Statut
Membre
Dernière intervention
1 mars 2017
102
21 janv. 2016 à 16:00
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 ! :)
J'ai corrigé les points que tu ma cité. Je te remercie de ton aide ! :)
21 janv. 2016 à 14:29
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.