Firefox / Chrome : Espacement différent sur la barre de navigation
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Firefox / Chrome : Espacement différent sur la barre de navigation
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 /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 : 178
Inscrit(e) le : 30/04/2011
Re: Firefox / Chrome : Espacement différent sur la barre de navigation
Bonjour,
je viens up le sujet svp =w=
je viens up le sujet svp =w=
Kendall- ***
- Messages : 178
Inscrit(e) le : 30/04/2011
Re: Firefox / Chrome : Espacement différent sur la barre de navigation
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 :
et ça fonctionne à peu près sur Chrome.
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 le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Firefox / Chrome : Espacement différent sur la barre de navigation
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:
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 : 178
Inscrit(e) le : 30/04/2011
Re: Firefox / Chrome : Espacement différent sur la barre de navigation
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 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;
}
.forum {
width: 390px;
}
.forum_contenu {
background: #cbcbcb none repeat scroll 0 0;
height: 65%;
padding: 4px;
width: 98%;
}
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="cate_titre">
<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 le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Firefox / Chrome : Espacement différent sur la barre de navigation
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... êê
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 : 178
Inscrit(e) le : 30/04/2011
Re: Firefox / Chrome : Espacement différent sur la barre de navigation
Pour le titre, c'est un height qui est trop petit.
Pour le clic droit, je ne reproduis pas. Vous pouvez me montrer avec un screen ?
Pour le clic droit, je ne reproduis pas. Vous pouvez me montrer avec un screen ?
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Firefox / Chrome : Espacement différent sur la barre de navigation
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 !
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 : 178
Inscrit(e) le : 30/04/2011
Sujets similaires
» Espacement différent entre Firefox et Chrome
» Espacement des boutons barre de navigation
» Chrome, Firefox, IE... Soucis de navigateur 8D
» Bug barre navigation sous firefox
» Adapter mes codes à Chrome (barre de navigation)
» Espacement des boutons barre de navigation
» Chrome, Firefox, IE... Soucis de navigateur 8D
» Bug barre navigation sous firefox
» Adapter mes codes à Chrome (barre de navigation)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum