Différence d'affichage de PA selon les navigateurs

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Différence d'affichage de PA selon les navigateurs

Message par Jézebel L. Jeu 23 Mai 2013 - 21:17

Bonjour/Bonsoir

Voilà, j'ai mis une nouvelle PA
mais le prob, c'est que certains membres se plaignent comme quoi elle n'est pas centrer pour ceux qui utilise Chrome
et autres navigateurs.
Moi j'utilise Mozilla et ça marche. Exception donc pour Mozilla.
Je sais pas trop comment faire...je suis pas très css, peut être ya t'il un code pour un affichage général ?
enfin, je sais pas, besoin de vos lumières SVP !

Le forum : http://monde-oublie.forumactif.com/

Voici mon css PA :

Code:
/*page d'accueil*/               
    *{
  margin:150; /* Annule toutes les marges par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
  padding:20; /* Annule tous les remplissages par défaut, /* étant différentes selon les navigateurs et pour une meilleure compatibilité */
}
a{
  outline:0; /* Supprime la bordure à l'activation du lien */
}
#menu{
  width:150px;
  margin:20px auto 0 auto; /* Sert à centrer le menu dans la page pour l'exemple, valeurs à modifier selon votre gré ou à supprimer */
}
.menu{
  height:20px;
  line-height:20px;
  width:150px;
  background: #456B35;
  color: #19AD16;
  text-align:center;
}
.menu a{
  display:block;
  width:100%;
  height:100%;
}

.menu a:link, .menu a:visited, .menu a:hover{
  color:#19AD16;
  font-family:arial,sans-serif;
  font-size:12px;
  font-weight:bold; /* Met le texte du menu en gras, à supprimer si vous n'en voulez pas */
  text-decoration:none; /* Supprime le soulignement du lien, pour le rétablir passez la valeur à underline */
  background: #456B35;
}
.menu a:hover{
  background: #19AD16;
  color:#FFFFFF;
}
#desc{
  background: #19AD16;
  height:50px;
  font-family:georgia,sans-serif;
  font-size:10px;
  color:#FFFFFF;
  padding:2px;
  border:1px solid #456B35;
}
.fond {
background-image: url("http://i41.tinypic.com/1rqaeg.jpg");
width:740px;
height:auto;
border:5px solid #456B35;
border-radius: 20px 20px 0px 0px;
padding:20px;}

.phrasepa {
opacity:0.8;
font-family:georgia;
font-size:30px;
color:#456B35;
text-align:center;
text-shadow:1px 1px 2px black; }

.phrasepa2 {
opacity:0.8;
font-family:georgia;
font-size:30px;
color:#456B35;
text-align:center;
text-shadow:1px 1px 2px black;}

.phrasepa3 {
opacity:0.8;
font-family:georgia;
font-size:25px;
color:#556627;
text-align:center;}

.blocpa {
background-color:#B0CC99;
padding:8px;
box-shadow:0px 0px 10px #19AD16;
margin:10px;
margin-left:-10px;}

.contexte {
  position: relative;
  overflow:auto;
  height: 225px;
  width: 300px;
padding:8px;
  background: #456B35;
  color: white;
  margin-top: 2px;
box-shadow:0px 0px 10px #19AD16;
text-align:justify;

}

.contexte:hover {
overflow-x: hidden;
overflow-y: auto;
width:300px;
height:225px;}

.contexte img{
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 3s;
  -moz-transition: -moz-transform 4s;
  -o-transition: -o-transform 4s;
  -webkit-transition: -webkit-transform 4s; }


.contexte:hover img{
  transform: translateX(+338px);
  -moz-transform: translateX(+338px);
  -o-transform: translateX(+338px);
  -webkit-transform: translateX(+338px);
}

.toppart img {
box-shadow:0px 0px 10px #19AD16;
opacity:0.5;}

.toppart img:hover {
box-shadow:0px 0px 10px #19AD16;
opacity:1;

}

.wanted {
position: relative;
width:80px;
height:90px;
opacity:0.8;
font-family:georgia;
font-size:15px;
color:#6FC4C1;
text-align:center;
 background: #456B35;}

.wanted img {
position:absolute;
left: 0;
  top: 0;
  opacity:1;
 -moz-transition: all 2s;
-webkit-transition: all 2s;}

.wanted:hover img {
opacity:0;
}

div.staff {
  position: relative;
  float: left;
}

div.staff span {
  display:  /* ceci masque l'infobulle */
}
div.staff:hover {
  background: none; /* correction d'un bug IE */
  z-index: 20; /* on définit une valeur pour l'ordre d'affichage */
}
div.staff:hover span {
height:74px;
  width: 115px;
display: inline;
position: absolute;
top: 0px;
left: 40px;
background-color: ;
color: ; #96CA2D
padding: 0px;
border-top: none ;
border-right: none ;
border-bottom: none ;
  border-radius: none ;
  z-index:20;
}

div.staff2 {
  position: relative;
  float: left;
}

div.staff2 span {
  display: /* ceci masque l'infobulle */
}
div.staff2:hover {
  background: none; /* correction d'un bug IE */
  z-index: 40; /* on définit une valeur pour l'ordre d'affichage */
}
div.staff2:hover span {
height:74px;
  width: 115px;
display: inline;
position: absolute;
top: 0px;
left: 40px;
background-color: ;
color: ; #96CA2D
padding: 0px;
border-top: 0px solid ;
border-right: 0px solid ;
border-bottom: 0px solid ;
  border-radius: 0px 0px 0px 0px;
  z-index:40;
}


.staffie {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  position: relative;
  z-index:30;
  }

.staffie:hover {
  position: relative;
  z-index:30;
    transform: rotate(360deg);
      transition:  rotate(360deg);
      -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transition:  rotate(360deg);
    -ms-transition:  rotate(360deg);
    -khtml-transition:  rotate(360deg);
  }

.staffie2 {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  position: relative;
  z-index:50;
  }

.staffie2:hover {
  position: relative;
  z-index:50;
    transform: rotate(360deg);
      transition:  rotate(360deg);
      -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transition:  rotate(360deg);
    -ms-transition:  rotate(360deg);
    -khtml-transition:  rotate(360deg);
  }

Et aussi le javasript :
Code:
function afficheDesc(txt){
  document.getElementById("desc").innerHTML = txt;
}

function cacheDesc(){
  document.getElementById("desc").innerHTML = "";
}

Merci d'avance à la personne qui me répondra.


Dernière édition par Jézebel L. le Mer 29 Mai 2013 - 17:50, édité 1 fois
Jézebel L.

Jézebel L.
****

Féminin
Messages : 206
Inscrit(e) le : 02/05/2011

https://hiddenworld.forumsrpg.com/
Jézebel L. a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Différence d'affichage de PA selon les navigateurs

Message par Hemoglobine Ven 24 Mai 2013 - 16:08

Bonjour, tente comme ceci

Code:
.fond {
background-image: url("http://i41.tinypic.com/1rqaeg.jpg");
width: auto;
height: auto;
border: 5px solid #456B35;
border-radius: 20px 20px 20px 20px;
}

Cordialement.
Hemoglobine

Hemoglobine
****

Messages : 266
Inscrit(e) le : 16/02/2013

http://meonga.forumactif.com/
Hemoglobine a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Différence d'affichage de PA selon les navigateurs

Message par Jézebel L. Lun 27 Mai 2013 - 17:42

Bonjour,

Merci d'avoir répondu Hemoglobine

J'essaie le code tout de suite ^^
Jézebel L.

Jézebel L.
****

Féminin
Messages : 206
Inscrit(e) le : 02/05/2011

https://hiddenworld.forumsrpg.com/
Jézebel L. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Différence d'affichage de PA selon les navigateurs

Message par Jézebel L. Mer 29 Mai 2013 - 17:50

Coucou !

J'ai essayé le code et apparemment, ça va, car les membres ne se sont plus plaint ^^

Merci encore !

Prob résolu.
Jézebel L.

Jézebel L.
****

Féminin
Messages : 206
Inscrit(e) le : 02/05/2011

https://hiddenworld.forumsrpg.com/
Jézebel L. a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum