Bonjour à toutes et à tous,
Je viens vers vous pour essayer de résoudre un problème sur mon menu déroulant.
Sur Firefox pas de souci, il est correctement positionné et fonctionne à merveille. Mais dès que l'on passe sur IE 6, 7 et 8 alors là c'est la catastrophe. Toute la partie de ma page située sous le menu se trouve propulsée hors champ à droite.
Voyez ma page web : http://zemickyunivers.free.fr.
Voici ma feuille de style :
Je pense que la partie du code qui pose problème c'est la Navigation et qu'il faut préciser des conditions particulières pour les versions d'IE mais je ne sais absolument pas quoi renseigner comme précisons.
Pouvez-vous me donner un petit coup de main.
Par avance merci.
Micky
Modifié par bisca330 (09 Mar 2011 - 08:08)
Je viens vers vous pour essayer de résoudre un problème sur mon menu déroulant.
Sur Firefox pas de souci, il est correctement positionné et fonctionne à merveille. Mais dès que l'on passe sur IE 6, 7 et 8 alors là c'est la catastrophe. Toute la partie de ma page située sous le menu se trouve propulsée hors champ à droite.
Voyez ma page web : http://zemickyunivers.free.fr.
Voici ma feuille de style :
/* Html et Body */
html {
font-size: 100%; /* --> Note 1 à la fin de la feuille de styles. */
}
body {
margin: 0;
padding: 10px 20px; /* -> Note 2 */
font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
font-size: .8em; /* -> Note 3 */
line-height: 1.25; /* -> Note 4 */
color: #8a8a8a;
background: #202020;
}
/* Global : Contient #entete, #navigation et #centre*/
#global {
width: 800px;
margin: 0 auto;
}
/* En-tête : Partie haute de la page contenant l'image du titre */
#entete {
margin:5px 0px 5px 0px;
background-image:url(img/titre.jpg);
height: 150px;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: #86150c;
}
#entete h1 {
margin: 0;
}
#entete h1 img {
float: left;
margin: 7px 20px 10px 0;
}
#entete .sous-titre {
margin: 4px 0 15px 0;
}
/* Navigation : Menu horizontal */
#navigation {
margin: 10px 0px 10px 0px;
display: block;
background: #000000;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: #86150c;
}
#navigation ul {
color: #d1d1d1;
overflow: hidden;
list-style: none;
padding-left: 50px;
}
#navigation li {
float: left;
width: 100px;
}
#navigation ul li ul {
display:none;
position:absolute;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: #86150c;
background-color: #000000;
margin: 0 0 0 10px;
padding: 2px 5px;
}
#navigation ul li ul li{
width: 110px;
}
#navigation a {
color: #d1d1d1;
line-height: 1.5;
font-size: .9em;
text-decoration: none;
}
#navigation a:hover, #navigation a:focus {
color: #ce1215;
}
#navigation ul li:hover ul {
display:block;
}
#navigation li:hover ul li {
float:none;
}
/* Centre : Bloc central contenant #contenu et le menu vertical à gauche */
#centre {
background: url(img/fond.png) repeat-y;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: #86150c;
width: 100%;
overflow: hidden;
}
/* Ephéméride : Apparait dans le menu vertical de gauche dans la page d'accueil et la page de contact */
#ephemeride {
width: 160px;
padding: 10px;
float: left;
font-size: 0.8em;
text-align: center;
}
/* Contenu : Partie principale de la page */
#contenu {
color: #8a8a8a;
background: #000000;
overflow: auto;
margin-left: 200px;
padding: 10px 20px;
}
#contenu a {
color: #d1d1d1;
}
#contenu a:hover, #contenu a:focus {
color: #ce1215;
}
#contenu > :first-child {
margin-top: 10px;
}
#contenu p, #contenu li {
line-height: 1.5;
}
/* Titres */
h1, h2, h3, h5, h6 {
margin: 1em 0 .5em 0; /* -> Note 5 */
}
h1, h2 {
font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
font-weight: normal; /* -> Note 6 */
}
h1 {
font-size: 3em; /* -> Note 7 */
font-style: italic;
}
h2 {font-size: 1.8em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1.0em;}
h5 {
font-size: .8em;
}
/* Listes */
ul, ol {
margin: .75em 0 .75em 24px;
padding: 0; /* -> Note 8 */
}
ul {
list-style: square;
}
li {
margin: 0;
padding: 0;
}
/* Liens */
a {
color: #d1d1d1;
text-decoration: none;
}
a:hover, a:focus {
color: #ce1215;
}
a img {
border: 1px solid #86150c; /* Note -> 9 */
}
strong {
color: #8a8a8a;
}
/* Citations */
blockquote, q {
font-size: 1.1em;
font-style: italic;
font-family: Georgia, "Bitstream Vera Serif", Norasi, serif;
}
blockquote {
margin: .75em 0 .75em 24px;
}
cite {
font-style: italic;
}
/* Tableaux */
table {
font-size: 1.0em;
}
/* Divers éléments de type en-ligne */
em {
font-style: italic;
}
pre, code {
font-size: 100%;
font-family: "Bitstream Vera Mono", "Lucida Console", "Courier New", monospace;
}
pre {
width: 90%;
overflow: auto;
overflow-y: hidden;
margin: .75em 0;
padding: 12px;
background: #202020;
color: #d1d1d1;
}
/* Paragraphes */
p {
margin: .75em 0;
}
li p, blockquote p {
margin: .5em 0;
}
/* Pied de page */
#pied {
margin: 0;
padding: 15px 20px 10px 0;
font-size: .85em;
}
/* Copyright */
#copyright {
margin: 8px 0 0 0;
font-size: 1em;
text-align: left;
color: #8a8a8a;
}
#copyright a {
color: #d1d1d1;
text-decoration: none;
}
#copyright a:hover, #copyright a:focus {
color: #ce1215;
}
Je pense que la partie du code qui pose problème c'est la Navigation et qu'il faut préciser des conditions particulières pour les versions d'IE mais je ne sais absolument pas quoi renseigner comme précisons.
Pouvez-vous me donner un petit coup de main.
Par avance merci.
Micky
Modifié par bisca330 (09 Mar 2011 - 08:08)
