[Réglé] Hauteur des menus "header"

[Phil]

Bonjour,

après avoir été mis sur la voix pour agrandir la hauteur du banner (logo)...Encore merci.

Je m´aperçois que le menu "header" que j´ai trouver dans le CSS est trop haut.

Donc, est ce qu´un expert pourrai s m´orienter pour gérer la hauteur du de ce dernier ?

Mille merci

[Phil]

Peut être ne suis-je pas assez précis dans mon explication.Avec un screen , cela va peut être, être plus parlant

---

[quote='Phil' pid='40840' dateline='1411470589']
Peut être ne suis-je pas assez précis dans mon explication.Avec un screen , cela va peut être, être plus parlant

[spyto]

Je ne vois pas du tout le menu comme dans ton screen.
Donc je ne suis pas sûr de bien comprendre la question, car pour moi, c'est "propre".

Pour modifier la hauteur de la barre de navigation, il faut jouer sur le sélecteur :

Code :

#logo ul.top_links {
    font-weight: bold;
    margin: -10px 5px 0 0;
    text-align: left;
}

et notamment le 1er paramètre de margin (position top).
Par exemple :

Code :

#logo ul.top_links {
    font-weight: bold;
    margin: -5px 5px 0 0;
    text-align: left;
}

ce qui augmentera la hauteur de 5px (en rabaissant la position haut).

[Phil]

Merci pour votre support

Je vais allé tester tout ça

j´ai demandé à différents membres de mon forum et il voient comme sur le screen lol

http://imageshack.com/a/img538/9181/sI1d0s.png

[spyto]

Moi, je vois ça :
   
sous Firefox 32.0.2

[Phil]

F5 jeune homme et cela devrait ce mettre à jour

[spyto]

ok, c'est ton image du header que tu as changée et qui est trop haute ce qui fait qu'elle "déborde" sur le menu et ne laisse plus de zone blanche comme dans mon screen du message précédent où je n'avais pas réactualisé la page.
Si tu ne veux pas la diminuer il faudrait la "blanchir" dans le bas.

[Phil]

Re,

pour l´image d´avant avec la zone blanche c´est une retouche avec un logiciel de peinture

Par contre j´ai essayé de changer la couleur de cette barre de menu car bleu sur noir , c´est pas lisible .J´ai changé en blanc ...Par contre ça me change également la couleur du texte dans les forums...

Il y a un moyen de séparer les deux ?

[spyto]

Oui, en spécifiant la couleur blanc uniquement dans ce sélecteur :
ul.menu li a {
background-image: url("../../../images/headerlinks_sprite.png");
background-repeat: no-repeat;
color: #fff;
display: inline-block;
padding-left: 15px;
}
Pour le survol, il faudra aussi ajouter :
ul.menu li a:hover {
color: cequeuveux;
text-decoration: underline;(si tu veux)
}

[Phil]

Et bien encore mille merci pour cette aide précieuse

Tout fonctionne à merveille .....

[Saphir]

Ceci est un message préformaté et peut ne correspondre qu'en partie à votre requête.

Bonjour Phil.

Votre requête semble résolue. La discussion a donc été marquée comme étant réglée.

S'il s'agit d'une erreur, répondez à ce message afin que nous annulions le marquage.
Si vous avez de nouveau besoin de nos services, n'hésitez pas à ouvrir une nouvelle discussion dans nos forums de support.

Merci de l'intérêt que vous portez à MyBB !

[Phil]

Bonjour à tous,


de retour après quelques années passées . Je reprend donc les bases, malheureusement pour ce sujet je n´arrive pas à reproduire l´explication donnée à l´époque.

Je suis dans :

Templates & Styles
 / Edit global CSS

J´ai une image pour header ici:

#logo {
    background: #11a1e8;
    background-image: url(images/H4.jpg);
    padding: 180px 0;
    border-bottom: 1px solid #263c30;


Mais dans cette section:

#logo ul.top_links {
    font-weight: bold;
    text-align: left;
    margin: -5px 5px 0 0;
}

Si je change le "margin" en mettant la mème valeur de l´époque, que vous m´aviez indiqué, cela ne "descend pas" le menu en bas de l´image placée dans le header.

https://www.youngskyhunters.com/Forum/

Merci d´avance pour votre aide.

[exdiogene]

Il faudrait modifier la ligne suivante :

#logo {
padding: 360px 0 0 0
}

[Phil]

J´ai mis 360, mais cela me double le background header

https://www.youngskyhunters.com/Forum/

[spyto]

Non, vous avez mis :
#logo {
padding: 360px 0;
}

Or exdiogene a écrit :
#logo {
padding: 360px 0 0 0;
}

Et comme ça c'est correct !

[Phil]

Oups !! Mea culpa

Donc là tout est ok sauf que je vois plus le background image dans le header

https://www.youngskyhunters.com/Forum/

[Phil]

J´ai trouvé !!

#logo ul.top_links {
font-weight: bold;
text-align: left;
margin: 360px 5px 0 0;
}

[spyto]

Moi je voyais tout très bien avec le code précédent ! Peut-être une histoire de cache et/ou de rafraîchissement ?

[Phil]

Ah ok......Bizarre c´est différences quand mème.......

[exdiogene]

C'est que Phil a modifié à deux endroits :

#logo {
padding: 0 0;
}

#logo ul.top_links {
font-weight: bold;
text-align: left;
margin: 355px 5px 0 0;
}

Ce qui est équivalent...