28173 sujets

CSS et mise en forme, CSS3

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