Bonsoir,

Depuis un moment je galérais à maintenir mon footer en bas de la page, et centré.
J'ai donc suivi un tutoriel qui me conseillais de rajouter ça :

html
{
height:100%;
}

body
{
min-height:100%;
position:relative;
}

footer
{
position:absolute;
width:100%;
bottom: 0px;
}

Ça a pas mal changé ma mise en page, et mon problème est toujours là.
Après avoir ré-ajuster la mise en page, j'ai remarqué que les liens de mon menu de navigation ne fonctionnaient plus.
Je ne comprends vraiment pas ce qu'il s'est passé, d'autant plus que je n'ai pas touché au code du menu de navigation.
Donc mon menu de navigation ne marche plus, et mon footer n'est plus en bas de la page quand on zoom.
Je pense qu'il serait plus pratique de vous donner tout le code de ma page : Le lien

Le fichier HTML en question s'appelle menu.html, je n'ai pas eu le temps de corriger la mise en page des autres.
Et bizarrement le menu de navigation des autres fichiers fonctionne, alors qu'il dépendent du même fichier CSS.
Pourtant c'est exactement le même code, je suis confus

Merci d'avance et bonne soirée

-
Edité par FaretTizio 22 janvier 2020 à 21:38:29

bonsoir,

>> Je pense qu'il serait plus pratique de vous donner tout le code de ma page.

effectivement ce sera plus clair, ou un lien codepen ou l'url du site si il est en ligne.

Voir également 'la méthode moderne' => https://www.emmanuelbeziat.com/blog/un-site-qui-prend-toute-la-hauteur-disponible/ 

édit:  je viens de voir que tu as ajouté un lien, je regarde.

tu as indiqué pour la class    contenupage un positionnement absolut et pour ta navigation un position fixe. Cela à pour conséquence  de sortir du flux courant les deux éléments qui ce retrouve au même niveau sur l'axe des Z. (en gros l'un recouvre l'autre)

  Solution : donner un z-index plus élevé à ta navigation que ton contenu page.

Autre chose: tu as deux erreurs dans ta CSS,

Pour le sélecteur section margin-left: 40%+158.8px; n'est pas une valeur valide, si tu veux faire un calcul utilise la fonction calc(); Et des dixième de pixels cela n'existe pas.

Pour la class .navelement la propriété text-decoration-color: n'existe pas.

Évite autant que possible les width: 100%; surtout sur les block et pour les éléments positionner => lire https://raphaelgoetter.wordpress.com/2011/11/30/width-100-tu-es-le-mal/

Question organisation, tu devrais placer tes fichiers dans des répertoires distinct, ta page d'accueil doit s'appeler index.html. Un exemple de structure :

/index.html (ta page d'accueil)

/css/styles.css (ton fichier de style dans le répertoire de style)

/css/font/police.ttf (tous tes fichiers de police dans un répertoire spécifique)

/images/ (le répertoire contenant toutes tes images )

-
Edité par AbcAbc6 22 janvier 2020 à 22:25:59