28172 sujets

CSS et mise en forme, CSS3

Pbs de mise en forme d'une page d'index

Débutant en CSS, j'ai réalisé une page web décomposé comme suit :
- l'entête : une banniere
- un menu à gauche
- la page principale à droite du menu
- un pied de page

Le problème est que le pied de page sous FF change de position mais ne se trouve jamais en bas du "cadre" que j'ai défini. La phrase écrite "Site crée par..." apparait tout en bas à gauche mais dépasse la largeur du cadre défini à 960px, et le fond que j'ai mis en bleu pour comprendre, apparait tout en haut à gauche, toujours en dehors du cadre de 960px...

Sous IE6, ça fonctionne correctement mais je ne vois pas d'où vient le problème?

Merci d'avance !

- #cadre : le cadre définit la largeur maximale utilisé pour le site, soit 960px et je l'ai centré à l'aide de margin-left et right
- #banniere : l'entête est constitué d'une banniere de la largeur max 960px et longeur 250px (la même taille que l'image)
- #menu : j'ai ensuite placé le menu sous l'entête en utilisant la propriété "float: left" et définit la largeur max à 170px
- #contenu : la page du contenu est collé au menu, j'ai donc de nouveau utilisé "float:left" et définit le reste de la largeur max à 790px, ce qui fait avec le menu au total 960px
- #piedpage : j'ai définis la largeur max à 960px également

Code CSS :

#cadre {
width: 960px;
margin-left: auto;
margin-right: auto;
}

#banniere a {
background-image: url('../images/banniere06.jpg');
background-repeat: no-repeat;
width: 960px;
height: 250px;
display: block;
}

#menu {
float: left;
width: 170px;
height: 1200px;
background-image: url('../images/fondtissu3.jpg');
background-repeat: repeat;
}

#contenu {
float: left;
width: 790px;
height: 1200px;
background-color: #FFFFFF;
}

#piedpage {
background-color: blue;
width: 960px;
height: 20px;
}


Code HTML :

<body>
<div id="cadre">
        <div id="banniere">
             <a href="./index.php"></a>
        </div>
	<div id="menu">
	     <div id="menu1"><a href="./index.php?page=accueil"></a></div>
	     ...
	     </div>
        <div id="contenu">
             ...
        </div>
       <div id="piedpage">site Web réalisé par...</div>
</div>
</body>
Bonjour,

Je crois que ce pied de page aurait bien besoin d'un peu de clear: both pour éviter de se faire balader d'un côté ou de l'autre par les éléments flottants qui le précèdent. Smiley smile
Sujet clos
Aller à