Bonjour
je refais une beauté à mon site internet.
Et le problème que je rencontre c'est que le résultat entre firefox et safari n'est pas le même !
J'ai trouvé l'info pour créer des block en html et y insérer des arrondis via CSS. J'aime beaucoup le résultat mais je n'y parviens pas sur firefox alors que le résultat y est sur safari. Etrange, non ?
Quelqu'un saurait / voudrait / pourrait m'aider à ce sujet?
Je travaille sur Coda / snow leopard. Le site est le suivant
http://www.coeuraccords.com/CLCA/
Merci pour votre aide.
Cordialement
OmZen
___________
voici mon code CSS pour la page "accueil"
@charset "UTF-8";
/* CSS Document */
acronym {
color: green;
}
body {
background-color: #938568;
margin: 0px;
color: #013E91;
text-align: justify;
}
/* ------------------------------------header----------------------------------- */
.ombre {
width: 860px;
height: 14px;
background-image: url("../design/ombreheader.png");
margin: auto;
}
#header {
width: 100%;
height: 250px;
background-image: url("../design/header.png");
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
/* ------------------------------------principal----------------------------------- */
#main-up {
width: 900px;
height: 20px;
background-image: url("../design/haut.png");
margin: auto;
}
#main {
width: 860px;
min-height: 200px;
background-color: #FFFFFF;
margin: auto;
padding-left: 20px;
padding-right: 20px;
}
#main-down {
width: 900px;
height: 20px;
background-image: url("../design/bas.png");
margin: auto;
}
/* ------------------------------------fenetre----------------------------------- */
#fenetre {
width: 190px;
height: 100px;
background-color: #938568;
color: white;
float: right;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
/* ------------------------------------piedepage----------------------------------- */
#footer-up {
width: 900px;
height: 21px;
background-image: url("../design/haut.png");
margin: auto;
margin-top: 20px;
}
#footer {
width: 860px;
min-height: 200px;
background-color: #FFFFFF;
margin: auto;
padding-left: 20px;
padding-right: 20px;
}
#footer-down {
width: 900px;
height: 20px;
background-image: url("../design/bas.png");
margin: auto;
margin-bottom: 20px;
}
#menu {
width: 840px;
height: 30px;
position: relative;
background-repeat: no-repeat;
margin: auto;
}
#menu #bouton {
margin: 0; padding: 0;
}
#menu #bouton li {
display: inline;
}
#menu #bouton li a {
float: left;
width: 120px;
height: 0;
padding-top: 30px;
overflow: hidden;
background-image: url("../design/menu.png");
background-repeat: no-repeat; outline: none;
}
/* En attente */#menu #bouton li#accueil a { background-position: 0px -90px; }
#menu #bouton li#troupe a { background-position: -120px 0px; }
#menu #bouton li#buto a { background-position: -240px 0px; }
#menu #bouton li#handicap a { background-position: -360px 0px; }
#menu #bouton li#marionnettes a { background-position: -480px 0px; }
#menu #bouton li#spectacles a { background-position: -600px 0px; }
#menu #bouton li#contact a { background-position: -720px 0px; }
/* Survol */#menu #bouton li#accueil a:hover { background-position: 0px -30px; }
#menu #bouton li#troupe a:hover { background-position: -120px -30px; }
#menu #bouton li#buto a:hover { background-position: -240px -30px; }
#menu #bouton li#handicap a:hover { background-position: -360px -30px; }
#menu #bouton li#marionnettes a:hover { background-position: -480px -30px; }
#menu #bouton li#spectacles a:hover { background-position: -600px -30px; }
#menu #bouton li#contact a:hover { background-position: -720px -30px; }
/* Press */#menu #bouton li#accueil a:active { background-position: 0px -60px; }
#menu #bouton li#troupe a:active { background-position: -120px -60px; }
#menu #bouton li#buto a:active { background-position: -240px -60px; }
#menu #bouton li#handicap a:active { background-position: -360px -60px; }
#menu #bouton li#marionnettes a:active { background-position: -480px -60px; }
#menu #bouton li#spectacles a:active { background-position: -600px -60px; }
#menu #bouton li#contact a:active { background-position: -720px -60px; }
je refais une beauté à mon site internet.
Et le problème que je rencontre c'est que le résultat entre firefox et safari n'est pas le même !
J'ai trouvé l'info pour créer des block en html et y insérer des arrondis via CSS. J'aime beaucoup le résultat mais je n'y parviens pas sur firefox alors que le résultat y est sur safari. Etrange, non ?
Quelqu'un saurait / voudrait / pourrait m'aider à ce sujet?
Je travaille sur Coda / snow leopard. Le site est le suivant
http://www.coeuraccords.com/CLCA/
Merci pour votre aide.
Cordialement
OmZen
___________
voici mon code CSS pour la page "accueil"
@charset "UTF-8";
/* CSS Document */
acronym {
color: green;
}
body {
background-color: #938568;
margin: 0px;
color: #013E91;
text-align: justify;
}
/* ------------------------------------header----------------------------------- */
.ombre {
width: 860px;
height: 14px;
background-image: url("../design/ombreheader.png");
margin: auto;
}
#header {
width: 100%;
height: 250px;
background-image: url("../design/header.png");
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
/* ------------------------------------principal----------------------------------- */
#main-up {
width: 900px;
height: 20px;
background-image: url("../design/haut.png");
margin: auto;
}
#main {
width: 860px;
min-height: 200px;
background-color: #FFFFFF;
margin: auto;
padding-left: 20px;
padding-right: 20px;
}
#main-down {
width: 900px;
height: 20px;
background-image: url("../design/bas.png");
margin: auto;
}
/* ------------------------------------fenetre----------------------------------- */
#fenetre {
width: 190px;
height: 100px;
background-color: #938568;
color: white;
float: right;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
}
/* ------------------------------------piedepage----------------------------------- */
#footer-up {
width: 900px;
height: 21px;
background-image: url("../design/haut.png");
margin: auto;
margin-top: 20px;
}
#footer {
width: 860px;
min-height: 200px;
background-color: #FFFFFF;
margin: auto;
padding-left: 20px;
padding-right: 20px;
}
#footer-down {
width: 900px;
height: 20px;
background-image: url("../design/bas.png");
margin: auto;
margin-bottom: 20px;
}
#menu {
width: 840px;
height: 30px;
position: relative;
background-repeat: no-repeat;
margin: auto;
}
#menu #bouton {
margin: 0; padding: 0;
}
#menu #bouton li {
display: inline;
}
#menu #bouton li a {
float: left;
width: 120px;
height: 0;
padding-top: 30px;
overflow: hidden;
background-image: url("../design/menu.png");
background-repeat: no-repeat; outline: none;
}
/* En attente */#menu #bouton li#accueil a { background-position: 0px -90px; }
#menu #bouton li#troupe a { background-position: -120px 0px; }
#menu #bouton li#buto a { background-position: -240px 0px; }
#menu #bouton li#handicap a { background-position: -360px 0px; }
#menu #bouton li#marionnettes a { background-position: -480px 0px; }
#menu #bouton li#spectacles a { background-position: -600px 0px; }
#menu #bouton li#contact a { background-position: -720px 0px; }
/* Survol */#menu #bouton li#accueil a:hover { background-position: 0px -30px; }
#menu #bouton li#troupe a:hover { background-position: -120px -30px; }
#menu #bouton li#buto a:hover { background-position: -240px -30px; }
#menu #bouton li#handicap a:hover { background-position: -360px -30px; }
#menu #bouton li#marionnettes a:hover { background-position: -480px -30px; }
#menu #bouton li#spectacles a:hover { background-position: -600px -30px; }
#menu #bouton li#contact a:hover { background-position: -720px -30px; }
/* Press */#menu #bouton li#accueil a:active { background-position: 0px -60px; }
#menu #bouton li#troupe a:active { background-position: -120px -60px; }
#menu #bouton li#buto a:active { background-position: -240px -60px; }
#menu #bouton li#handicap a:active { background-position: -360px -60px; }
#menu #bouton li#marionnettes a:active { background-position: -480px -60px; }
#menu #bouton li#spectacles a:active { background-position: -600px -60px; }
#menu #bouton li#contact a:active { background-position: -720px -60px; }