Barre de Navigation personnalisé.

2 participants

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

Résolu Barre de Navigation personnalisé.

Message par Ly-die Dim 12 Juin 2011 - 10:52

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 ^_^


Dernière édition par Ly-die le Dim 12 Juin 2011 - 16:00, édité 1 fois
Ly-die

Ly-die
*

Féminin
Messages : 37
Inscrit(e) le : 19/12/2008

http://www.ningyoudolls.com/
Ly-die a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Convivialite Dim 12 Juin 2011 - 11:00

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
Convivialite

Convivialite
Membre actif

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Ly-die Dim 12 Juin 2011 - 11:04

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é ? Embarassed
Ly-die

Ly-die
*

Féminin
Messages : 37
Inscrit(e) le : 19/12/2008

http://www.ningyoudolls.com/
Ly-die a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Convivialite Dim 12 Juin 2011 - 11:05

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%;
}
Convivialite

Convivialite
Membre actif

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Ly-die Dim 12 Juin 2011 - 11:33



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...

Ly-die

Ly-die
*

Féminin
Messages : 37
Inscrit(e) le : 19/12/2008

http://www.ningyoudolls.com/
Ly-die a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Convivialite Dim 12 Juin 2011 - 11:36

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

Convivialite
Membre actif

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Ly-die Dim 12 Juin 2011 - 11:43

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

Ly-die
*

Féminin
Messages : 37
Inscrit(e) le : 19/12/2008

http://www.ningyoudolls.com/
Ly-die a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Convivialite Dim 12 Juin 2011 - 11:45

si , tes contours sont bon :lol!:

tu veux les modifier ?
Convivialite

Convivialite
Membre actif

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Ly-die Dim 12 Juin 2011 - 11:49

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. Embarassed
Ly-die

Ly-die
*

Féminin
Messages : 37
Inscrit(e) le : 19/12/2008

http://www.ningyoudolls.com/
Ly-die a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Convivialite Dim 12 Juin 2011 - 11:56

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
Convivialite

Convivialite
Membre actif

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Ly-die Dim 12 Juin 2011 - 12:01

Hum ! Voilà ce que sa donne :ici.
Ly-die

Ly-die
*

Féminin
Messages : 37
Inscrit(e) le : 19/12/2008

http://www.ningyoudolls.com/
Ly-die a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Convivialite Dim 12 Juin 2011 - 12:07

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 scratch
Convivialite

Convivialite
Membre actif

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Ly-die Dim 12 Juin 2011 - 12:20

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... Confused
Ly-die

Ly-die
*

Féminin
Messages : 37
Inscrit(e) le : 19/12/2008

http://www.ningyoudolls.com/
Ly-die a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Convivialite Dim 12 Juin 2011 - 12:39

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

Convivialite
Membre actif

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Convivialite Dim 12 Juin 2011 - 15:44

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

Barre de Navigation personnalisé. 324
Convivialite

Convivialite
Membre actif

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Ly-die Dim 12 Juin 2011 - 16:00

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

Ly-die
*

Féminin
Messages : 37
Inscrit(e) le : 19/12/2008

http://www.ningyoudolls.com/
Ly-die a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de Navigation personnalisé.

Message par Convivialite Dim 12 Juin 2011 - 16:03


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;
}

Convivialite

Convivialite
Membre actif

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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