| Besoin d'aide pour finaliser une barre de navigation | |
|
Poloiste-LCK
{ Membre }
Messages : 9
| Bonjour, Je veux changer la barre de navigation de mon forum. Jusque là tout va bien, je recherche un menu déjà existant mais malheureusement rien ne me convient. Rien est grave, je décide de le créer moi même. C'est parti je recherche des codes déjà existants et je mixe le tout. Jusque là tout allé bien mais désormais je me retrouve confronter aux problème suivant : - Je n'arrive pas à centrer la barre de navigation
- Je n'arrive pas à modifier l'image de fond pour les sous listes. J'ai toujours le fond principal malgré divers essai de code.
- Je souhaiterai que la barre de navigation se prolonge sur toute la largeur du forum
Ici le thème où il y a la barre de navigation en cours de création Mon code CSS : - Spoiler:
- Code:
-
#CSSMENU, #CSSMENU ul /* Liste */ { padding : 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; /* on supprime le style par défaut de la liste */ line-height : 39px; /* on définit une hauteur pour chaque élément */ text-align : center; /* on centre le texte qui se trouve dans la liste */ border-top : 1px solid #C0C0C0; /* on met une bordure blanche à droite de chaque élément */ border-bottom : 1px solid #C0C0C0; /* on met une bordure blanche à droite de chaque élément */ }
#CSSMENU /* Ensemble du CSSMENU */ { font-weight : bold; /* on met le texte en gras */ font-family : Comic Sans MS; /* on utilise Arial, c'est plus beau ^^ */ font-size : 14px; /* hauteur du texte : 14 pixels */ }
#CSSMENU a /* Contenu des listes */ { display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ padding : 0; /* aucune marge intérieure */ background : url('http://img89.xooimage.com/files/d/c/a/fond-bleu-clair-36fc6a9.jpg') repeat ; /* image de fond */ color : #000; /* couleur du texte */ text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ width : 145px; /* largeur */ }
#CSSMENU a:hover { color : #fff; /* blanc */ background : url('http://img89.xooimage.com/files/e/3/2/fond-bleu-clair-hover-36fc774.jpg') repeat ; /* image de fond */ }
#CSSMENU li /* Elements des listes */ { float : left; /* pour IE qui ne reconnaît pas "transparent" */ border-right : 1px solid #C0C0C0; /* on met une bordure blanche à droite de chaque élément */ }
/* IE ne reconnaissant pas le sélecteur ">" */ #CSSMENU li { border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */ }
#CSSMENU li ul /* Sous-listes */ { position: absolute; /* Position absolue */ width: 145px; /* Largeur des sous-listes */ left: -999em; /* Hop, on envoie loin du champ de vision */ }
#CSSMENU li ul li /* Éléments de sous-listes */ { /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-top : 1px solid #C0C0C0; /* on met une bordure blanche en haut de chaque élément d'une sous liste */ }
/* IE ne reconnaissant pas le sélecteur ">" */ #CSSMENU li ul li { border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */ }
#CSSMENU li ul ul { margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-left : 1px solid #C0C0C0 ; /* Petite bordure à gauche pour ne pas coller ### */ }
/* IE ne reconnaissant pas le sélecteur ">" ### je me répète ;-) */ #CSSMENU li ul ul { border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */ }
#CSSMENU li:hover ul ul, #CSSMENU li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */ { left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */ }
#CSSMENU li:hover ul, #CSSMENU li li:hover ul, #CSSMENU li.sfhover ul, #CSSMENU li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */ { left: auto; /* Repositionnement normal */ min-height: 0; /* Corrige un bug sous IE */ }
Le code html : - Spoiler:
- Code:
-
<ul id="CSSMENU">
<li> <a href="http://fanatic-poloiste.xooit.fr/portal.php">Accueil</a> </li> <li> <a href="http://fanatic-poloiste.xooit.fr/portal.php">Forum</a> </li> <li> <a href="http://fanatic-poloiste.xooit.fr/f54-Sport-de-pagaies.htm">Compétition</a> <ul> <li><a href="http://fanatic-poloiste.xooit.fr/portal.php?pid=137">Kayak-polo N2</a></li> <li><a href="http://fanatic-poloiste.xooit.fr/portal.php?pid=155">Kayak-polo N4</a></li> <li><a href="http://fanatic-poloiste.xooit.fr/t443-Classement-national-des-competiteurs-de-Loeuilly-C-K.htm">Slalom</a></li> </ul> </li> <li> <a href="http://fanatic-poloiste.xooit.fr/profile.php?mode=editprofile">Mon profil</a> <ul> <li><a href="http://fanatic-poloiste.xooit.fr/privmsg.php?folder=inbox">Messagerie personnelle</a></li> </ul> </li> <li> <a href="http://fanatic-poloiste.xooit.fr/login.php">Connexion</a> </li> <li> <a href="http://fanatic-poloiste.xooit.fr/login.php?logout=true">Déconnexion</a> </li> <li> <a href="http://www.loeuilly-canoekayak.com/">Retour au site</a> </li> </ul>
Merci pour l'aide que vous saurez m'apporter | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Bonjour,
Pour centrer la barre de navigation, il faut fixer sa largeur exacte (soit 1022px ici) et ajouter un margin:auto; dans la définition de #CSSMENU ul (dans l'idéal il faudrait éviter de mettre un nom de classe entièrement en majuscules...)
Pour l'image de fond des "sous listes", c'est en fait l'image de fond "des liens dans les sous listes" que tu dois changer, vu que le fond est sur les liens.
Et... mais attends pourquoi elle marche très bien sur ton portail ? O.o | | |
|
| |
Poloiste-LCK
{ Membre }
Messages : 9
| Merci pour le centrage ça fonctionne parfaitement Ce que je désire réaliser pour les sous liste c'est avoir une image de fond différente. Actuellement c'est la même image que la barre de navigation et du coups ça ne fait pas jolie quand l'image se répète. Je désire en mettre une uniforme pour éviter se problème d'image qui se répète. Du style : Je pense qu'il faut que je modifie le #CSSMENU li. J'ai testé d'ajouter l'image dedans mais ça na pas fonctionner. Je ne sais pas trop comment m'y prendre sur ce coups là. | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Ben c'est ce que j'ai dit. Tel que c'est codé, l'image de fond est sur les liens, donc il te faut t'arranger pour que les liens dans les "sous listes" aient un autre fond '_'
Et tu n'as pas répondu à ma question, n'est-ce pas déjà tout codé proprement sur ton portail ? | | |
|
| |
Poloiste-LCK
{ Membre }
Messages : 9
| Oui je vois, penses-tu qu'il faut que je modifie le css de la balise - Code:
-
<ul></ul> ? Je vois pas comment je peux isoler les sous listes en dehors de la balise ul... Sur le portail, il s'agit d'une barre de navigation générée par un générateur en ligne. J'ai pas accès au css... | | |
|
| |
'Christa
Lostmindy
Messages : 2856
| Bien sûr que si tu as accès au CSS, il te suffit de regarder le code source. Bon, je pensais que tu étais plus expérimenté vu la nature du code mais en fait tu n'y comprends rien je crois XD Du coup c'est parti pour des explications plus claires : Dans ton CSS tu as ça : - Code:
-
#CSSMENU a /* Contenu des listes */ { background : url('http://img89.xooimage.com/files/d/c/a/fond-bleu-clair-36fc6a9.jpg') repeat ; /* image de fond */ } Les liens (a) de ton menu ont un fond bien précis, ce n'est pas la liste qui a un fond mais les liens utilisés. Moralité, il faut que les liens dans les sous menus aient une autre image de fond, ou un fond uni tout simple : - Code:
-
#CSSMENU ul a { background-color: blue; background-image: none; } Pour que la barre s'étende sur toute la largeur du forum, il faut que tu l'inclues dans une div, genre - Code:
-
<div class="MonMenu"><ul id="CSSMENU"> blablabla </ul></div> Et que tu mettes un fond et tout dans la classe .MonMenu que tu déclareras donc dans le CSS '_' | | |
|
| |
Poloiste-LCK
{ Membre }
Messages : 9
| En effet j'étais complétement à la rue. Avec une div ça passe impec. Le résultat est à la hauteur de mon espérance. Merci beaucoup pour ton aide. Il me reste deux trois bricoles à finaliser. En tout cas merci beaucoup | | |
|
| |
Psycho
Psychopathe
Messages : 3407
| Yop' Peut-on archiver le sujet, si le problème est entièrement résolu ? Merci d'avance de ta réponse | | |
|
| |
Poloiste-LCK
{ Membre }
Messages : 9
| Oui vous pouvez l'archiver. Merci beaucoup pour votre aide | | |
|
| |
Psycho
Psychopathe
Messages : 3407
| C'est noté, je déplace dans ce cas (: Merci de ta réponse rapide ! | | |
|
| |
Contenu sponsorisé
| |
| |
| Besoin d'aide pour finaliser une barre de navigation | |
|