Barre de Navigation personnalisé.

[Ly-die]

Bonjour,
J'aimerais avoir une barre de navigation (qui déjà restera toujours en haut du forum, même si on décent !). Et transparente avec un arrondi au niveau des deux extrémités. Comme en exemple ici. Avec comme CSS, tout en majuscule avec une ombre blanche au niveau du texte et les textes rapprochés. Voilà, merci d'avance ^_^

[Convivialite]

Bonjour

voici un tuto pour la barre de navigation en haut


https://forum.forumactif.com/t301744-mettre-sa-barre-de-navigation-en-haut-du-forum


Amicalement

[Ly-die]

Merci pour le lien, par contre sa me dit pas exactement pour ce que je voudrais, genre la transparence, la barre arrondi et le texte resserré ?

[Convivialite]

se seront des modifications par css quand ta barre sera en haut

ex:

Code:

.navig {
position: absolute;
top: 0px;
width: 100%;
}

pour qu'elle reste sur le forum

Code:

.navig {
position: fixed;
top: 0px;
width: 100%;
}

[Ly-die]

Merci alors j'ai réussi à faire en sorte que la barre reste même si l'on descend le forum.
Par contre pour le fond transparent arrondi (qui ne fait pas toute la longueur du forum), je n'arrive pas =/
Je pense que déjà rien que mon Template Overall_header est en bazar (sa structure avait déjà était modifier du coup j'ai du mal à m'y retrouver) et le CSS aussi...

[Convivialite]

c'est le forum de ton profil ?, car il y a déjà des contours sur ta barre

[Ly-die]

Oui c'est le forum de mon profil.
Les contours sont pas bon ? c'est plus un fond non ?
Je suis perdu...

[Convivialite]

si , tes contours sont bon :lol!:

tu veux les modifier ?

[Ly-die]

Oui, pour qu'il soit comme dans mon exemple, "UN" contour et pas "DES" contours... je sais pas si tu vois ce que je veux dire ^_^' et puis arrondi :
https://2img.net/r/ihimizer/img34/513/barrenavigationexemple.png
et transparente si possible (opacité 50%), et les textes rapprochés.

[Convivialite]

ok

dans ta feuille de css , tu as

Code:



BARRE DE NAVIGATION
a.mainmenu {
-moz-border-radius:20px;
background-color:#faf6dc;
border:1px solid #ffffff;
color:#d68996;
text-shadow: #ffffff 2px 1px 2px;
font-size:11px;
font-family:Georgia;
font-style:italic;
font-weight:bold;
padding-right:-3px;
padding-left:-3px;
padding-top:1px;
padding-bottom:2px;
text-transform:uppercase;
width:50px;}

a.mainmenu:hover {
-moz-border-radius:20px;
background-color:#faf6dc;
border:1px solid #ffffff;
color:#f0b4be;
text-shadow: #ffffff 2px 1px 2px;
font-size:11px;
font-family:Georgia;
font-style:italic;
font-weight:bold;
padding-right:-3px;
padding-left:-3px;
padding-top:1px;
padding-bottom:2px;
text-transform:uppercase;
width:50px;}


a.mainmenu img {display:none}




supprime et mets ce code a la place

Code:


.navig {
position: fixed;
top: 0px;
width: 800 px;
text-transform:uppercase;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
border : #251628  3px;
}

regarde ce que ça donne et on ajuste après

[Ly-die]

Hum ! Voilà ce que sa donne :ici.

[Convivialite]

rajoute lui

Code:

position: center ;

je fais un essai sur mon forum de test et je te dis pourquoi il n'y a pas les contours

[Ly-die]

Code:

.navig {
position: fixed;
position: center ;
top: 0px;
width: 800 px;
text-transform:uppercase;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
border : #251628  3px;
}

Ok, sinon la barre reste sur la gauche aussi ^_^' Je pense que c'est du au template...

[Convivialite]

sur mon forum de test avec ce code la barre a des contours arrondis

Code:

.navig {
position: fixed;
position: top-center;
top: 0px;
width: 100%;
border : #251628 solid  3px;
text-transform:uppercase;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}

j'ai remis " width: 100%; " c'est ça qui la centre

[Convivialite]

Hello

pour obtenir ce que tu veux , il va falloir changer le code du tuto

dans le template Overall header

tu supprime le code donné dans le tuto

Code:

<center><div class="navig">{GENERATED_NAV_BAR}</div></center>

pour mettre celui ci a sa place

Code:

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}" id="navig">
  <tr>
      <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
  </tr>
</table>

dans ta feuille de css , tu mets

Code:

#navig {
 border : #251628 solid  3px;
border-top : #251628 solid  0px;
-moz-border-radius: 0px 0px 20px 20px;
-webkit-border-radius: 0px 0px 20px 20px;
border-radius: 20px;
}


#navig:hover{text-transform:uppercase;}

tu peux changer la couleur et l'épaisseur du trait

Code:

 border : #251628 solid  3px;

ce code est pour les majuscule

Code:

#navig:hover{text-transform:uppercase;}

ce que ça donne

[Ly-die]

Ah ! Merci ^_^ sa marche !!!
Bon par contre la barre ne vas en haut.
Pour faire l'effet mais c'est pas grave.

[Convivialite]

Edit

j'avais mal compris

pour qu'elle soit tout en haut et qu'elle reste sur le forum rajoute

Code:

top: 0px;
position: fixed;

ce qui donne au complet

Code:

#navig {
top: 0px;
position: fixed;
 border : #251628 solid  3px;
border-top : #251628 solid  0px;
-moz-border-radius: 0px 0px 20px 20px;
-webkit-border-radius: 0px 0px 20px 20px;
border-radius: 20px;
}