Bonjour,
Je débute avec les feuilles de styles. J'ai créé mon site en le testant sous IE. J'étais arrivée à une mise en page qui me plaisait et mais malheureusement quand je l'ai testé avec mozilla, catastrophe, plus rien ne correspondait.
Est-ce que quelqu'un pourrait m'indiquer e que je dois faire pour que ça fonctionne dans les 2 browser.
Merci d'avance.
Voici l'adresse de mon site : http://elevagechevaux.free.fr/site5/
Et mon fichier css
-------------------------------------
body {
margin : 0 ;
padding : 0 ;
text-align : center;
background : url(img/bg.gif) repeat;
color : #373737;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 0.8em;}
#conteneur_principal {
position : relative;
width : 857px;
background : transparent;
margin-left : auto;
margin-right : auto;
text-align : center;
border: 0px solid #ff0000;
}
#haut {
border-top : 1px solid #4c4c4c;
width : 840px;
height : 300px ;
background : url(img/haut.gif) no-repeat;
margin-left : auto;
margin-right : auto;
margin-top: 0px;
text-align : left;
border: 0px solid #ff0000;}
.img_haut {
background : url(img/entete.gif) no-repeat;
height: 200px;
width: 720px;
margin-left : auto;
margin-right : auto;
margin-top: 90px;
border: 0px solid #ff0000;}
#centre {
background : url(img/centre.gif) repeat;
width : 840px;
margin-left : auto;
margin-right : auto;
padding-bottom : 0;
text-align : left;
border: 0px solid #ff0000;
}
#fond_centre {
background : #ffffff;
width : 720px;
margin-left : auto;
margin-right : auto;
padding-bottom : 0;
text-align : left;
border: 0px solid #ff0000;
padding: 0px;
}
#ligne_blanc {
background : url(img/ligne_blanc.gif);
width:720px;
height : 15px;
background-color :#ffffff;
margin-left : auto;
margin-right : auto;
border: 0px solid #ff0000;}
ul, li {
margin :0;
padding : 0 ;
list-style : none ; }
#menu {
background : url(img/menu_fd.gif);
width:720px;
height : 31px;
background-color :#333;
color :#fff ;
font-weight : bold;
font-size : 13px;
overflow : hidden;
margin-left : auto;
margin-right : auto;}
#menu li{
float : left ;
padding-top : 5px ;
height : 31px;
width : 100px;
text-align : center;
margin-left : 0;
background : url(img/menu_separateur.gif) no-repeat 98px 2px}
li.box a{
float : left ;
padding-top : 5px ;
height : 28px;
display : block;
width : 100px;
text-align : center;
margin-top : -5px;
}
li.box a:hover{
background : url(img/menu_orange.gif)
}
li.box_on a{
float : left ;
padding-top : 5px ;
height : 28px;
display : block;
width : 100px;
text-align : center;
margin-top : -5px;
background : url(img/menu_orange.gif)
}
li.box_on a:hover{
}
a {color : #fff; text-decoration : none}
a:hover {color : #fff; text-decoration : none}
.gauche{
float : left;
width : 234px ;
margin-left : 5px;
margin-top : 0px;
border: 0px solid #ff0000; }
div#cadre_langue {/* conteneur global et arrière-plan du titre du cadre */
width: 234px;
padding-top: 8px;
background: url(img/cadrehaut.jpg) top left no-repeat;
margin-bottom: 25px;
margin-top: 25px;
}
div#sous_cadre_langue {/* arrière-plan bas et sur l'ensemble du cadre */
background: url(img/cadrebas.jpg) bottom left no-repeat;
padding-top: 0px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
}
.drapeau{
margin-top: 5px;
margin-bottom: 0px;
margin-right: 5px; }
.news {
background : #ffffff url(img/bgauche.gif) no-repeat bottom;
color : #333333;
padding-bottom : 100px;
border: 1px solid #808080;
margin-bottom: 25px;
}
.info{
background-color: #696969;
font-size: 10px;
color:#ffffff;
text-align: center;
padding: 5px;
font-family: verdana, helvetica, sans-serif;
margin-bottom: 25px;}
.droite {
float : left ;
width : 440px ;
margin-left : 20px;
margin-top : 0px;
padding: 0px;
background : transparent;
border: 0px solid blue;}
p {margin : 0 20px 0 20px ; padding : 10px 0 0 0}
p.gras-orange { color : #ff9900; font-weight : bold; }
h1 {
font-size : 20px ;
padding : 0 ;
margin : 30px 30px 0 20px ;
color : #696969 ;
font-style : italic;
background : url(images/h1.gif) repeat-x left bottom ;
height : 50px ;
text-transform : uppercase}
h2 {
font-size : 12px ;
color : #fff;
text-indent : 30px ;
height : 20px ;
padding-top : 10px ;
margin : 0;
background : #ffffff url(img/h2.gif) no-repeat; ;
height : 35px;
border: 0px solid #ff0000;}
h3 {
font-size : 12px ;
color : #fff;
text-indent : 30px ;
height : 20px ;
padding-top : 2px;
margin : 5px 0 0 0 ;
background : #808080 ;
height : 20px}
img.bordure {
padding : 1px;
background : #333333;
}
a.class1 {color : #ff9900; font-weight : bold; text-decoration : underline ; padding-bottom : 15px; display : block}
a:hover.class1 {color : #ff9900; text-decoration : underline}
#bas{
width : 840px;
height : 98px ;
background : url(img/bas.gif) no-repeat;
margin-left : auto;
margin-right : auto;
border: 0px solid #ff0000;}
}
Je débute avec les feuilles de styles. J'ai créé mon site en le testant sous IE. J'étais arrivée à une mise en page qui me plaisait et mais malheureusement quand je l'ai testé avec mozilla, catastrophe, plus rien ne correspondait.
Est-ce que quelqu'un pourrait m'indiquer e que je dois faire pour que ça fonctionne dans les 2 browser.
Merci d'avance.
Voici l'adresse de mon site : http://elevagechevaux.free.fr/site5/
Et mon fichier css
-------------------------------------
body {
margin : 0 ;
padding : 0 ;
text-align : center;
background : url(img/bg.gif) repeat;
color : #373737;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 0.8em;}
#conteneur_principal {
position : relative;
width : 857px;
background : transparent;
margin-left : auto;
margin-right : auto;
text-align : center;
border: 0px solid #ff0000;
}
#haut {
border-top : 1px solid #4c4c4c;
width : 840px;
height : 300px ;
background : url(img/haut.gif) no-repeat;
margin-left : auto;
margin-right : auto;
margin-top: 0px;
text-align : left;
border: 0px solid #ff0000;}
.img_haut {
background : url(img/entete.gif) no-repeat;
height: 200px;
width: 720px;
margin-left : auto;
margin-right : auto;
margin-top: 90px;
border: 0px solid #ff0000;}
#centre {
background : url(img/centre.gif) repeat;
width : 840px;
margin-left : auto;
margin-right : auto;
padding-bottom : 0;
text-align : left;
border: 0px solid #ff0000;
}
#fond_centre {
background : #ffffff;
width : 720px;
margin-left : auto;
margin-right : auto;
padding-bottom : 0;
text-align : left;
border: 0px solid #ff0000;
padding: 0px;
}
#ligne_blanc {
background : url(img/ligne_blanc.gif);
width:720px;
height : 15px;
background-color :#ffffff;
margin-left : auto;
margin-right : auto;
border: 0px solid #ff0000;}
ul, li {
margin :0;
padding : 0 ;
list-style : none ; }
#menu {
background : url(img/menu_fd.gif);
width:720px;
height : 31px;
background-color :#333;
color :#fff ;
font-weight : bold;
font-size : 13px;
overflow : hidden;
margin-left : auto;
margin-right : auto;}
#menu li{
float : left ;
padding-top : 5px ;
height : 31px;
width : 100px;
text-align : center;
margin-left : 0;
background : url(img/menu_separateur.gif) no-repeat 98px 2px}
li.box a{
float : left ;
padding-top : 5px ;
height : 28px;
display : block;
width : 100px;
text-align : center;
margin-top : -5px;
}
li.box a:hover{
background : url(img/menu_orange.gif)
}
li.box_on a{
float : left ;
padding-top : 5px ;
height : 28px;
display : block;
width : 100px;
text-align : center;
margin-top : -5px;
background : url(img/menu_orange.gif)
}
li.box_on a:hover{
}
a {color : #fff; text-decoration : none}
a:hover {color : #fff; text-decoration : none}
.gauche{
float : left;
width : 234px ;
margin-left : 5px;
margin-top : 0px;
border: 0px solid #ff0000; }
div#cadre_langue {/* conteneur global et arrière-plan du titre du cadre */
width: 234px;
padding-top: 8px;
background: url(img/cadrehaut.jpg) top left no-repeat;
margin-bottom: 25px;
margin-top: 25px;
}
div#sous_cadre_langue {/* arrière-plan bas et sur l'ensemble du cadre */
background: url(img/cadrebas.jpg) bottom left no-repeat;
padding-top: 0px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
color: #ffffff;
}
.drapeau{
margin-top: 5px;
margin-bottom: 0px;
margin-right: 5px; }
.news {
background : #ffffff url(img/bgauche.gif) no-repeat bottom;
color : #333333;
padding-bottom : 100px;
border: 1px solid #808080;
margin-bottom: 25px;
}
.info{
background-color: #696969;
font-size: 10px;
color:#ffffff;
text-align: center;
padding: 5px;
font-family: verdana, helvetica, sans-serif;
margin-bottom: 25px;}
.droite {
float : left ;
width : 440px ;
margin-left : 20px;
margin-top : 0px;
padding: 0px;
background : transparent;
border: 0px solid blue;}
p {margin : 0 20px 0 20px ; padding : 10px 0 0 0}
p.gras-orange { color : #ff9900; font-weight : bold; }
h1 {
font-size : 20px ;
padding : 0 ;
margin : 30px 30px 0 20px ;
color : #696969 ;
font-style : italic;
background : url(images/h1.gif) repeat-x left bottom ;
height : 50px ;
text-transform : uppercase}
h2 {
font-size : 12px ;
color : #fff;
text-indent : 30px ;
height : 20px ;
padding-top : 10px ;
margin : 0;
background : #ffffff url(img/h2.gif) no-repeat; ;
height : 35px;
border: 0px solid #ff0000;}
h3 {
font-size : 12px ;
color : #fff;
text-indent : 30px ;
height : 20px ;
padding-top : 2px;
margin : 5px 0 0 0 ;
background : #808080 ;
height : 20px}
img.bordure {
padding : 1px;
background : #333333;
}
a.class1 {color : #ff9900; font-weight : bold; text-decoration : underline ; padding-bottom : 15px; display : block}
a:hover.class1 {color : #ff9900; text-decoration : underline}
#bas{
width : 840px;
height : 98px ;
background : url(img/bas.gif) no-repeat;
margin-left : auto;
margin-right : auto;
border: 0px solid #ff0000;}
}