Menu de droite[problème CSS]

Sujet résolu

Anonyme

3 février 2006 à 22:16:53

Bonsoir,

voici le problème,

j'ai codé ma page CSS afin d'afficher le header, le menu de gauche, le corps et le footer...

Cependant, mon menu de droite se superpose sur le menu de gauche. Que faire ?

#header
{
width:800px;
height:163px;
background-image:url("images/header.png");
background-repeat:no-repeat;
}

#menu_gauche
{
width:124px;
height:797px;
float:left;
background-image:url("images/menu_gauche.png");
background-repeat:no-repeat;
}

#menu_droite
{
width:181px;
height:797px;
float:right;
background-image:url("images/menu_droite.png");
background-repeat:no-repeat;
}

#corps
{
width:495px;
height:797px;
background-image:url("images/corps.png");
background-repeat:no-repeat;
margin-left:124px;
}

#footer
{
width:800px;
height:140px;
background-image:url("images/footer.png");
background-repeat:no-repeat;
}

Merci de votre aide.

JulFisher

4 février 2006 à 11:49:32

Tu n'aurais pas le code XHTML à nous donner, ou encore mieux un lien vers la page en question ?

Anonyme

4 février 2006 à 15:13:42

Si biensûr, voici :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmins="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Emma's Diary</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
   <link rel="stylesheet" media="screen" type="text/css" title="Sans nom" href="index.css"/>
</head>
<body>
<div id="header">

</div>
<div id="menu_gauche">
   <div class="sous_menu">

</div>

<div id="corps">
<p></p>

   <div id="menu_droite">
   <div class="sous_menu">

</div>

</div>
<div id="footer">

</div>
   </body>
</html>

body
{
width:800px;
height:1100px;
background-color:#d8e6f6;
}

#header
{
width:800px;
height:163px;
background-image:url("images/header.png");
background-repeat:no-repeat;
}

#menu_gauche
{
width:124px;
height:797px;
float:left;
background-image:url("images/menu_gauche.png");
background-repeat:no-repeat;
}

#corps
{
width:495px;
height:797px;
background-image:url("images/corps.png");
background-repeat:no-repeat;
margin-left:124px;
}

#menu_droite
{
width:181px;
height:797px;
float:right;
background-image:url("images/menu_droite.png");
background-repeat:no-repeat;
margin-left:495px;
}

#footer
{
width:800px;
height:140px;
background-image:url("images/footer.png");
background-repeat:no-repeat;
}

jp949

4 février 2006 à 15:18:44

il faut implementer les flottants en 1er dans le code html
autrement dit tu dois placer

<div id="menudroit"> avant <div id="corps">

Anonyme

4 février 2006 à 16:35:58

Idem, le menu de droite est toujours superposer sur celui de gauche o_O

JulFisher

4 février 2006 à 16:51:13

Tu ne refermes pas les divs menu_gauche et menu_droite.

De plus, pour ton #footer :

#footer
{
clear: both;
}

Anonyme

4 février 2006 à 18:34:38

En effet, je n'avais pas refermé les divs des deux menus. Merci JulFisher

Par contre, mon corps est centrer en dessous des deux menus... mais il ne s'imbrique pas entre ceux-ci

L'imbrication s'effectue à condition que la largeur de mon body soit égale à 810px... mais alors il y a un blanc entre le menu de gauche et le corps, et entre le corps et le menu de droite o_O

Que signifie :

#footer
{
clear: both;
}

JulFisher

4 février 2006 à 19:33:55

Citation : Sony

Que signifie :

#footer
{
clear: both;
}

http://www.siteduzero.com/forum-83-6123-53117.html#r53117

Pour ton espace, je l'ai vu, je te conseille alors de mettre tous tes blocs dans un bloc "global", avec une largeur correspondant à la somme des largeures des blocs menus et corps. Tu lui appliques un margin: auto;. Pour l'alignement avec IE, il faut faire un text-align: center; au body puis tu refais un text-align: left; pour le #global. Cela aura pour effet de le centrer sous IE et d'avoir un alignement du texte à gauche.

Sinon, tu mets tous tes blocs (menu gauche, droit et corps) en float: left;, comme ça le menu droit ne sera pas complètement à l'Est :lol:

Anonyme

4 février 2006 à 20:00:54

Je ne suis pas certain d'avoir saisi...

En tout cas, après test, çà ne change rien

JulFisher

4 février 2006 à 20:03:48

#global{
width: 800px; /* Ainsi ils seront collés car "bloqués" dans un bloc de leur largeur totale. Le menu de droit ne dépassera pas. */
}

Anonyme

4 février 2006 à 20:13:54

C'est réglé,

j'ai suivi ce que tu m'as dit : insérer mes blocks menus et corps en float:left

Merci beaucoup JulFisher