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

2 participants

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

Kendall
***

Messages : 178
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 Lun 4 Avr 2016 - 22:38

Bonjour,
je viens up le sujet svp =w=
Kendall

Kendall
***

Messages : 178
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 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.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez fff - Firefox / Chrome : Espacement différent sur la barre de navigation 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu fff - Firefox / Chrome : Espacement différent sur la barre de navigation 3592387030 pour prévenir la modération.

fff - Firefox / Chrome : Espacement différent sur la barre de navigation Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.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 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

Kendall
***

Messages : 178
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 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.


Pour faciliter les recherches, mettez un titre explicite.
Remerciez fff - Firefox / Chrome : Espacement différent sur la barre de navigation 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu fff - Firefox / Chrome : Espacement différent sur la barre de navigation 3592387030 pour prévenir la modération.

fff - Firefox / Chrome : Espacement différent sur la barre de navigation Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.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 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

Kendall
***

Messages : 178
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 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 ?


Pour faciliter les recherches, mettez un titre explicite.
Remerciez fff - Firefox / Chrome : Espacement différent sur la barre de navigation 976083691 le message qui vous a aidé pour que celui-ci soit mis en évidence.
Épinglez votre sujet en résolu fff - Firefox / Chrome : Espacement différent sur la barre de navigation 3592387030 pour prévenir la modération.

fff - Firefox / Chrome : Espacement différent sur la barre de navigation Baston10
Lixyr

Lixyr
Aidactive
Aidactive

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

https://forum.forumactif.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 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

Kendall
***

Messages : 178
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

- Sujets similaires

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