|
 Neal Caffrey 
{ Membre }
 Messages : 121
 | Bonjour, Je souhaiterais modifier mon menu de forum en ceci. Je sais c'est difficile vu mon niveau, mais j'ai trouvé le code sur le même site que l'exemple à savoir: Pour le HTML: - Code:
-
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/> </head> <body> <div id="conteneur-menu2"> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">A propos</a></li> <li><a href="#">Projets</a></li> <li><a href="#">Parcours</a></li> <li><a href="#">Contact</a></li> </ul> </div> </body> Le CSS: - Code:
-
body {
margin: 0;
padding: 0;
font-family:'Abel', arial, serif;
text-transform: uppercase;
background:#313131 url(../img/fond-menu.png) no-repeat top center;
}
#conteneur-menu2 {
height: 150px;
width: 220px;
padding-top: 50px;
margin: 290px auto 0px auto;
}
#conteneur-menu2 ul {
padding: 0;
margin: 0;
margin-left: 50px;
float: left;
}
#conteneur-menu2 ul li {
list-style: none;
padding: 0px;
}
#conteneur-menu2 ul li a {
text-decoration: none;
font-size: 25px;
padding: 4px;
display: block;
color: white;
background: transparent;
width: 230px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
line-height: 20px;
}
#conteneur-menu2 ul li a:hover {
background: #54B6A8;
padding-left: 20px;
width: 130px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
Je l'ai compris dans sa globalité, mais une question demeure: Comment l'adapter aux forumactifs, parce qu'ici il utilise une sorte de récipient "canteneur-menu2 (corrigez moi si je me trompe) afin de pouvoir appliquer son css à l'ensemble de ses liens dans le menu, mais sous forumactif on utilise une génération de menu. Je me suis dis que je devais changer le conteneur par la balise d'un des liens du menu pour tester, mais je ne les connait pas.. En espérant avoir été assez clair dans mes propos, merci d'avance pour votre aide. | | |
|
 | |
Hiro
Ninja Codeur
Messages : 1179
| Salut, Je vais faire quelque tests de mon coté  | | |
|
| | |
Nyo The Neko 
{ Spécialiste }
 Messages : 245
| Par menu, tu veux dire la barre de Navigation en haut du forum? | | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| Bon, voici ce que cela donne : http://kode.1fr1.net/ Après, je pense que tu sauras personnaliser la police etc, car je ne m'y suis pas trop attardé. Le code: Dans ton template overall_header, tu as ce code : - Code:
-
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
Modifie le en : - Code:
-
<tr>
<td class="navi" align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
En suite, dans ton css, met ceci : - Code:
-
.navi {
line-height: 0;
text-align: left;
font-family:Arial;
}
.navi a {
text-decoration: none;
font-size: 15px;
padding: 4px;
display: block;
color: white;
background: transparent;
width: 230px;
line-height: 20px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.navi a:hover {
background: #f04444;
padding-left: 20px;
width: 160px;
}
Cela devrait être bon, si tu as des soucis, je suis là |
Dernière édition par Hiro le Mer 28 Mar 2012, 13:50, édité 2 fois | |
|
| | |
Orange 
RocketMan
Messages : 3086
| Hello,
Je confirme que le code d'Hiro est on ne peut plus fonctionnel: c'est comme ça que j'ai procédé pour la barre de navigation de CSSActif ^^. | | |
|
| | |
'Christa 
Lostmindy
Messages : 2856
| Coucou !
Pourquoi remettre les transitions dans .navi et .navi a:hover ? Ca ne sert à rien '_' Techniquement, on met cette propriété sur la classe "de base" (ici .navi a) et on indique les changements avec la pseudo classe :hover. | | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| Salut Christa, Merci du conseil, une vielle habitude; je vais éditer car il est vrai que cela allège un peu le code | | |
|
| | |
'Christa
Lostmindy
Messages : 2856
| De rien @o@
J'ai appris tout récemment à me servir des transitions (je suis une feignasse, faut que je prenne des commandes pour tester les nouveaux trucs XD), et avec difficulté, du coup maintenant j'ai retenu (^o^)/°
Pure curiosité, pourquoi as-tu mis un line-height:0 sur .navi ? | | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| Pour que cela ressemble plus à l'exemple de l'auteur , sinon vive l'espacement | | |
|
| | |
'Christa
Lostmindy
Messages : 2856
| Curieux d'ailleurs, pourquoi de tels sauts de ligne... *dégaine firebug* Ah, voilà : il y a des espaces (nbsp) entre chaque lien, comme les liens sont des blocs les espaces sautent à la ligne, d'où l'espace monstrueux. Bien pensé x) | | |
|
| | |
Neal Caffrey
{ Membre }
Messages : 121
| J'ai beau faire ce que tu m'as dis de faire, cela ne modifie en rien le menu, pire, ça fous le bazarre sur tout le forum.... Je ne sais pas d'où ça peut venir..
Par contre j'ai créé un forum test tout neuf et ça marche impec, je comprends pas...
Edit: en fait c'est bon. j'ai refait les choses méthodiquement et c'est passé nickel, merci beaucoup !
Dernière petite question, pour le justifier à droite et le mettre dans le même style que celui de css actif, seul le css est suffisant ? | | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| Oui, pas besoin de js | | |
|
| | |
Neal Caffrey
{ Membre }
Messages : 121
| Je pense avoir compris comment le mettre en place.
Faut-il passer par le système de Widget ?
Si oui, comment procéder pour positionner le menu précédemment conçus dans ce widget ? | | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| Ah je n'avais pas compris ta question mais je ne sais pas si je peut t'expliquer comment faire le même que CSSActif ^^ j'espère que tu comprends pourquoi | | |
|
| | |
Neal Caffrey
{ Membre }
Messages : 121
| Oui bien sûr mais je ne veux pas le même ^^.
Car si je le veux j'ai juste à copier coller le code qui s'affiche via firefox. ^^
J'aimerais juste savoir commet introduire le menu dans le widget navigation...
Si ce n'est pas possible, ce n'est pas bien grave je finirais bien par trouver ^^.
En tout cas merci beaucoup pour l'aide fournie ! | | |
|
| | |
Neal Caffrey
{ Membre }
Messages : 121
| C'est bon j'ai finalement trouvé comment faire, merci beaucoup pour l'aide apportée ! | | |
|
| | |
Hiro
Ninja Codeur
Messages : 1179
| D'accord | | |
|
| | |
Neal Caffrey
{ Membre }
Messages : 121
| Voilà le rendu final si ça vous intéresse ^^.
->ICI<- | | |
|
| | |
Murtagh 
{ Modérateur }
Messages : 1492
| Content de voir qu'un problème de plus est résolu. ^^ Oui, ça rend bien. *o*
Allez, je classe. A bientôt. ^^ | | |
|
| | |
Contenu sponsorisé
| |
| | |
|
