Prb de décalage de DIV sous IE

Question

Bonjour,

Voici l'adresse du site que je tente de faire pour des amis. Je suis loin d'être experte:

http://www.so6online.net/exploitation.php


Sous internet explorer le corps se trouve en dessous de mon menu. Je n'arrive pas à le passer à droite de mon menu. Ce qui fonctionne sous firefox.

Pouvez-vous m'aider?


Voici le CSS :


body

{

   width: 760px;

   margin: 100px;

   margin-top: 20px;

   margin-bottom: 20px;    

   background-color: #e3ff50;

   background-repeat: no-repeat;

   background-attachment: fixed;

}


a

{

   text-decoration: none; /* Les liens ne seront plus soulignés */

   color: #663333; /* Les liens seront en marron */

   font-style: normal; /* Les liens seront normal ?) */

}


ul /* Ma liste aura des puces en forme de points */

{

   list-style-image: url(icones/icones/point.png);

}


a:hover /* Quand le visiteur pointe sur le lien */

{

   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */

   color: #99ff00; /* Le lien sera écrit en vert quand on pointera dessus */

   font-size: 14px;

}


img

{

border: 0;

} 


p:first-letter /* La première lettre de chaque paragraphe */

{

   font-weight: bold; /* En gras */

   font-size: 1.4em; /* Ecrit légèrement plus gros que la normale */

   color: #663333; /* En marron */

}


/* la couleur des paragraphes */

p

{

   color: #663333;

   font-size:14px;

}


/* L'en-tête */


#en_tete

{

   width: 760px;

   height: 100px;

   background-image: url("banniere/banniere.png");

   background-repeat: no-repeat;

   margin-bottom: 10px;

}


/* Le menu */


#menu

{

   float: left;

   width: 40px;

   margin-top: 10px;


}


.element_menu

{


   margin-bottom: 20px;

}


/* Quelques effets sur les menus */


.element_menu a  

{

   color: blue;

   text-decoration: none;

}


.element_menu h3

{

   background-image: url("lesmenus.png");

   background-repeat: no-repeat;


   }


.element_menu a:hover

{

   background-color: #B3B3B3;

   color: black;

}


/* Le menu pour l'accueil
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/


#menuacc

{

float: none;

width: 760px;

margin-top: 10px;


   first-letter /* La première lettre de chaque paragraphe */

   font-weight: bold; /* En gras */

   font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */

   color: #ffffff; /* En blanc */

}


.element_menu

{

   background-color: #ffffff;

   margin-bottom: 20px;

}


/* Quelques effets sur les menus */


.element_menu a  

{

   color: blue;

   text-decoration: none;

}


.element_menu h3

{

   background-image: url("lesmenus.png");

   background-repeat: no-repeat;

   background-position:center;


   }


.element_menu a:hover

{

   background-color: #000000;

   color: black;


}


/* Le corps de la page
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/

#corps

{

   margin-left: 170px;

   margin-bottom: 20px;

   padding-left: 30px;

   width: 565px; 

   height: auto;


   color: #663333;

   background-image: url("icones/degrade.png");

   background-repeat: repeat-y; /* Le fond ne se répètera que sur la première colonne, verticalement */


}


#corps h1

{

height: 30px;


   background-image: url("exploitation.gif");

   background-repeat: no-repeat;

   background-position:center;


   padding-left: 30px;

   color: #663333;

   text-align: left;

}

#corps h2

{

   color: #663333;

   text-align: center;

   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;

   margin-top: 40px;

}


#corps h3

{

   height: 30px;

   background-image: url(icones/emprmarron.png);

   background-repeat: no-repeat;

   padding-left: 30px;

   color: #663333;

   text-align: left;

      font-size: 30px;

}


/* Le pied de page
sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/


#pied_de_page

{

   padding: 2px;

   text-align: center;

   color: #663333;

   background-color: #ffffff;

   font-size: 20px;

      text-decoration: none;

}

XtremDuke · Answer

Salut,

Ton menu est flottant (float: left) et non ton corps (de ton document :). Ajoute donc l'instruction float: left à la CSS de #corps.

softarg24 · Answer

Merci, merci.
C'est mon cerveau qui est surtout flottant.

Bon maintenant le corps est remonté mais il empiète sur le menu !!!
J'ai tenté des petits trucs mais non...

Dans l'espoir de mettre pied sur terre, le flottage ça me donne le tournis.....et pour une blonde c'est pire !!!!!     :))

XtremDuke · Answer

Tu as dans la css de #menu > width: 40px;
Je penses que ton menu est un poil plus large non ? Du moins, aussi large que sont contenu ?

@karamel · Answer

bonjour 

soit tu modifie ca 

#corps {
margin-left : 170px;
margin-bottom : 20px;
padding-left : 30px;
width : 565px;             plus petit
height : auto;
color : #663333;
background-image : url("icones/degrade.png");
background-repeat : repeat-y;
}

soit ca 

body {
width : 760px;        plus grand
margin : 100px;
margin-top : 20px;
margin-bottom : 20px;
background-color : #e3ff50;
background-repeat : no-repeat;
background-attachment : fixed;
}

ou les deux

softarg24 · Answer

Nickel, merci beaucoup.
Comme je débute c'est pas évident.
Maintenant j'ai un blème avec mon footer mais je vais tenter de trouver!!!!

Merci encore

XtremDuke · Answer

Ton footer doit annuler le flottement > syntaxe css = clear: left;

softarg24 · Answer

Génial, c'est tout réglé.
Merci beaucoup.

Vivement que je sois plus experte pour à mon tour aider les autres...

A bientôt

ensrabat · Answer

merci j'ai ce probleme dans mon css ne
fonctionne plus dans IE7 
le code css :
---------------------------------------
body {
 
 font: 18px Time new roman ; 
 background: #ddccff  top left no-repeat;
 margin: 0;
 padding: 0;
 color : #556688 ;
}

/* ------------------------------------------------------------------------------------
Tha Drop-down Menu
------------------------------------------------------------------------------------ */

/* Elements de premier niveau
--------------------------------------*/
#menuDeroulant
{
background: #aabbcc;
width: 760px;
height: 21px;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
position: absolute;
top: 0;
left: 0;
}
#menuDeroulant li
{
float: left;
width: 140px;
margin: 0;
padding: 0;
border: 0;
Color : #ffffff ;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
display: block;
height: 1%;
color: #FFF;
background: #ffeeff;
margin: 0;
padding: 4px 8px;
border-right: 1px solid #fff;
text-decoration: none;
}
#menuDeroulant li a:hover { background-color: #ffffee; }
#menuDeroulant li a:active { background-color: #FFFFEE; }

#menuDeroulant .sousMenu
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
font: arial; color: green; font-weight: bold
}
#menuDeroulant .sousMenu li
{
float: left;
margin: 0;
padding: 0;
border: 0;
width: 140px;
border-top: 1px solid transparent;
border-right: 1px solid transparent;
color: #eebbcc; font-weight: bold

}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background: #ffeebb repeat;
}
#menuDeroulant .sousMenu li a:hover
{
background-image: none;
background-color: #ffffff;
}
#menuDeroulant li:hover > .sousMenu { display: block; }

Prb de décalage de DIV sous IE

8 réponses

Votre réponse

Discussions similaires