Firefox / Chrome : Espacement différent sur la barre de navigation

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

Résolu Firefox / Chrome : Espacement différent sur la barre de navigation

Message par Kendall le Dim 3 Avr 2016 - 13:05

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Aujourd'hui... Mais j'ai codé hier et ça devait être pareil. Je n'avais juste pas vérifier chrome
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bien le bonjour à tous,
Comme vous pouvez le voir sur ma capture, l'espacement haut de la barre de navigation ainsi que du titre de la catégorie (Celle dans le "cadre" noir) ont un petit souci d'espacement sur chrome (screen droite).
Je ne comprends pas trop le souci et j'aimerais savoir comment adapter les deux. Sachant que, lorsque je bouge un peu le code, ça devient bien sur chrome mais trop espacé sur Firefox... Si c'pas drôle Very Happy /pan
J'suppose que j'utilise mal un code ou que j'ai mal adapté un truc mais bon.

Pour le lien du forum, il est en hide. C't'un forum test et j'aimerais éviter que des petits curieux voient le résultat avant que le design ne soit posté.
Voici mon css :
Code:
body {
/*background-image: url('http://img4.hostingpics.net/pics/275581testban.png'), url('http://img15.hostingpics.net/pics/245569Fond.png');
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
  background-attachment: fixed;*/
}
.bodyline {
  position: absolute;
  left:200px;
  top:-8px;
  width:800px;
        }

.postbody {
 
 }

.contenu_message { text-align:justify;
  background-color:#f8f7ef;
  padding:5px;
  border-bottom:3px solid #da6300;}
 
    #i_logo { margin: -10px -10px -54px;}


a:link {size:12px;}
a:visited {size:12px; }
a:hover {size:14px;}
a:hover { text-decoration: none !important; }
a { text-decoration: none; }


/******************* BARRE DE NAVIGATION ***************/

a.mainmenu {font-size:12px;
font-family:arial;
color: #fff;
text-align: center;
text-transform: uppercase;
padding-top: 2px;
padding-bottom: 4px;
text-decoration: none;}
a.mainmenu img {display:none;}
.navigation {background-color:#1F1F1F;height:25px; width:800px;}

a.mainmenu:hover{
color: #cbcbcb;
text-decoration: none;
}


/******************* FIN BARRE DE NAVIGATION ***************/

/** LIENS INDEX (Forum non lu etc) **/

.liens_index {
  background-color:#cbcbcb;
  color:#1F1F1F;
  border-bottom:3px solid #1F1F1F;
  text-align:center;
  width:790px;
  padding-bottom: 3px;
  margin-left:5px;
}

.liens_index a{
  font-family:arial;
  font-size:11px;
  text-transform:uppercase;
}
/** FIN LIEN INDEX **/
/*************CATEGORIES************/
/* MISE EN FORME DES CATEGORIES ET FORUMS */

.cate_titre
{
  clear: both;
  height: 31px;
  text-align:center;
  color:#ffffff !important;
  text-transform:uppercase;
}

.cate_titre h2 {font-size:20px;color:#ffffff !important;}

/*.catetitre
{
color: #ffffff;
font-family: arial;
font-size: 26px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}*/

.barre_noire
{
  border-top:35px solid #1F1F1F;
}

.forum_bloc
{
  width: 800px;
  margin-top: 8px;
}

.forum
{
float: left;
width: 390px;
margin-bottom:10px;
margin-left: 5px;
margin-right: 5px;
}

a.forumlink
{ position: relative;
  z-index: 2;
  display: block;
  color: #000000;
  text-align: center;
  font-family: arial;
  font-size: 17px;   
  margin-bottom: 5px;
    margin-top: 5px;
  text-transform: uppercase;
  text-shadow:none;
  font-weight: 100;
}

a.forumlink:hover
{
  color:#ffffff;
}

.forum_contenu
{
  position: relative;
  z-index: 1;
  width: 98%;
  height: 65%;
  padding: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -8px;
  background:#cbcbcb;
}

.desc
{
  display: block;
  width: 218px;
  height: 90px;
  overflow: auto;
  background:#ffffff;
  font-family:arial;
  font-size:11px;
  text-align:justify;
  padding:5px;
  margin-left: 2px;
}

.derniersujet
{
  display: block;
  width: 172px;
  margin: 0;
  height: 92px;
  overflow: hidden;
  letter-spacing:-1px;
}
.derniersujet_contenu
{
  width: 161px;
  height: 81px;letter-spacing:-1px;
}

.stats
{
  height:25px;
  width:123px;
  color: #b5b5b5;   
  margin-top: -3px;
}

.stats_sujets, .stats_mess
{
  padding: 2px;
  font-size: 13px;
  color: #cbcbcb;
  text-align:center;
  width:59px;
  height:21px;
  background:#30302F;
}

.last_mess
{
  background: white;
  padding: 2px;
  color: black;
  text-align: center;
  width:386px;
  margin-left: -4px;
  margin-top: 10px;
  margin-bottom: 5px;
  letter-spacing:-1px;
    }

.sforum
{
  background: #EAE9E8;
  height:71px;
  width:124px;
  color: #30302F;
  padding:3px;
  line-height:13px;
  overflow:auto;
}

/************* FIN CATEGORIES ************/












/***********************************************CODE A GARDER POUR TOUJOURS********************************************************/
/******POST ADMIN (contexte etc)*********/
.cadre_general_admin{
  background-color :#E8E4D2;
  text-align: justify;
  color :#30302F;
  padding:5px;
  padding-left:15px;
  padding-right:15px;
  border-top:5px solid #DA6300;}

.titre_admin{
  text-align: center;
  color :#DA6300;
  font-family:Arial;
  text-transform:uppercase;
  font-size:22px;
  letter-spacing:-1px;
  width:100%;
 
  padding:5px;
margin-top:15px;
margin-bottom:10px;}


/****** FIN POST ADMIN*********/
/**********PREDEFINIS*****************/
.cadre_identite_predef {
  width:670px;
  background-color:#fff;
  text-align:justify;
  font-size:12px;
  font-family:arial;
  padding:10px;
  border-left:10px double #DA6300;
  min-height:350px;
  color:#30302f;
}

.img_avatar_predef {
  width:300px;
  height:180px;
  background:#000;
  color:#30302f;}

.cadre_avatar_id {
  float:right;
  margin-left:10px;
  margin-right:-10px;
  color:#30302f;}

.cadre_id {
  float:right;
  width:280px;
  background-color:#EAE9E8;
  padding:10px;
  max-height:150px;
  overflow:auto;
  color:#30302f;}

.label_id {
  color:#f29426;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:1px;}

.titre_nom_predef {
  color: #DA6300;
  font-family: arial;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom:-6px;
}

.feat {
  color:#f29426;
  text-transform:lowercase;
  font-size:11px;}

.statut {
  text-transform:uppercase;
  font-size:11px;}


.sous_titre_predef_lien {
  font-family:arial;
  text-transform:uppercase;
  font-size:12px;
  color:#da6300;
  letter-spacing:1px;
  margin-bottom:-20px;
  font-weight:100;
}

.img_lien_predef {
  float:left;
  margin-right:5px;
  }

/***********FIN PREDEFINIS***********/
/*******SUJET STAFF *************/
.encadrement_staff {
  background-color :#e8e4d2;
  text-align: justify;
  color :#30302f;
  border-top:5px solid #DA6300;
  padding:5px;
  width:440px;
}
.titre_post_staff {
  font-family:georgia;
  text-transform:lowercase;
  font-size:24px;
  color:#30302f;
  letter-spacing:-2px;
  margin-left:20px;
}

/****Bottins des avatars/postes pris/idées d'incarcérations**/
.listes_bottin {
 
  background-color :#e8e4d2;
  text-align: justify;
  color :#30302f;
  border-top:5px solid #DA6300;
  padding:5px;
  width:500px;}


/**** Selecteur de code*****/

.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
        div.cont_code { clear: right; }

/*** Code Spoiler Quote***/
       
.code, .quote, .hide {
  border:none;border-right: 10px double #da6300;
 
  background:#e8e4d2 !important;
  color:#30302f;
  overflow:auto;
  padding:5px;
  font-family: arial;
  font-size: 11px;
}

/* Spoiler */
.spoiler_closed {
  font-family: arial;
  font-size: 11px;border:none;
  border-right: 10px double #da6300;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
  background:#e8e4d2 !important;
  color:#30302f;
  overflow:auto;
  padding:5px;
    }
.spoiler_closed.hidden {
    display:none;
    }
.spoiler_content {
 font-family: Arial;
  font-size: 11px;border:none;
  border-right: 10px double #da6300;
  background:#e8e4d2 !important;
  color:#30301f;
  overflow:auto;
  padding:5px;
    }
.spoiler_content.hidden {
    display:none;
    }

/****Chatbox*****/

    #chatbox_header .cattitle:before {
    content: "Chatbox - La cour des petits.";
    }
    #chatbox_header .cattitle strong {
    visibility: hidden;
    }


    #chatbox_members .member-title.online {
      background: #e8e4d2;
      color: #30302f !important;
      border-radius: 5px;
      margin: 5px;    width: 162px;
    }

    #chatbox_members .member-title.away {
      background: #EAE9E8;
      color: #30302f !important;
      border-radius: 5px;
      margin: 5px;    width: 162px;
    }

#chatbox {
  background-color: #f8f7ef;color:#30302f !important;
}
#chatbox_members {
  background-color: #f8f7ef;
}



    /* Personnaliser actions CB
    * Trouvé sur le Libre Service de Wild Roar
    */
    #chatbox .msg .user:empty + .msg {
        font-variant: small-caps;
  color:#333 !important;
    }
    /* Fin personnalisation actions CB*/
       
       

/*** Post PNJ ***/

.cadre_pnj_principal {
  width:680px;
  background-color:#fff;
  text-align:justify;
  font-size:12px;
  font-family:arial;
  padding:10px;}

.img_pnj_post {
  width:300px;
  height:180px;
  background:#000;
  float:right;
  margin-left:10px;}

.titre_pnj_post {
  color: #DA6300;
  font-family: arial;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom:-6px;
}

.sous_titre_pnj_post {
  color:#f29426;
  text-transform:lowercase;
  font-size:11px;
}




























/*************EDITEUR DE MES COUILLES EN SKI***************/
        /*--- Bloc réponse rapide ---*/
       
        .sceditor-container.ltr.sourceMode {
        width:98% !important;
        background-color: #e8e4d2 !important;
        }
        .sceditor-container.ltr.wysiwygMode {
        width:98% !important;
        background-color: #e8e4d2 !important;
        }

        /*---  Partie texte area : fond ---*/
       
        .sceditor-container iframe, .sceditor-container textarea {
        background-color: #e8e4d2 !important;
        text-align:justify;
        margin:0 !important;
        line-height: 16px;
        width: 100% !important;
        color: #30302f !important;
        font-size:11px !important;
        }

        /*---  Partie supérieur contenant les outils ---*/
       
        div.sceditor-toolbar.ltr {
        background-color: #e8e4d2 !important;
        width: 540px !important;
  padding: 3px 50px !important;
  text-align: center; }






/****************************SIGNATURE KIM*********************/
.signat {
background-image:url("http://img11.hostingpics.net/pics/859727SignKim.png");
height : 200px;
width : 500px;
  -moz-transition-property: all;
  -webkit-transition-property: all;
  -o-transition-property: all;
  -moz-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
}
.signat:hover {
background-image:url("http://img11.hostingpics.net/pics/292421signkim2.png");
height : 200px;
width : 500px; 
  -moz-transition-property: all;
  -webkit-transition-property: all;
  -o-transition-property: all;
  -moz-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
}

/*** Dernière édition pas...****/

    tr.post span.gensmall {display : none;}




/*********************************************CODE CSS DES FICHES DE LA 1ERE VERSION *******************/


/****FICHE DE LIEN VERSION 1****/

.cadregeneral_fdl {
  background-color :#E1DCE1;
  text-align: justify;
  color :#212121;
  border-top:2px solid #74141a;
  padding:5px;
  border-radius:5px;
  width:420px;}
.presa_fdl {
  width:406px;
  text-align:justify;
  font-size:10px;
  font-family:arial;
  border-top:2px solid #74141a;
  background:#eeeeee;
  box-shadow:0px 0px 2px #333333;
  text-align: justify;
  overflow:auto;
  color:#212121;
  border-radius:5px;
  padding:3px;
  margin-left:4px;
  margin-top:3px;}
.propriete_fdl, .rps_fdl {
  background-color :#E1DCE1;
  text-align: justify;
  color :#212121;
  border-top:2px solid #74141a;
  padding:5px;
  border-radius:5px;
  width:195px;
  height:220px;
  overflow:auto;
  font-size:10px;
  font-family:arial;
  box-shadow:0px 1px 2px #333333;}
.titre_fdl {
  text-align:center;
  font-family:arial;
  font-size:30px;
  text-transform:uppercase;
  color:#74141a;
  letter-spacing:-0px;
  margin-top:5px;
  margin-bottom:10px;}
.sous_titre_fdl {
  font-family:georgia;
  text-transform:lowercase;
  font-size:22px;
  color:#333333;
  letter-spacing:-1px;
  margin-bottom:-5px;
  margin-left:20px;}
.credits_fdl {
  text-align: center;
  color :#bababa;
  font-size:10px;
  font-family:arial;
  text-transform:uppercase;
  margin-bottom:-4px;}
.relation_fdl {
width:306px;
  height:94px;
  text-align:justify;
  font-size:10px;
  font-family:arial;
  background:#eeeeee;
  box-shadow:0px 0px 2px #333333;
  text-align: justify;
  overflow:auto;
  color:#212121;
  border-radius:5px;
  padding:3px;
  margin-top:3px;}
/***FIN FICHE DE LIEN***/

/***FICHE DE PREZ VERSION 1****/

.id_prez {
  font-family:georgia;
  text-transform:lowercase;
  font-size:14px;
  color:#333333;
  letter-spacing:-1px;
  font-weight:bold
}
.citation_prez {
  font-family:georgia;
  font-size:10px;
  font-style:italic;
  text-align:center;
  color:#333333;
}

Si besoin du HTML de mes templates, je peux également les fournirs =)
Merci d'avance
Kendall


Dernière édition par Kendall le Dim 17 Avr 2016 - 19:11, édité 1 fois

Kendall
***

Messages : 129
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Firefox / Chrome : Espacement différent sur la barre de navigation

Message par Kendall le Lun 4 Avr 2016 - 22:38

Bonjour,
je viens up le sujet svp =w=

Kendall
***

Messages : 129
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Firefox / Chrome : Espacement différent sur la barre de navigation

Message par Lixyr le Dim 10 Avr 2016 - 0:51

Bonjour,

A priori avec un line-height: 25px; sur la classe .navigation fait l'affaire, mais comme la police d'écriture n'est pas exactement la même sur Chrome et Firefox (plus grasse sur Chrome) elle est un peu plus grande et donc demande un line-height de 27 pour être exactement centrée... Par ailleurs, comme vous utilisez un tableau pour la mise en page, les cellules n'ayant pas le même comportement sur chrome et firefox, c'est compliqué d'avoir exactement le même résultat.

J'ai tenté une triche en rajoutant ceci sur la cellule entourant les liens :

Code:
height: 25px;
line-height: 25px;

et ça fonctionne à peu près sur Chrome.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Firefox / Chrome : Espacement différent sur la barre de navigation

Message par Kendall le Dim 10 Avr 2016 - 2:04

Hello et merci de ton aide,
Alors soit, ça fonctionne - et encore... - sur le cas de la barre de navigation mais l'effet est le même sur le titre des catégories... Y'a bien un bout de code qui remonte tous ça vers le haut et qui ne devrait pas D:

Kendall
***

Messages : 129
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Firefox / Chrome : Espacement différent sur la barre de navigation

Message par Lixyr le Dim 10 Avr 2016 - 11:20

Pour que ça fonctionne mieux, il faudrait enlever la table, et mettre directement les liens dans la div .navigation.

Pour les catégories, je dirais que c'est normal, puisque la div de background noire n'est pas la div qui entoure les titres... Vous avez mis un border-top de 35px pour avoir un fond noir alors que vous auriez pu juste mettre un background noir directement sur la div ...

Je regarde votre code et je trouve qu'il y a des choses vraiment étranges qui ne devraient pas être là. Par exemple, pourquoi avez-vous mis le float:left sur la classe forum, alors que vous avez un block parent pour positionner les blocs des catégories ? C'est illogique, et ça ne m'étonne pas que ça bugg au niveau de l'affichage...

Donc déjà je vous propose quelques améliorations, qui vous permettront de pouvoir coder sans soucis :
Vous enlevez tout ce que je raye, et vous ajoutez tout ce qui est en gras :

Dans la CSS :

.forum_bloc {
float: left;
margin: 0 5px 10px;
margin-top: 8px;
width: 800px;
}

.forum {
float: left;
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
width: 390px;
}

.forum_contenu {
background: #cbcbcb none repeat scroll 0 0;
height: 65%;
margin-left: auto;
margin-right: auto;
margin-top: -8px;
padding: 4px;
position: relative;
width: 98%;
z-index: 1;
}

.barre_noire {
border-top: 35px solid #1f1f1f;
}



.cate_titre {
clear: both;
color: #fff!important;
height: 31px;
line-height: 36px;
margin-top: 35px;
text-align: center;
text-transform: uppercase;
background: black;
}

.cate_titre h2 {
color: #fff !important;
font-size: 20px;
margin: 0;
}



Dans le template :

<div class="barre_noire"></div>

<div class="cate_titre">
<br>
<h2>1ère catégorie</h2>
</div>



Et vous aurez exactement le même rendu que celui que vous aviez, sauf qu'il fonctionne à la fois sur Firefox et Chrome, et il sera sans bugg.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Firefox / Chrome : Espacement différent sur la barre de navigation

Message par Kendall le Sam 16 Avr 2016 - 23:48

Hello et désolée du retard, la semaine à été longue xD

J'ai modifier en fonction de ce que vous m'avez donner. J'ai toujours, du coup, un petit bug. Mes catégories passent par dessus le titre, je sais pas trop ou modifier du coup.
Et de plus j'ai un effet bizarre quand je clique droit, comme si tout avait été remplacé par une image... êê

Kendall
***

Messages : 129
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Firefox / Chrome : Espacement différent sur la barre de navigation

Message par Lixyr le Dim 17 Avr 2016 - 18:52

Pour le titre, c'est un height qui est trop petit.


.cate_titre {
background: #000 none repeat scroll 0 0;
clear: both;
color: #fff !important;
height: 36px;
line-height: 36px;
margin-top: 35px;
text-align: center;
text-transform: uppercase;
}

Pour le clic droit, je ne reproduis pas. Vous pouvez me montrer avec un screen ?





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Firefox / Chrome : Espacement différent sur la barre de navigation

Message par Kendall le Dim 17 Avr 2016 - 19:10

Okay c'est parfait !
Et non en fait j'ai du loupé l'installation d'un module sur mon firefox. Du coup c'est bon xD Merci beaucoup !

Kendall
***

Messages : 129
Inscrit(e) le : 30/04/2011

Kendall a été remercié(e) par l'auteur de ce sujet.

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


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