[MODERNBB] Probleme d'ajustement de la barre de la barre de navigation

[Kid13]

• Version du forum :
  PHPBB2
• Templates modifiés :
  oui
• Navigateur :
  Firefox

Alors mon deuxieme probleme, après que mon premier ait été si rapidement résolu est le suivant :

La barre ou sont présentes les fonctionnalités (Accueil S'enregistrer Connection ) est beaucoups trop large, elle prend toute la largeur, j'aurais aimé qu'elle s'adapte aux nombres de fonctionnalité pour les visiteurs à savoir trois

Concernant les fonctionnalités présentes en tant qu'admin connecté ce sont les suivantes : Accueil, FAQ, rechercher, membres, groupes, profils , messagerie et deconnection. Mais dans les faits plus tard j'aurais aimé réussir a virer FAQ et rechercher de cette barre également mais c'est pas très génant pour le moment.

Donc concretement j'aimerais que la barre s'adapte à mes trois options visiteurs et qu'elle ne soit pas collée à mon forum en dessous, en laissant un espace pour aérer.

Voici ce que j'aurais aimé avoir :

[Milouze14Fondateur]

Hum, c'est bien pour la version ModernBB Hedi ?

Tu as choisis PHPBB2 .
Si c'est une erreur, cliques sur le bouton "EDITER" de ton message et choisis la bonne version.
Je vois cela pour adapter la largeur en tant qu'invité.

[Kid13]

Euh oui ModernBB pardon, faut vraiment que j'aille dormir j'suis a l'envers mdr

[Milouze14Fondateur]

Ah ben si tu n'as pas dormis, il est vrai que cela doit commencer à être dur ..

Alors pour ta barre de navigation et non la Toolbar.

On va créer un script qui va ajouter une class qui va nous permettre de réduire la largeur de cette dernière.
Et ajouter un saut de ligne afin de laisser une petite marge avant le début de ton fofo.



Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Cocher sur toutes les pages.

Déposer ceci:

Code:


$(function() {
if (_userdata["user_id"] < (0)){
$('.M14_NAV_BAR').addClass('invite');
$('.M14_NAV_BAR.invite').after('<br />');
}});



Penser a cliquer sur le bouton

Il faut toujours penser que sur la plupart des codages html,
on se base sur 100% pour les largeurs.


J'ai défini une largeur de 30% pour les invités.
Puis un margin-left de 35%

Donc 35% + 30% et d'office 35% de la droite(mais nous ne sommes pas obligé de le renseigner dans la feuille de style , mais il faut en tenir compte pour le calcul).
Nous arrivons à 100% .


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


/*LARGEUR DE LA BARRE DE NAVIGATION POUR LES INVITES*/
.M14_NAV_BAR.invite
{
width:30%;
margin-left:35%;
}


Penser a cliquer sur le bouton


Et voilou Hedi.

[Kid13]

Alors j'ai du surement me manquer quelque part parce que ca ne marche pas je te link les screens :

[Kid13]

[Kid13]

J'ai tenté de laisser un saut a la ligne mais ca me le supprime automatiquement

[Milouze14Fondateur]

Hum, c'est fonctionnel sur ton fofo, il faut surement bien actualiser ton navigateur en appuyant simultanément sur les touches CTRL et F5 de ton clavier.


Si la hauteur n'est pas suffisante entre le fofo et la barre de navigation , tu peux remplacer:

Code:


    /*LARGEUR DE LA BARRE DE NAVIGATION POUR LES INVITES*/
    .M14_NAV_BAR.invite
    {
    width:30%;
    margin-left:35%;
    }


Par:


 

Code:

 /*LARGEUR DE LA BARRE DE NAVIGATION POUR LES INVITES*/
    .M14_NAV_BAR.invite
    {
    width:30%;
    margin-left:35%;
margin-bottom:60px;
    }

Edit:

Merci de me donner les styles ou scripts en te servant du bouton de l'éditeur 

[Kid13]

Tu le vois fonctionnel sur mon fofo toi la? Parce que moi malgré ta recommandation de ctrl + f5 ca change rien

[Kid13]

Ah yes j'ai vidé les cookies et ca a marché

[Milouze14Fondateur]

Ok super Hedi,
j'ai édité mon message précédent pour que tu puisses mettre les styles et scripts en te
servant du bouton présent sur l'éditeur  

[Kid13]

Euh j'ai pas réellement compris ta question mais sinon ca me derange pas de te donner les acces a mon fofo si tu veux. La seul chose que j'aime pas trop la, c'est que c'est pas centré l'écriture au niveau de la barre noir et que c'est un poil trop grand encore

Edit : Désolé j'avais prevenu j'suis un tanche en informatique mdr

[Milouze14Fondateur]

Euh j'ai pas réellement compris ta question mais sinon ca me derange pas de te donner les acces a mon fofo si tu veux

En fait , tu me donnes des captures alors que moi je désires avoir le contenu réel, c'est plus parlant (enfin pour moi ).

La seul chose que j'aime pas trop la, c'est que c'est pas centré l'écriture au niveau de la barre noir et que c'est un poil trop grand encore

Pour l'écriture centrée, c'est le style par défaut de la css de base que propose Forumactif.

On va corriger cela:


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


.M14_NAV_BAR ul li
{margin: 20px 0px 20px 0px !important;}


Penser a cliquer sur le bouton


Pour réduire encore, il faut modifier cela dans ce style déjà présent :

Code:


     /*LARGEUR DE LA BARRE DE NAVIGATION POUR LES INVITES*/
        .M14_NAV_BAR.invite
        {
        width:30%;
        margin-left:35%;
    margin-bottom:60px;
        }


Modifier la valeur du 30% avec une valeur inférieure et augmenter la valeur du 35%

Admettons que tu souhaites mettre 26%

Il faudra remplacer par

Code:


     /*LARGEUR DE LA BARRE DE NAVIGATION POUR LES INVITES*/
        .M14_NAV_BAR.invite
        {
        width:26%;
        margin-left:37%;
    margin-bottom:60px;
        }


Edit : Désolé j'avais prevenu j'suis un tanche en informatique mdr

Il faut bien commencer Hedi

[Kid13]

Ah la c'est centré niquel. J'ai plus ou moins compris les % par contre si on passe de 30 a 26 et de 35 a 37 c'est pas proportionnel du coup comment du calcul ca?

Edit : en arrivant a 18% et 41% ca donne un truc niquel merci beaucoups c'est parfait la

Edit2 : Tu m'as beaucoup aidé, merci d'avoir pris de ton temps et de ta patience pour m'aider et m'expliquer j'vais allez pioncer parce que j'arrive plus a garder les yeux ouverts bonne nuit ou bonne journée ^^

[Milouze14Fondateur]

Bonne nuit alors ;) .
Alors pour les explications je l'ai donné ici Hedi :

https://www.milouze14.com/t32646-modernbb-probleme-d-ajustement-de-la-barre-de-la-barre-de-navigation#621649

Pour être plus simple et pour être en relation avec ce style ajouté:

Code:

.M14_NAV_BAR ul li
{margin: 20px 0px 20px 0px !important;}

Il ne faut pas diminuer la largeur car il faut prendre en compte le style mentionné au dessus Hedi.
Il ajoute une marge aussi......


On part toujours de 100%.
Si tu veux une largeur de 20%:

Code:

width: 20%;

100- 20 =80
On obtient 80.
Que l'on divise en deux:
40
Comme on ne se soucis par de la marge droite mais que de celle de gauche:

Code:

margin-left: 40%;

Ce style serait parfait en remplacement de l'autre Hedi:

Code:

.M14_NAV_BAR.invite {
    margin-bottom: 60px;
    margin-left: 40%;
    width: 20%;
}

[Kid13]

D'accord je vois, néanmoins je sais pas si c'est normal, ou si c'le code java que j'ai mal transcrit mais en tant que "connecté", je vois toujours la "barre" de couleur hyper grande, comme ceci :

PS : La hauteur de la bande correspond au margin 60 px?

[Milouze14Fondateur]

Tu veux aussi pour les membres connectés Hedi ?

La hauteur de la bande correspond au margin 60 px?

En aucune façon Hedi.

[Kid13]

Ah non c'est bon j'pensais tu m'avais demandé le nombre d'onglet en étant connecté car ca devait s'adapter aussi mais sinon non c'bon c'pas necessaire, merci.

Du coup sujet résolu, merci encore de ton aide, je classe ca.

[Milouze14Fondateur]

Sinon, on peut aussi le faire si tu le désires

[Milouze14Fondateur]

Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande