[Résolu] [Amateur] positionnement du pied de page

Bonjour,

Travaillant sur le concept de blocks imbriqués, j'ai fait évoluer la présentation de mon site (cf http://lepaysdusoleil.com).

Mais, je bute sur un problème de positionnement de blocks: je n'arrive pas à faire en sorte que le pied de page se positionne tout en bas de page, en-dessous des textes et de la photo de fond. Pour une raison que j'ignore il se met en-dessous du block aside, mais pas en dessous du block article ni de la photo de fond (id="paysage").

Quelqu'un pourrait-il me donner un coup de main avant que je m'arrache tous les cheveux...?
Voici où est localisé mon espace de travail: http://lepaysdusoleil.com

merci d'avance

salut,
c'est plus une question d'ordre général. On pourrait sans doute aisément trouver une solution à ton cas actuel mais le vrai problème est le mauvais choix du type de positionnement.
Tu es entrain de passer par des positions absolues un peu partout, tout en utilisant des tailles fixes de hauteur.
Je pense que le meilleur conseil que tu pourrais avoir serait de prendre un tout petit peu de temps pour comprendre les bases du positionnement.

merci
Je vais étudier ce lien en détail
J'ai mis le sujet dans la rubirque CSS, parce que cela concerne essentiellement les propriétés block / position en CSS.


Sur les positionnement absolus, j'en ai seulement 2: l'entête et la photo de fond
En ce qui concerne l'entête, cela ne semble pas apporter grand chose. A l'origine, je l'avais mis parce que je voulais qu'elle reste fixe.

En ce qui concerne l'image de fonds, c'est la seule manière que j'ai trouvé pour faire en sorte que l'entête et cette image de fond se superposent exactement.

Merci Zelalsan

J'ai lu tous les tutos sur le sujet, j'ai appris pas mal, mais cela ne me résout pas le problème:
1) continuer à avoir mon image de fond qui bouge avec le corps et le pied-page et passe sous l'entête, tout en faisant coincider parfaitement le haut de la photo dans l'entête et l'image de fond
2) avoir le pied de page tout en bas, en-dessous de l'image de fond, en-dessous des blocks article et aside

Que puis-je changer dans mon code pour y arriver?

merci d'avance

lepaysdusoleil.com

Autre façon de poser la question: comment faire en sorte que la hauteur de mon contenant <div class="blocpage"></div> correspondent à la hauteur la plus grande entre celles des sous-contenant <div class="paysage"></div> et section.

La taille de section elle-même étant déterminée par article et aside.


Blocpage ( paysage et section (article , aside))

height de Blocpage = max height (paysage, section)
height de section = max height (article, aside)

www.lepaysdusoleil.com

La propriété position:fixed pourrait être la solution si tu veux pas faire bouger le fond de la page.

page_avec_fond { position:fixed; }

Sinon aussi tu peux étudier la façon d'adapter la propriété background-attachment:fixed
qui permet de ne pas bouger le fond même si on fait défiler la page.

Merci

Dans la version http://lepaysdusoleil.com/test1/
Je suis arrivé à obtenir le rendu que je voulais: entête reste fixe et le corps remonte sous l'entête
Par contre, je n'arrive pas à faire en sorte que le pied de page se positionne en-dessous la colonne "aside" (cartouche à droite avec les mini photos). Le pied de page se met au-dessus.
Aurais-tu une idée pour faire en sorte que le pied de page flote et ne se superpose pas?

Dans la version http://lepaysdusoleil.com/test3/
J'ai fait ce que tu préconises: fixer la photo de fond
Dans ce cas, je n'arrive pas à faire en sorte que le pied de page se positionne en-dessous la colonne "aside" (cartouche à droite avec les mini photos). Cette fois, le pied de page se met en dessous.
Aurais-tu une idée pour faire en sorte que le pied de page flote et ne se retrouve pas avec la colonne superposée dessus?

Dans la version http://lepaysdusoleil.com
Idem, j'ai fait ce que tu préconises: fixer la photo de fond.
Mais dans ce cas, pour une raison que j'ignore, le pied de page explose complétement.
Aurais-tu une idée?

Bonjour,
pour les 2 premières versions, si tu mettais

footer {
   ...
   margin-top: 200px;
}

Pour la 3eme version, il y a un problème la page du site ne voit pas la feuille de style ?
Modifié par Chriss2014 (08 Oct 2014 - 16:52)

merci
voici le CSS de la 3e version:
body
{
margin: 0;
top:0;
text-align:center;
}

#fond { z-index: 2; display: block; position: absolute;
background:url("images/oliviersfondnt.jpg") no-repeat center top fixed;
background-size: cover;
top:0; right:0; left:0; margin: 0 auto;}

/* HEADER */

#entete{ display: block;
position: fixed;
/* background:url("images/panoramasierramagina2b.jpg") no-repeat center top fixed; */
height: 180px;
position: fixed; margin:0 auto; top:0; left:0; right:0; text-align:center; z-index: 8;}

header { display: block; width: 900px; position:relative; top:0; margin:0 auto; padding:0; /* z-index: 2; */}
#langues { border:0 none; float:left; top: 10px; margin:0; padding:0; /* z-index: 3; */}
.icon{ position:relative; float: left; margin-left:2px; padding:0; border:0; width:32px; height:32px;}
header h1
{margin:auto; padding:0; font-family: "Trebuchet MS",Arial,Verdana; color: #0E1E11; /* couleur vert foncé*/
font-style: normal; font-weight: bold; font-size: 3em; text-align: center; }
header h2
{margin:auto; padding:0; font-family: "Trebuchet MS",Arial,Verdana; color: green; /* couleur vert*/
font-style: normal; font-weight: bold; font-size: 1.5em; text-align: center;}

/* MENU */
#menu { display:block; width: 57em; position:relative;
margin:0 auto; /* pour centrer le menu */
padding:0; /* pas de marge intérieure */
list-style : none; /* on supprime le style par défaut de la liste */
height:40px; /* on définit une hauteur pour chaque élément (line-height?)*/
text-align:center; /* on centre le texte qui se trouve dans la liste */
font-weight: bold; /* on met le texte en gras */
font-family: Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size: 14px; /* hauteur du texte : 14 pixels */
z-index: 9; }

dl /* Définir chaque boîte menu+sous-menus */
{
margin:0; padding:0;
background : #0E1E11; /* couleur de fond vert foncé*/
display:block; float:left; /* aligner les menus sur la droite */
}
dt /* Terme à définir: chaque élément principal du menu */
{
width:14em; /* largeur initialement 144px*/
margin:0; padding:0;
color:white;
font-weight:bold;
text-align:center;
height:40px;
line-height:40px;
border-right: dotted 1px #C98C51;
cursor:pointer;
}
dt a /* Definir style des liens des éléments du menu */
{
margin:0; padding:0;
text-decoration: none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
color: white; /* couleur du texte */
font-weight:bold;
text-align:center;
}
dt:hover
{
color:#006900; /* texte vert foncé */
background:#A9CEAE; /* vert très pale quand on pose la souri sur le sous-menu*/
}

dt:visited /* lien visité une fois */
{
background:#0E1E11; /* couleur de fond vert foncé*/
color:white; /* texte vert foncé */
}

/* sous-menus */

dd /* Définition du terme: la boîte sous-menu */
{ display: block;
padding: 0; margin : 0;/* pas de marge intérieure ni extérieure */
background: #7A8129; /* une fois sélectionné le menu apparait les sous-menus dans un vert kaki */
/* z-index: 2; */ /* pour que cela apparaisse au-dessus du reste */
}

dd ul /* Définition du terme: l'ensemble des éléments de la boîte sous-menu */
{
display: block;
padding: 0; margin : 0;/* pas de marge intérieure ni extérieure */
background: #7A8129; /* une fois sélectionné le menu apparait les sous-menus dans un vert kaki */
height: 30px;
line-height : 30px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
width: 14em; /* Largeur des sous-listes initialement 144px*/
border-top:dotted 1px #C98C51; /* pour IE qui ne reconnaît pas "transparent" */
border-bottom:dotted 1px #5A3C20; /* pour IE qui ne reconnaît pas "transparent" */
/* z-index: 2; */ /* pour que cela apparaisse au-dessus du reste */
}
dd ul li /* Définition du terme: chaque élément de la boîte sous-menu */
{
display:block;/* fait en sorte que les liens prennent toute la largeur des sous-menus */
margin:0; padding:0; /* fait en sorte que les liens prennent toute la largeur des sous-menus */
background: #647762; /* une fois sélectionné le menu apparait les sous-menus dans un vert kaki #7A8129*/
/* z-index: 2; */ /* pour que cela apparaisse au-dessus du reste */
}

dd ul li a /* Définition du terme: chaque liens contenu dans un élément de la boîte sous-menu */
{
display:block;
color:white; /* marron clair: #C98C51 */ /* blanc = #fff */
text-decoration: none; /* pas souligner */
width:200px;
height:30px;
line-height:30px;
border-top:dotted 1px #C98C51;
border-bottom:dotted 1px #5A3C20;
/* z-index: 2; */ /* pour que cela apparaisse au-dessus du reste */
}

dd ul li a:hover /* sélection du sous-menu */
{
background:#A9CEAE; /* vert très pale quand on pose la souri sur le sous-menu*/
color:#006900;
/* z-index: 2; */
}

/* fait que les sous menus ne s'affiche que quand on s'approche avec la souris */
dl dd { display:none;}
dl:hover dd{ display:block; }

/* CORPS */


#blocpage{display: block; position:relative; top:0; margin: o auto; }

Section{ z-index: 4; display:block; position: relative; width: 1100px; top:180px; margin:0 auto;}

article, aside { z-index: 4; display: inline-block; vertical-align: top; text-align: justify; margin-top: 30px; }

article {width:860px; float: left;}

/* ENCART */
.titre-encart /* style du titre de l'encart */
{
z-index: 4;
display:block;
position:relative;
margin: 0 auto;
width:400px;
padding:0;
color: green;
font-family: "Trebuchet MS",Arial,Verdana;
font-style: normal;
font-weight: bold;
font-size: 2em;
text-transform: capitalize;
text-align: center;
background-color: white;
border: 5px green;
}
.encart
{
z-index: 4;
display: block;
position:relative;
width:820px;
margin: 0 auto; /* equivaut à margin-left: auto; margin-right: auto; pour centrer l'encart */
padding:10px;
border: 8px solid #647762;
text-align:justify;
text-justify:newspaper;
color:black; /* couleur police et des bullets points */
font-family:"Trebuchet MS", Arial, Verdana;
font-style:normal;
font-weight:normal;
/* overflow:auto; */ /* Gère le dépassement, si le texte dépasse la hauteur de l'encart, automatiquement le navigateur permet le scroll */
background-color: rgb(255,255,255); /* navigateurs ne gérant pas la transparence */
background-color: rgba(255,255,255,0.7);
}

.encart h1
{
display: block;
position: relative;
margin-top:auto; padding:0;
color: green;
font-family: "Trebuchet MS",Arial,Verdana;
font-style: normal;
font-weight: bold;
font-size: 2.5em;
text-transform: capitalize;
text-align: center;
}
.encart h2
{
margin-top:auto; padding:0;
color: black;
font-family: "Trebuchet MS",Arial,Verdana;
font-style: normal;
font-weight: bold;
font-size: 1.5em;
}
.encart a
{
text-decoration:none;
color: black;
font-family: "Trebuchet MS",Arial,Verdana;
font-style: normal;
font-weight: normal;
font-size: 1.2em;
}

.encart a:hover /* Apparence au survol des liens */
{
text-decoration:underline;
color: blue;
}
.encart a:visited /* lien visité une fois */
{
text-decoration: none;
color: #002200; /* vert foncé */
}


/* IMAGES INCRUSTÉES */
.imageflottante
{
float: left;
border: none;
}
.sousflottante
{
clear: both;
}


/* Colonne droite */
aside
{ /* margin-top:55px; */
float:left;
width: 200px; /* taille de l'encart droit */
background-color: #647762;
box-shadow: 0px 2px 5px #1c1a19;
border-radius: 5px; /* bordure arrondie */
padding: 10px; /* marge intérieure */ /* article + marge + encart droit + bordure arrondie + marge intérieure = 890px */
color: white;
font-size: 0.9em;
margin-left: 20px}

aside img{ margin-right: 5px;}
#fleche_bulle{ position: absolute; top: 100px; left: -12px;}

.photoencart{ text-align: center;}
.photoencart figure{ position: relative; margin: auto;}
.photoencart img{ border: 1px solid #181818;}
.photoencart p {color: black;font-size: 1.3em;}

.warning
{
position: relative;
margin: auto;
padding: 5px;
text-align: center;
width: 160px; /* taille du warning */
border-radius: 5px; /* bordure arrondie */
background-color: red;
color: white;
font-weight: bold;
font-size: 1.2em;
}

.bandebas {clear:both; width:100%;background-color: blue; )

.texte
{ z-index: 5;
display: block;
position:relative;
width:1000px;
top: 185px;
margin: 0 auto; /* equivaut à margin-left: auto; margin-right: auto; pour centrer l'encart */
padding:10px;
text-align:justify;
text-justify:newspaper;
color:black; /* couleur police et des bullets points */
font-family:"Trebuchet MS", Arial, Verdana;
font-style:normal;
font-weight:normal;
background-color: rgb(255,255,255);}



/* Footer */

footer{ z-index: 4;
display: block;
background-color: white;
border-bottom: 1px solid black;
border-top: 1px solid black;
padding-bottom:20px;
margin-top:10px; }

footer p { font-size: 0.8em;}
footer ul { font-size: 1em;}
footer h1{ font-size: 1.1em;}

#bas { width:1100px; display:block; position: relative; margin:0 auto; z-index:6; }
#contact, #legal, #liens { width:900px; display: inline-block; vertical-align: top; text-align: left;}
#contact{ width: 35%;}
#contact a{ text-decoration: none; color: #181818;}
#legal{ width: 32%;}
#liens{ width: 30%;}

#legal ul
{
display: inline-block;
vertical-align: top;
margin-top: 0;
width: 70%;
list-style-image: url('images/ico_liensexterne.png');
padding-left: 2px;
}
#legal a{ text-decoration: none; color: #760001;}
#liens a{ text-decoration: none; vertical-align: center; width: 95%; border: none;}

merci Chriss2014

cela marche impecable (c'est tellement simple que j'en ai un peu honte...)
juste, peux tu m'expliquer pourquoi?
pourquoi il faut mettre une marge de 200px pour éviter le chevauchement et pourquoi, le footer ne se met pas immédiatement après.

Comme tu as l'air de vraiment maîtriser, j'aimerais te poser une autre question:
La version http://lepaysdusoleil.com/test3/ avec le background-size: cover me parait la plus esthétique car le fond couvre l'écran quoiqu'il arrive.
Par contre, comment pourrais-je faire pour que le corps du site, quand je le fais défiler passe sous l'entête comme en http://lepaysdusoleil.com/test1/? Parce que le fait de le voir passer en transparence dans l'entête est, par contre, assez laid...?

merci d'avance

Bonjour,
Amateur, juste amateur
et j'ai utilisé 'examiner l'élément' de Firefox et fait des tests.. (mais chut c'est mon secret )

je peut juste répondre à ta première question...le margin-top de <footer> est par rapport à

<div id="blocpage"> et non par rapport à <aside>.
Si je ne me trompe pas.

J'ai trouvé: il suffit de mettre 2 fois la même image avec l'instruction cover: 1 fois dans l'entête fixe et 1 fois dans le fond fixe. Le z-index de l'entête étant supérieur.

merci à tous, en tout cas, pour vos commentaires