Vilain Footer
Résolu/Fermé
valttt
Messages postés
279
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
27 octobre 2024
-
Modifié le 9 févr. 2022 à 10:36
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 - 9 févr. 2022 à 12:22
valttt Messages postés 279 Date d'inscription mercredi 7 mars 2012 Statut Membre Dernière intervention 27 octobre 2024 - 9 févr. 2022 à 12:22
3 réponses
Salut,
bon il aurait été préférable que tu mette le code incriminé directement plutôt qu'un lien ce qui oblige à aller chercher le code pour te répondre(et donc faire du travail en plus quand tu pouvait nous l'éviter).
Comme j'ai fait ce travail je peut te répondre.
Tout d'abord quelques explications sur ce qu'est le flux du document.
Le flux du document normal(par défaut) est l'ordre d'écriture des balises.
Donc le bas d'une page correspond au dernier(s) élément(s) écrits dans le HTML.
Bien sûr la question comme toute question de positionnement concerne le CSS.
Le CSS permet d'altérer et enrichir les propriétés de base des éléments.
Ainsi de modifier le flux et l'ordre d'apparition des balises HTML.
Rien n'empêche donc que ce qui apparaît en bas de la page dans le HTML soit placé en premier et inversement que le premier élément soit placé tout en bas.
Sauf bien sûr que ce n'est pas logique, contre-intuitif et complique tout.
Bon ceci étant dit quelques remarques sur le CSS:
Il faut à tout prix éviter d'utiliser des unités fixes pour les dimensions des éléments de la page pour utiliser des unités relatives.
Hors c'est ce qui est fait partout ici: le pixel est une unité fixe qui ne change pas en fonction des dimensions. Utiliser une valeur en pourcentage(unité écrite %) est à privilégier car une valeur en pourcentage d'une largeur ou hauteur sera forcément toujours adapté(et rendra donc la même mise en page) quelle que soit les dimensions de l'écran qui affiche la page(ou de la fenêtre quand celle ci est redimensionné).
Pour les tailles de polices c'est l'unité "em" à privilégier(1em = la taille normale du texte d'une hauteur de ligne, 2em deux fois la auteur de ligne, 1.5 une fois et demi, 0.5em la moitié de la hauteur de ligne normale et ainsi de suite. La hauteur de ligne pouvant changer suivant les utilisateurs-qui ont bien le droit de changer les tailles du texte affichées s'ils le veulent- et bien sûr les dimensions de l'écran et donc em permet de s'adapter à celle ci).
Cela vous oblige à utiliser les media querie qui n'ont ici pas vraiment d'utilité et ne répondront pas à tous les cas possibles.
Ceci étant dit ce n'est qu'une partie du problème ou plutôt la façon de résoudre votre problème.
Avec la propriété position passée en relative on change le flux normal du document d'une manière forte.
C'est le cas pour la classe .analyse(qui devrait plutôt être une ID vu que c'est un élément unique).
En positionnement relatif un élément est positionné relativement à son prédécesseur donc hors du flux(qui est donc oblitéré pour l'élément subissant ce changement), il n'est plus considéré comme occupant de place dans la page, sa place est uniquement relative et seule les dimensions seront prises en compte à partir de son emplacement relatif(créant facilement des bugs ou faille dans la mise en page).
Un positionnement en utilisant des tailles relatives(% généralement mais il y en a d'autres) va donc résoudre ce problème et éviter de forcer les positions hors de l'ordre normal des balises.
Tandis que les différentes valeurs possibles de la propriété CSS display indiquent si les éléments doivent se suivre à la ligne(de texte) ou en tant que bloc à la suite(selon la taille restante disponible) le changement de la valeur position(en relatif ou absolu) supprime totalement l'ordre définit par display bien sûr(qui a une valeur par défaut selon si l'élément est plus un bloc ou un élément de texte). Indiquer les 2 (position relatif ou absolu et display est donc inutile puisque l'un supprime l'autre).
Il y a un autre problème qui empêche sur mon écran(en 1920X1080) que le footer et son contenu (un paragraphe de texte) soit visible.
C'est la propriété z-index qui va permettre de gérer les chevauchements éventuels d'éléments. Toujours pour la classe .analyse
Bien sûr cela va avec mes remarques précédentes sur le flux. Dans le flux normal aucun élément ne peut se chevaucher/superposer puisque ceux ci sont à la suite dans l'ordre de leur écriture.
Ce qui change quand la position est relative ou absolu(relative à l'élément précédent ou absolu par rapport au coin en haut à gauche de la page) et implique que des éléments peuvent se superposer.
La mauvaise façon de corriger votre bug d'affichage est d'indiquer un z-index supérieur à 5(pourquoi 5 d'ailleurs sans modification les éléments ont un z-index de 0, en cas de superposition de 2 éléments le second dans l'ordre d'écriture-le flux normal- prendra une valeur supérieure de 1, donc si 2 éléments se superposent le second écrit aura un z-index de 1) pour le footer et de modifier la position relative de s'assurer que celui ci soit bien dans les limites de la taille de la page(100% en hauteur et largeur). Il y a des calculs complexes à faire et qui selon les dimensions des écrans peuvent varier donc ça implique des bugs possible dans certains cas(à tester en redimensionnant et rechargeant la page pour différentes tailles d'écrans vous verrez c'est pas facile à gérer).
La bonne solution est de revoir entièrement votre CSS pour rester dans le flux et indiquer des dimensions en pourcentages afin de garantir que l'ensemble des contenus soient adaptés à la mise en page voulue. Ce qui évite de devoir se prendre la tête avec des éléments hors du flux et ainsi les bugs/différences d'affichages possibles. Si tout le contenu hormis le footer prends une hauteur totale de 90% ou 140% et que le footer à une hauteur de 10% la hauteur de la page sera toujours de 100%(le reste + le footer) ou de 150% selon que l'on veut qu'il y ait du contenu à scroller pour afficher le bas de page ou une page entière affichée dans tout les cas sans avoir besoin de scroller.
Meilleure façon de gérer les positions et qui évite d'avoir à utiliser les media queries dans les grandes lignes. Attention je dit pas que les media queries ne sont pas utiles mais elles sont utiles pour d'autres raisons et positionnement, gérer les grands écarts de tailles et différentes mises en pages possibles(si un écran est en mode portrait ou en mode paysage la mise en page peut ne pas correspondre à 2 types de rapport largeur/hauteur et donc peut être changé par les media queries).
Ici cela ne semble pas nécessaire et est employé d'une façon qui nécessiterait de faire une régle pour chaque taille d'écran possible.
Exemple:
n'est pas tellement différent de
et donc pas vraiment un impact sur la mise en page et affichage tandis qu'avec
(qui me semble la valeur par défaut d'ailleurs) va rendre la taille de la police du titre principal adaptative à tout les affichages RELATIVEMENT à la valeur d'une ligne de texte pour chaque utilisateur.
Bref mon exemple pour montrer qu'ici vous vous compliquer la vie inutilement en changeant une valeur par défaut qui peut rester la même et donc écrivez du code inutilement en impliquant soit un changement mineur et invisible (ou quasiment) qui ne sera pas adapté dans tout les cas(tester pour voir, par exemple dans la console de Firefox et Chrome il y a les vues possibles sur téléphones mobiles avec les tailles associées) et peut facilement provoquer des bugs, autant s'en passer alors.
Même chose évidemment en sortant les éléments hors du flux quand vous pouvez utiliser des rapports de taille proportionnels pour les largeurs et hauteurs des éléments de la page.
Bien sûr les positionnements relatifs et absolus peuvent avoir leur utilité(et aussi utiliser des valeurs proportionnelles pour top, right, bottom et left qui vont indiquer un décalage dans une des quatres directions si nécessaire) et gérer des superpositions plus complexes ou impossibles dans le flux mais bon ce sont des cas particulier pas toujours adapté à la mise en page(ou alors il vaut mieux tout passer en relatif ou absolu pour rester facilement cohérent).
Pas de règles absolu mais des possibilités et habitudes ou méthodes de travail qui vont diverger pour chacun, pour chaque cas mais éviter de se compliquer la vie et de permettre l'apparition d'erreurs/bug d'affichage reste une bonne pratique universelle :))
bon il aurait été préférable que tu mette le code incriminé directement plutôt qu'un lien ce qui oblige à aller chercher le code pour te répondre(et donc faire du travail en plus quand tu pouvait nous l'éviter).
Comme j'ai fait ce travail je peut te répondre.
Tout d'abord quelques explications sur ce qu'est le flux du document.
Le flux du document normal(par défaut) est l'ordre d'écriture des balises.
Donc le bas d'une page correspond au dernier(s) élément(s) écrits dans le HTML.
Bien sûr la question comme toute question de positionnement concerne le CSS.
Le CSS permet d'altérer et enrichir les propriétés de base des éléments.
Ainsi de modifier le flux et l'ordre d'apparition des balises HTML.
Rien n'empêche donc que ce qui apparaît en bas de la page dans le HTML soit placé en premier et inversement que le premier élément soit placé tout en bas.
Sauf bien sûr que ce n'est pas logique, contre-intuitif et complique tout.
Bon ceci étant dit quelques remarques sur le CSS:
Il faut à tout prix éviter d'utiliser des unités fixes pour les dimensions des éléments de la page pour utiliser des unités relatives.
Hors c'est ce qui est fait partout ici: le pixel est une unité fixe qui ne change pas en fonction des dimensions. Utiliser une valeur en pourcentage(unité écrite %) est à privilégier car une valeur en pourcentage d'une largeur ou hauteur sera forcément toujours adapté(et rendra donc la même mise en page) quelle que soit les dimensions de l'écran qui affiche la page(ou de la fenêtre quand celle ci est redimensionné).
Pour les tailles de polices c'est l'unité "em" à privilégier(1em = la taille normale du texte d'une hauteur de ligne, 2em deux fois la auteur de ligne, 1.5 une fois et demi, 0.5em la moitié de la hauteur de ligne normale et ainsi de suite. La hauteur de ligne pouvant changer suivant les utilisateurs-qui ont bien le droit de changer les tailles du texte affichées s'ils le veulent- et bien sûr les dimensions de l'écran et donc em permet de s'adapter à celle ci).
Cela vous oblige à utiliser les media querie qui n'ont ici pas vraiment d'utilité et ne répondront pas à tous les cas possibles.
Ceci étant dit ce n'est qu'une partie du problème ou plutôt la façon de résoudre votre problème.
Avec la propriété position passée en relative on change le flux normal du document d'une manière forte.
C'est le cas pour la classe .analyse(qui devrait plutôt être une ID vu que c'est un élément unique).
En positionnement relatif un élément est positionné relativement à son prédécesseur donc hors du flux(qui est donc oblitéré pour l'élément subissant ce changement), il n'est plus considéré comme occupant de place dans la page, sa place est uniquement relative et seule les dimensions seront prises en compte à partir de son emplacement relatif(créant facilement des bugs ou faille dans la mise en page).
Un positionnement en utilisant des tailles relatives(% généralement mais il y en a d'autres) va donc résoudre ce problème et éviter de forcer les positions hors de l'ordre normal des balises.
Tandis que les différentes valeurs possibles de la propriété CSS display indiquent si les éléments doivent se suivre à la ligne(de texte) ou en tant que bloc à la suite(selon la taille restante disponible) le changement de la valeur position(en relatif ou absolu) supprime totalement l'ordre définit par display bien sûr(qui a une valeur par défaut selon si l'élément est plus un bloc ou un élément de texte). Indiquer les 2 (position relatif ou absolu et display est donc inutile puisque l'un supprime l'autre).
Il y a un autre problème qui empêche sur mon écran(en 1920X1080) que le footer et son contenu (un paragraphe de texte) soit visible.
C'est la propriété z-index qui va permettre de gérer les chevauchements éventuels d'éléments. Toujours pour la classe .analyse
Bien sûr cela va avec mes remarques précédentes sur le flux. Dans le flux normal aucun élément ne peut se chevaucher/superposer puisque ceux ci sont à la suite dans l'ordre de leur écriture.
Ce qui change quand la position est relative ou absolu(relative à l'élément précédent ou absolu par rapport au coin en haut à gauche de la page) et implique que des éléments peuvent se superposer.
La mauvaise façon de corriger votre bug d'affichage est d'indiquer un z-index supérieur à 5(pourquoi 5 d'ailleurs sans modification les éléments ont un z-index de 0, en cas de superposition de 2 éléments le second dans l'ordre d'écriture-le flux normal- prendra une valeur supérieure de 1, donc si 2 éléments se superposent le second écrit aura un z-index de 1) pour le footer et de modifier la position relative de s'assurer que celui ci soit bien dans les limites de la taille de la page(100% en hauteur et largeur). Il y a des calculs complexes à faire et qui selon les dimensions des écrans peuvent varier donc ça implique des bugs possible dans certains cas(à tester en redimensionnant et rechargeant la page pour différentes tailles d'écrans vous verrez c'est pas facile à gérer).
La bonne solution est de revoir entièrement votre CSS pour rester dans le flux et indiquer des dimensions en pourcentages afin de garantir que l'ensemble des contenus soient adaptés à la mise en page voulue. Ce qui évite de devoir se prendre la tête avec des éléments hors du flux et ainsi les bugs/différences d'affichages possibles. Si tout le contenu hormis le footer prends une hauteur totale de 90% ou 140% et que le footer à une hauteur de 10% la hauteur de la page sera toujours de 100%(le reste + le footer) ou de 150% selon que l'on veut qu'il y ait du contenu à scroller pour afficher le bas de page ou une page entière affichée dans tout les cas sans avoir besoin de scroller.
Meilleure façon de gérer les positions et qui évite d'avoir à utiliser les media queries dans les grandes lignes. Attention je dit pas que les media queries ne sont pas utiles mais elles sont utiles pour d'autres raisons et positionnement, gérer les grands écarts de tailles et différentes mises en pages possibles(si un écran est en mode portrait ou en mode paysage la mise en page peut ne pas correspondre à 2 types de rapport largeur/hauteur et donc peut être changé par les media queries).
Ici cela ne semble pas nécessaire et est employé d'une façon qui nécessiterait de faire une régle pour chaque taille d'écran possible.
Exemple:
h1 {
font-size: 26px;
}
n'est pas tellement différent de
h1 {
font-size: 24px;
}
et donc pas vraiment un impact sur la mise en page et affichage tandis qu'avec
h1 {
font-size: 2em;
}
(qui me semble la valeur par défaut d'ailleurs) va rendre la taille de la police du titre principal adaptative à tout les affichages RELATIVEMENT à la valeur d'une ligne de texte pour chaque utilisateur.
Bref mon exemple pour montrer qu'ici vous vous compliquer la vie inutilement en changeant une valeur par défaut qui peut rester la même et donc écrivez du code inutilement en impliquant soit un changement mineur et invisible (ou quasiment) qui ne sera pas adapté dans tout les cas(tester pour voir, par exemple dans la console de Firefox et Chrome il y a les vues possibles sur téléphones mobiles avec les tailles associées) et peut facilement provoquer des bugs, autant s'en passer alors.
Même chose évidemment en sortant les éléments hors du flux quand vous pouvez utiliser des rapports de taille proportionnels pour les largeurs et hauteurs des éléments de la page.
Bien sûr les positionnements relatifs et absolus peuvent avoir leur utilité(et aussi utiliser des valeurs proportionnelles pour top, right, bottom et left qui vont indiquer un décalage dans une des quatres directions si nécessaire) et gérer des superpositions plus complexes ou impossibles dans le flux mais bon ce sont des cas particulier pas toujours adapté à la mise en page(ou alors il vaut mieux tout passer en relatif ou absolu pour rester facilement cohérent).
Pas de règles absolu mais des possibilités et habitudes ou méthodes de travail qui vont diverger pour chacun, pour chaque cas mais éviter de se compliquer la vie et de permettre l'apparition d'erreurs/bug d'affichage reste une bonne pratique universelle :))
T3chN0g3n
Messages postés
5102
Date d'inscription
samedi 16 février 2019
Statut
Membre
Dernière intervention
22 novembre 2024
1 137
Modifié le 9 févr. 2022 à 12:19
Modifié le 9 févr. 2022 à 12:19
Bonjour,
Sans remettre en question le fait que ça mériterait une mise au propre,
C'est le décalage
Cdlt.
Sans remettre en question le fait que ça mériterait une mise au propre,
C'est le décalage
topde la classe
.analysequi pose problème, gardez uniquement le
margin-top(en le mettant à 220px )
Cdlt.
valttt
Messages postés
279
Date d'inscription
mercredi 7 mars 2012
Statut
Membre
Dernière intervention
27 octobre 2024
16
9 févr. 2022 à 12:22
9 févr. 2022 à 12:22
Merci pour cette leçon particulière très complète et personnalisée.
Je vais me souvenir de celle-ci à l'avenir ;-)
Merci aussi à T3chN0g3n.
Mil merci encore ;-)
Je vais me souvenir de celle-ci à l'avenir ;-)
Merci aussi à T3chN0g3n.
Mil merci encore ;-)