18041 sujets

Questions générales et questions de débutants

Mise en forme avec CSS et div tout décalé

Bonjour à vous,

Je rencontre un pb de mise en forme que je vais tâcher de vous exposer ici. J'ai créé une page qui servira par la suite de modèle pour mon site. J'ai une organisation tout à fait classique avec une zone en haut (bannière), un menu gauche, un contenu et une zone de pied de page. A le visualisation, ma page s'affiche avec toutes les zones en dessous des autres, rien n'est à sa place (ou presque). Voici le code ci dessous, si quelqu'un peut m'aider et m'expliquer de quoi cela vient, ce serait super.

Merci.

-----------------------------------------------------------------
Page CSS :
----------------------------------------------------------------

.banniere{
position:fixed;
width: 980px;
height: 145px;
background-image: url(../img/banniere.jpg);
}

.menugauche{
position:fixed;
background-color: #9dbb61;
width: 170px;
height: 45px;
height: 82%;
}

.contenu{
position:float;
background-color: #9dbb61;
width: 820px;
height: 82%;
}
.pied{
position:absolute;
background-color: #9dbb61;
width: 980px;
height: 45px;
}


-----------------------------------------------
Page html (php) utilisant la css
----------------------------------------------

<html>
<head>
<LINK rel="stylesheet" type="text/css" href="./css/main.css">
<title></title>
</head>

<body>
<div class="banniere"> </div>
<div class="menugauche">Menu gauche</div>
<div class="contenu">
Bonjour, <br/><br/>
Et bienvenue .......
</div>
<div class="pied"> Copyright 2008</div>
</body>

</html>
Bonjour donde,

J'ai un doute sur l'existence de "positon: float" que tu as attribué a ton div "contenu". Peut-être pourrais-tu mettre ton menu en "float: left"?

Bonne journée!
BOnjour et merci pour ta réponse, elle m'a permis de parvenir à un bon résultat sous ie.

Mon pb maintenant vient de mozilla, là c'est totalement le bordel, tout est regroupé en haut et se superpose.

Voici la CSS telle qu'elle est actuellement après modifs :

Merci et bonne journée.

---------------------------------------------------

.banniere{
position:fixed;
width: 980px;
height: 145px;
background-image: url(../img/banniere.jpg);
}

.menugauche{
float:left;
background-color: #9dbb61;
width: 170px;
height: 45px;
height: 82%;
}

.contenu{
position:fixed;
background-color: #9dbb61;
width: 807px;
height: 82%;
}
.pied{
position:fixed;
background-color: #9dbb61;
width: 980px;
height: 45px;
}
Salut donde et bienvenue Smiley cligne ,

je me trompe ou tu ne maîtrises pas tout à fait l'attribut position Smiley langue ?

Le plus simple serait peut-être de reprendre les choses du début et (re)lire les tutos : Bases et indispensables...

A+ Smiley smile
Salut,

Merci pour ton lien mais cela ne résout pas mon pb dans l'immédiat.
Je me plongerai dans la lecture lorsque j'aurais un peu plus de temps.

Merci.
Sujet clos
Aller à