Différence d'affichage de PA selon les navigateurs
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Différence d'affichage de PA selon les navigateurs
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 :
Et aussi le javasript :
Merci d'avance à la personne qui me répondra.
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
Re: Différence d'affichage de PA selon les navigateurs
Bonjour, tente comme ceci
Cordialement.
- 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.
Re: Différence d'affichage de PA selon les navigateurs
Bonjour,
Merci d'avoir répondu Hemoglobine
J'essaie le code tout de suite ^^
Merci d'avoir répondu Hemoglobine
J'essaie le code tout de suite ^^
Re: Différence d'affichage de PA selon les navigateurs
Coucou !
J'ai essayé le code et apparemment, ça va, car les membres ne se sont plus plaint ^^
Merci encore !
Prob résolu.
J'ai essayé le code et apparemment, ça va, car les membres ne se sont plus plaint ^^
Merci encore !
Prob résolu.
Sujets similaires
» Menu déroulant qui ne marche pas selon les navigateurs
» Problème d'affichage de mon site sur les navigateurs
» Code CSS qui n'influ pas celon les navigateurs
» pertes d'onglets sur navigateurs
» Bouton sur certains navigateurs qui ne fonctionnent pas.
» Problème d'affichage de mon site sur les navigateurs
» Code CSS qui n'influ pas celon les navigateurs
» pertes d'onglets sur navigateurs
» Bouton sur certains navigateurs qui ne fonctionnent pas.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum