Prb de décalage de DIV sous IE

Signaler
Messages postés
8
Date d'inscription
vendredi 1 mai 2009
Statut
Membre
Dernière intervention
19 août 2019
-
Messages postés
8
Date d'inscription
mercredi 15 février 2006
Statut
Membre
Dernière intervention
6 novembre 2016
-
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;

}

8 réponses

Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
Salut,

Ton menu est flottant (float: left) et non ton corps (de ton document :). Ajoute donc l'instruction float: left à la CSS de #corps.
Messages postés
8
Date d'inscription
vendredi 1 mai 2009
Statut
Membre
Dernière intervention
19 août 2019

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 !!!!!     :))
Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
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 ?
Messages postés
1757
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
23 mai 2020
76
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
Messages postés
8
Date d'inscription
vendredi 1 mai 2009
Statut
Membre
Dernière intervention
19 août 2019

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
Messages postés
631
Date d'inscription
samedi 28 septembre 2002
Statut
Membre
Dernière intervention
18 mai 2009
3
Ton footer doit annuler le flottement > syntaxe css = clear: left;
Messages postés
8
Date d'inscription
vendredi 1 mai 2009
Statut
Membre
Dernière intervention
19 août 2019

Génial, c'est tout réglé.
Merci beaucoup.

Vivement que je sois plus experte pour à mon tour aider les autres...

A bientôt
Messages postés
8
Date d'inscription
mercredi 15 février 2006
Statut
Membre
Dernière intervention
6 novembre 2016

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; }