Barre de navigation

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

Résolu Barre de navigation

Message par So-Mush le Ven 10 Juin 2011 - 23:19

Bonjour,

J'ai mis en place sur mon forum la barre de navigation en hauteur grâce à ce sujet:
http://forum.forumactif.com/t301744-mettre-sa-barre-de-navigation-en-haut-du-forum

Cependant j'aurais une requête:
J'aimerais reproduire l'effet d'arrière plan qu'il y a avec la barre de navigation sur ce forum
http://www.naruto-ninja-rpg.com/
Comme vous pouvez le voir l'arrière plan de la barre prend toute la largeur du forum est en bas il est délimité avec une trait noir.

Voilà à quoi ressemble ma barre de navigation actuellement:


Vous pourrez voir que la couleur en arrière plan ne va pas jusqu'au bout du coté gauche de ma page,

Et voici le code de ma feuille de style css:
Code:
.navig {
position: absolute;
top: 0px;
width: 100%;
background-color: #524444;
}

J'aimerais pouvoir donc élargir la taille de l'arrière plan de ma barre de navigation et aussi avoir une barre de couleur différente a son extrémité inférieure.

Je vous remercie par avance,

Cordialement Very Happy


Dernière édition par Freak-M le Sam 11 Juin 2011 - 15:21, édité 1 fois

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation

Message par Convivialite le Sam 11 Juin 2011 - 7:52

Bonjour

pour personnaliser ta barre

Code:
.navig {
position: absolute;
top: 0px;
width: 100%;
background-color: #524444;
height: 50px;
border-bottom: 3px solid #000000;
}

hauteur de la barre , plus ou moins , comme tu veux

Code:
height: 50px;


le trait noir du bas

Code:
border-bottom: 3px solid #000000;

tu peux changer la couleur de fond par une petite image de dégradé comme sur le forum que tu donne en exemple

Code:
background-image: url("l'url de l'image");

Amicalement

Convivialite
+ Hyperactif +

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

Message par So-Mush le Sam 11 Juin 2011 - 13:57

ça marche parfaitement merci Very Happy
J'ai juste le problème avec le bord gauche qui persiste Confused

J'ai remarqué que dans ma feuille de style s'il y avait le code pour la barre de navigation une barre de défilement latérale s'affichait en bas de page de mon forum (comme vous pouvez le voir sur le sreen avec la flèche rouge)


Évidemment si je déplace cette barre là ma barre de navigation est centré et on ne voit plus l'espace qu'il y a.

Et quand je modifie la partie
Code:
width: 100%;
du code de la barre de navigation de ma feuille de style css ( que je met par exemple 99%) cette barre disparait, mais le problème est que la photo que j'ai mis en arrière plan (comme vous me l'avez proposé) n'est plus sur la totalité de la page a ce moment là il y a un espacement entre les bords gauches et droit du forum comme vous pouvez le voir sur le sreen:

flèche rouge: espace gauche
flèche verte: espace droit

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation

Message par tupac le Sam 11 Juin 2011 - 15:03

Bonjour

Essayez de rajouter un left: 0px; et right: 0px; dans votre code css.

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre de navigation

Message par So-Mush le Sam 11 Juin 2011 - 15:09

C'est parfait Very Happy
Bin voilà... à qui je rajoute le merci maintenant sachant que vous m'avez tout les deux réglé mon problème ? Embarassed

Edit: bon allé je vais le mettre à tupac car il a moins de réputation, je pense que Convivialite comprendra I love you

So-Mush
****

Féminin
Messages : 332
Inscrit(e) le : 09/01/2010

http://freak-muse.forumactif.com/
So-Mush a été remercié(e) par l'auteur de ce sujet.

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


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