2 petits problème avec ma barre de navigation

[Neffa]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : depuis que j'ai mis ce code
Lien du forum : http://hbsfifa.boum.tv

Description du problème

Bonjour, j'aimerai faire une barre de navigation de ce style:

Voici la mienne: (je ne sais pas quoi ajouter pour avoir un rendu comme sur l'image 1)


Voici le css actuel:

Code:

.bodyline {
border-top: 0px solid #fff;
  border-right: 4px solid #47898F;
  border-left: 4px solid #47898F;
  border-bottom: 0px solid #fff;
  box-shadow: 0px 0px 3px #000;
}

/* GENERAL ET CORPS DE PAGE */


body
{
  margin: 0;
  padding: 0px;
}

.navigation
{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.navigation div
{
  box-sizing: border-box;
  width: 60%;
  margin: auto;
        min-width: 60%;
  border-bottom: 2px solid #A7D94A;
  border-top: 2px solid #;
  text-align: center;
  box-shadow: 0px 0px 3px #000;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
  background-color: #47898F;
}

a.mainmenu {
    padding-top: 10px;
font-family: Lato;
font-size: 12px;
color: #FFF;
    text-shadow: 0px 1px 0px #757575;
  font-weight : normal;
  text-transform: uppercase;
}

J'ai aussi un autre petit problème avec le etxte de la barre de navigation, depuis que j'ai mis ce code javascript pour enlever le pseudo après "Déconnexion"

Code:

$(function() {
$('a.mainmenu[href^="/login?logout=1&tid="]').text('Déconnexion');
});

Le Déconnexion ne se met pas comme les autres, il est trop collé à "Profil"
https://www.noelshack.com/2017-26-3-1498664313-yy.png

[Neffa]

up

[Tawn62]

Code:

.navigation div {width:100%}

[Neffa]

Non je ne veux pas la mettre à 100%, je veux la garder à 60%, regarde mon forum hbsfifa.boum.tv, je veux juste que la barre verte fluo s'accorde proprement avec les contours comme l'image 1, merci quand meme

[◦Jay◦]

Bonjour Neffa, votre code actuellement est comme ceci :

Code:

.navigation div
{
  box-sizing: border-box;
  width: 60%;
  margin: auto;
        min-width: 60%;
  border-bottom: 2px solid #A7D94A;
  border-top: 2px solid #;
  text-align: center;
  box-shadow: 0px 0px 3px #000;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
  background-color: #47898F;
}

Remplacez-le par :

Code:

.navigation div
{
  width: 59.5%;
  margin:auto;
  border-bottom: 2px solid #A7D94A;
  text-align: center;
  background-color: #47898F;
}

Pour votre problème d'espace avant le bouton déconnexion, essayez ceci, réglez l'espace(20px) comme bon vous semble :

Code:

a#logout.mainmenu{padding-left:20px !important;}

Bien à vous.

[Neffa]

Salut tes deux codes focntionnent très bien, merci beaucoup  :youopi: