28172 sujets

CSS et mise en forme, CSS3

Problème centrage footer sur fond étirable

Bonjour.

Voilà j'ai suivi les tutoriels d'Alsacréation et Openweb pour faire la chose suivante :

Un site dont le fond (dégradé de couleur) occupe toujours 100% de la fenêtre du navigateur,
puis j'ai intégrer un div comprenant un menu, fixé en haut de la page et centré.
Jusqu'ici tout va bien !
Les tuto sont vraiment bien fait et jusque là je ne rencontrais pas trop de problèmes.

Mais maintenant je veux ajouter un footer, centré, fixé au bas de la fenêtre du navigateur.
Je n'y arrive pas, deux solutions s'offrent à moi : soit il est bien collé au bas de la page mais s'obstine à rester à gauche... soit il se centre très bien mais juste en dessous de mon menu et non en bas de la page !!

J'ai modifier de plein de façons les positionnements de mes div. mais rien à faire...

Si quelqu'un à une solution ou une idée. J'ai déjà passé pas mal de temps à chercher sur des forums mais je n'ai rien trouvé qui concerne mon cas en particulier... J'ai essayé de bidouiller Smiley confus , mais rien non plus...

Un grand merci par avance !

CI dessous mon code.


<style type="text/css">
<!--
* {margin: 0; padding: 0;}
html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#arriere{
	position:absolute;/* si je met autre chose comme relative mon menu(et le footer selon sa position), 
	se met au dessus de l'image*/
	margin:0;
	width:100%;
	height:100%;
	z-index:1;
}
#arriere img{
	left:0;
	top:0;/*sans ces deux fonctions mon image est en dessous de mon menu...*/
	width : 100%;
	height: 100%;
	z-index:2;
}
#menu{
	position:relative;/*si je ne met rien ça disparait derrière le reste, si je met absolu ça n'est plus centré*/
	margin-left:auto;
	margin-right:auto;
	width:1024px;
	z-index:20;
}
#basdepage{
	position:relative;/*Si je mets absolute il reste bien en bas mais ne se centre plus, si je met fixed idem*/
	margin-left:auto;
	margin-right:auto;
	bottom:0px;
	width:1024px;
	z-index:21;
}
	
</style>


mon code html j'ai enlever le code de mon menu et footer swf, qui prend trop de place...

<body>
<div id="arriere" >
    
    <div id="menu" >
      mon objet flash menu</div>
    
    <div id="basdepage" align="center" >
     mon objet flash footer</div>

  <img id="arriere" alt="" src="../images/FOND-unicolor.jpg"/>

</div>
</body>
Bien alors pour ceux qui auraient eu le même problème que moi, j'ai trouvé la solution, finalement, un peu de bidouille, un énième relecture des tuto et pas mal de réflexion... m'ont conduit à la conclusion suivante :

En fait mon footer se mettais au bas du "calque" div#arrière et non au bas de la page... car il était positionner dans ce calque arrière. (j'aurais du mal à expliquer le pourquoi du comment... hélas).

J'ai donc placé, pour ce qui est du code html, mon div "bas de page" dans le <body> et non dans la balise div "arrière", et voilà, il faut ensuite remplacer mon
bottom:0px;

par
top:80%;

le pourcentage se calcul en fonction de la taille (hauteur), du swf compris dans ma balise div "bas de page"... ça c'est la partie bidouille.

Bon si quelqu'un à une meilleur explication... c'est cool parce que je ne sais pas trop pourquoi mon calque #arrière réagit de la sorte...

Merci par avance.
Modifié par chillie (16 May 2008 - 14:49)
Sujet clos
Aller à