Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[MODERNBB] Probleme d'ajustement de la barre de fonctionnalité


3 participants

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

avatar
Kid13
https://doj-intranet.forumactif.com/

MessageKid13 Lun 18 Mai 2020 - 4:34

  • Version du forum :
    MODERNBB
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Alors voila, après que tu m'aies donné de quoi modifier la barre en largeur, j'aimerais maintenant pourvoir l'ajuster en hauteur pour qu'elle puisse rentrer pile poil.
La largeur étant nickel la, y'a que la hauteur qui me dérange un peu. Et si possible la centrer un peu plus avec l'image au dessus, la elle me semble un peu trop sur la droite donc décentré.

Comme ceci :

[MODERNBB] Probleme d'ajustement de la barre de fonctionnalité Fofo_m10


Dernière édition par Kid13 le Lun 18 Mai 2020 - 16:46, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 18 Mai 2020 - 6:04

Hello Hedi,

prend l'habitude de donner le style donné sur ta dernière demande Hedi, je ne peux pas mémoriser toute l"entraide de mon côté.

Alors , il faut remplacer ce qui peut ressembler à ceci:

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

Par :
Code:

.M14_NAV_BAR.invite
{      margin-top: 60px;
   margin-bottom: 60px;
   margin-left: auto;
   width: 16%;
   margin-right: auto;
}

Pour les explications:
margin-top = marge du haut
margin-left = marge de gauche
margin-right = marge de droite
margin-bottom = marge du bas

A toi de modifier la valeur pour le haut et le bas.
On laisse donc les marge gauche et droite en auto afin que le navigateur centre le contenu.
avatar
Kid13
https://doj-intranet.forumactif.com/

MessageKid13 Lun 18 Mai 2020 - 6:16

Alors j'ai essayé plusieurs valeur, la derniere étant :

Code:

.M14_NAV_BAR.invite
{      margin-top: 5px;
   margin-bottom: 5px;
   margin-left: auto;
   width: 16%;
   margin-right: auto;
}

Mais ca ne me change pas du coup la hauteur. (Par contre le centrage marche niquel merci)


Dernière édition par Milouze14 le Lun 18 Mai 2020 - 6:21, édité 1 fois (Raison : AJOUT BALISE CODE!!!!!!!!!!!!!!!!!!!!!!!!!!!!!)
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 18 Mai 2020 - 6:23

Augmentes la valeur du margin-top /margin-bottom  Hedi et merci de mettre le contenu entre les balise codes .
Une aide ici:

https://www.milouze14.com/t32647-comment-inserer-du-contenu-entre-les-balises-codes#621665

Je me sauve cher ami, à ce soir coucou .
avatar
Kid13
https://doj-intranet.forumactif.com/

MessageKid13 Lun 18 Mai 2020 - 6:31

Ah mais en faite ca change l'espace entre le logo et la barre et entre la barre et le forum en dessous, moi je voulais ajuster la barre en elle même pour qu'elle ne couvre que les options "Accueil" "S'enregistrer" et "Connection" sans dépasser.

D'accord à ce soir et merci pour l'aide.
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Lun 18 Mai 2020 - 12:32

Bonjour Philippe et Hedi.

Si j'ai bien compris ta demande Hedi, il faut ajuster dans ton css la valeur du width.

Par exemple remplace ton 16% par 22% ainsi:
Code:
width: 22%;
avatar
Kid13
https://doj-intranet.forumactif.com/

MessageKid13 Lun 18 Mai 2020 - 13:59

Bonjour merci de ta réponse, néanmoins si je touche le width, ca impacte sur la largeur de la bande et non la hauteur.
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Lun 18 Mai 2020 - 15:07

Pour la hauteur, il faut que tu fasses du ménage dans ton css me semble-t-il.

Retirer les margin dans .navbar li et dans .M14_NAV_BAR ul li.
La hauteur se règle ensuite en ajustant le line-height dans .navbar a

Il faudrait tendre vers ça:
Code:

.navbar li {
   display: inline-block;
   /* margin: 25px 0 0; */
}


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

.M14_NAV_BAR.invite {
   margin: 50px auto 60px;
   width: 24%;
}
.navbar a {
   border-radius: 3px;
   color: #FFF;
   display: inline-block;
   font-size: 1.3rem;
   line-height: 20px;
   padding: 6px;
}
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 18 Mai 2020 - 15:46

Hello Hedi et Serge,
effectivement cela se situe au niveau de la balise li.

Modifier ceci:
Code:
.M14_NAV_BAR ul li {
  /* margin: 20px 0 !important; */
}

Par ceci:
Code:
.M14_NAV_BAR ul li {
  /* margin: 10px 0 !important; */
}

Mais on ne pourra pas faire mieux Hedi ;) .
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Lun 18 Mai 2020 - 16:23

Hello Phil,

.M14_NAV_BAR ul li  était dans mon esprit du css à supprimer, ainsi que la ligne dans .navbar li.

C'est volontairement en commentaire dans mon message :-)
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 18 Mai 2020 - 16:28

Hello Serge,

supprimé non, car on reprend la css de base clin oeil
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Lun 18 Mai 2020 - 16:35

Ah OK.
avatar
Kid13
https://doj-intranet.forumactif.com/

MessageKid13 Lun 18 Mai 2020 - 16:45

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

C'était en 20px j'ai remplacé et ca marche niquel, merci encore et du coup c'classé. Vous m'avez refait le fofo merci a vous.
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Lun 18 Mai 2020 - 16:49

De rien Hedi,


Hello


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

A bientôt pour une prochaine demande clin oeil



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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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