Problème d'affichage
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 à tous,
Je viens vers vous car j'ai un problème d'affichage (surement de div donc ou de css ^^')
Voilà je vous explique j'ai crée un div pour les avatars, ainsi qu'un autre pour du texte. En gros l'affichage des commentaires (image en bas). Le problème c'est que le div du texte s'arrête au texte et non a la fin de l'avatar
Image du problème :
Merci de votre aide !
PS : quand je place une hauteur par défaut ça règle le problème. Mais celui-ci n'est plus extensible
Je viens vers vous car j'ai un problème d'affichage (surement de div donc ou de css ^^')
Voilà je vous explique j'ai crée un div pour les avatars, ainsi qu'un autre pour du texte. En gros l'affichage des commentaires (image en bas). Le problème c'est que le div du texte s'arrête au texte et non a la fin de l'avatar
#commentaire{
background-color: #DEDEDE;
border-radius: 10px;
padding-left: 10px;
padding-bottom: 1px;
padding-right: 8px;
}
.avatar {
float:left;
}
.cadre_news {
margin-left:133px;
width:387px;
padding-left:25px;
padding-right:9px;
padding-top:9px;
}
<table> <tr> <td> <div id="commentaire"> <p style="color:#585858"><b>pseudo</b> | La date <hr class="hr2"/> <div class="avatar"><img src="img" alt="Avatar" /></div> <div class="cadre_news">le texte</div> </div> </td> </tr> </table>
Image du problème :
Merci de votre aide !
PS : quand je place une hauteur par défaut ça règle le problème. Mais celui-ci n'est plus extensible
A voir également:
- Problème d'affichage
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
- Problème affichage page internet google chrome - Forum Téléphones & tablettes Android
- Pinterest problème affichage ✓ - Forum Réseaux sociaux
1 réponse
Salut,
plusieurs problèmes dans votr code (quand il ne s'agit pas d'erreur).
1) si vous utilisez des tailles en pixels votre site ne s'affichera jamais correctement partout. En effet 133px selon la résolution de l'utilisateur ne donnera jamais des proportions égales, donc ne s'affichera que comme vous le voulez pour quelqu'un qui par hasard aura la même taille (résolution/dimension) d'écran que vous. Sans parler d'une grande partie d'utilisateur qui utiliseront des écrans de leur mobiles/tablettes/netbook...
2)Le positionnement flottant(float) situe un élément hors du flux, il n'a donc plus aucun impact physique.
Pour ces 2 points je vous reccomande d'utiliser des dimensions proportionnelles.
3)Les tableaux HTML ne sont as fait pour positionner les éléments mais pour des données tabulaires(comme des tableaux de valeurs) si leur utilisation peut vous sembler pratique elle est contraire à la réglementation(W3C) en vigueur et contre productive car leur contenu n'est pas indexé par les outils de référencement.
C'est sur ce point l'erreur.
Essayez(en supprimant les tableaux pour utiliser des div de la même façon que conseillé ici) le code suivant:
.avatar{
display:inline-block;/*notez que nline-block prmet d'attribuer le comportement de balises de textes qui se mettront les unes à la suite pour des balises qui normalement font des retours à la line et en précisant que ce ne sont as des balises de textes*/
width:19%;
}
.textenews{
display:inline-block;
width:79%;
}
et en HTML:
<div class='avatar'><img src='#' /></div>
<div class='textenews'>Mon texte ici</div>
plusieurs problèmes dans votr code (quand il ne s'agit pas d'erreur).
1) si vous utilisez des tailles en pixels votre site ne s'affichera jamais correctement partout. En effet 133px selon la résolution de l'utilisateur ne donnera jamais des proportions égales, donc ne s'affichera que comme vous le voulez pour quelqu'un qui par hasard aura la même taille (résolution/dimension) d'écran que vous. Sans parler d'une grande partie d'utilisateur qui utiliseront des écrans de leur mobiles/tablettes/netbook...
2)Le positionnement flottant(float) situe un élément hors du flux, il n'a donc plus aucun impact physique.
Pour ces 2 points je vous reccomande d'utiliser des dimensions proportionnelles.
3)Les tableaux HTML ne sont as fait pour positionner les éléments mais pour des données tabulaires(comme des tableaux de valeurs) si leur utilisation peut vous sembler pratique elle est contraire à la réglementation(W3C) en vigueur et contre productive car leur contenu n'est pas indexé par les outils de référencement.
C'est sur ce point l'erreur.
Essayez(en supprimant les tableaux pour utiliser des div de la même façon que conseillé ici) le code suivant:
.avatar{
display:inline-block;/*notez que nline-block prmet d'attribuer le comportement de balises de textes qui se mettront les unes à la suite pour des balises qui normalement font des retours à la line et en précisant que ce ne sont as des balises de textes*/
width:19%;
}
.textenews{
display:inline-block;
width:79%;
}
et en HTML:
<div class='avatar'><img src='#' /></div>
<div class='textenews'>Mon texte ici</div>
CSS:
.news{
width:40%;//ici je donnes des dimensions arbitraires
}
img.avatar{
margin-right:2%;// on insère une marge de 2% de l'espace total sur le bord extrne droit(les 40% de la page)
}
HTML
<div class='news'>
<p>
<img src="#" class='avatar'/>Mon texte ici</p>
</div>
Pourquoi faire compliqué? Notez aussi que le texte utilise une balise adapté, un div est un fourre tout mais n'est pas un conteneur de texte valable(voir span aussi).
Pour les tableaux, je vois pas mal de site les utiliser pour des offres d'abonnement par exemple, ceux-ci sont il validé w3c ? Si c'est le cas le profil d'un membre (donc qui regroupe un certain nombre de données) peut-on utiliser des tableaux ?
Merci