Positionner correctement footer
txiki
Messages postés
6819
Date d'inscription
Statut
Contributeur
Dernière intervention
-
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention -
Dalida Messages postés 7114 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
J'ai de gros soucis avec mon footer qui ne veut pas rester à sa place (en bas de page). j'ai testé des façons comme vu ici, et ailleurs du reste mais sans résultats.
Vous pouvez voir le résultat sur: http://txiki.free.fr
Merci d'avance pour vos réponses. (PS) je suis au bureau donc je ne peux pas vous donner la css mais elle est accessible sur le site pour qui sait (je ne précisa pas plus). ;-)
J'ai de gros soucis avec mon footer qui ne veut pas rester à sa place (en bas de page). j'ai testé des façons comme vu ici, et ailleurs du reste mais sans résultats.
Vous pouvez voir le résultat sur: http://txiki.free.fr
Merci d'avance pour vos réponses. (PS) je suis au bureau donc je ne peux pas vous donner la css mais elle est accessible sur le site pour qui sait (je ne précisa pas plus). ;-)
A voir également:
- Positionner correctement footer
- Positionner des points sur une carte - Guide
- Un cable reseau n'est pas branché correctement ou est endommagé ✓ - Forum Windows 7
- Les configurations ipv4 utilisateur peuvent ne pas fonctionner correctement en raison de l'architecture de routage ipv6 wan actuelle. ✓ - Forum Réseau
- Colombe souhaite utiliser cette image comme illustration. quel texte doit-elle ajouter pour attribuer correctement la photographie à son auteur ? - Forum Matériel & Système
- Dans le document à télécharger, léa a utilisé 2 méthodes différentes pour centrer le nom des continents. lesquels sont centrés correctement ? ✓ - Forum Javascript
2 réponses
salut,
il faut faire sauter le {position:absolute;} sur <div#banner> et <div#content>, tu les sors du flux de positionnement donc le navigateur ne tient pas compte d'eux au moment de représenter le pied de page.
par ailleurs, pour ta bannière il faut ajouter du contenu et mieux vaut éviter de mettre des accents aux attributs :
tu décales tous les autres titres d'un niveau et tu mets la bannière en page comme ça :
et pour ce bout
<div> est aussi de type bloc, il est plus utile d'utiliser un <p> pour mettre du texte, pour la hauteur il faut supprimer les marges au <p> :
il faut faire sauter le {position:absolute;} sur <div#banner> et <div#content>, tu les sors du flux de positionnement donc le navigateur ne tient pas compte d'eux au moment de représenter le pied de page.
par ailleurs, pour ta bannière il faut ajouter du contenu et mieux vaut éviter de mettre des accents aux attributs :
<div id="banniere"> <h1>Titre du document</h1> </div>
tu décales tous les autres titres d'un niveau et tu mets la bannière en page comme ça :
div#banniere h1{
margin:5px 0 10px 0;
display:block;
text-indent:-1000em;
overflow:hidden;
height:100px;
width:790px; /* plus large que <body> ??? */
background-image:url(../Images/bandeau_terre.gif);
background-position:0 0;
background-repeat:no-repeat;
}
et pour ce bout
<div class="date"><!-- on utilise un plutôt qu'un p à cause de la petite hauteur (p est de type bloc) -->
<div> est aussi de type bloc, il est plus utile d'utiliser un <p> pour mettre du texte, pour la hauteur il faut supprimer les marges au <p> :
p{
margin:0;
}
pour le <p> c'est les marges par défaut définies dans la feuille de style par défaut du navigateur.
pour le menu, il faut qu'il soit en {position:absolute;} pour son fonctionnement, ok.
donc tu laisses le {position:absolute;}, il a comme référence de positionnement son premier ascendant (conteneur) qui a {position:relative;} ou <body> si aucun ascendant avec {position:relative;}.
pour le moment il se réfère aux propriétés de <body> ('left', 'top') pour se positionner et c'est ce qui met le bronx dans ta mise en page.
tu peux annuler ce comportement en mettant ton menu dans un <div> auquel tu appliques {position:relative;} et tu positionnes le menu dans la page en positionnant ce <div> (sans doute un flottement gauche).
voili, voila, bon courage pour la suite et bon week end !
-;o)
(et le lien du site de ta cop's est raide mort…)
pour le menu, il faut qu'il soit en {position:absolute;} pour son fonctionnement, ok.
donc tu laisses le {position:absolute;}, il a comme référence de positionnement son premier ascendant (conteneur) qui a {position:relative;} ou <body> si aucun ascendant avec {position:relative;}.
pour le moment il se réfère aux propriétés de <body> ('left', 'top') pour se positionner et c'est ce qui met le bronx dans ta mise en page.
tu peux annuler ce comportement en mettant ton menu dans un <div> auquel tu appliques {position:relative;} et tu positionnes le menu dans la page en positionnant ce <div> (sans doute un flottement gauche).
voili, voila, bon courage pour la suite et bon week end !
-;o)
(et le lien du site de ta cop's est raide mort…)
pour la hauteur il faut supprimer les marges au <p> :
p{
margin:0;
}
ça, je ne savais pas. Et la css c'est une fille qui l'a faite en suivant les cours sur le site du zéro (15 jours) alors qu'elle n'y connaissait absolument rien !
Je l'ai un peu tuyauté mais c'est tout.
==> Si je fais cela, les menus ne fonctionnent plus. ça, je ne comprends pas non plus. J'avais utilisé une méthode d'Alsacréation en englobant tous les div par un div container. Et ça, ça ne fonctionne pas.
Je vais tester dès ce soir ta méthode (tu a certainement raison !).
Merci infiniment en tous cas.
le site de la fille se trouve provisoirement à: http://natld.free.fr
Mais sans menu dynamique. Moi, je veux lui montrer comment intégrer un menu via php. On se voit ce week end pour ça.