Sujet Précédent Sujet Suivant

Help SVP : menu CSS en dégradé couleurs

Fermé
justME - 6 juil. 2009 à 23:54
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 - 17 août 2009 à 16:25
Bonjour,

J'espère ne pas "polluer" les forums avec ma question que j'ai déjà postée dans "programmation" mais j'ai l'impression qu'en fait c'est ici qu'il fallait le faire. A tous les administrateurs mille pardons si tel est le cas, je ne suis pas encore très à l'aise avec le fonctionnement des forums.

Revoici ma question:

Voila, je suis novice en la matière et mes recherches ayant toutes été infructueuses (y compris au sein de commentcamarche). En désespoir de cause, je finis par faire part du problème que je rencontre en espérant que quelqu'un pourra m'aider car "je patauge!"....

En fait je rencontre 2 problèmes:

J'intègre un menu CSS horizontal dans un site web (jusque là aucun problème). Voici les codes:


CSS:
------
ul#le-menu {
list-style-type:none;
width:100%;
position:relative;
height:27px;
font-size:13px;
font-weight:bold;
margin:0;
padding:11px 0 0 0;
}

ul#le-menu li {
display:block;
float:left;
margin:0 0 0 3px;
height:27px;
}

ul#le-menu li.left {
margin:0;
}

ul#le-menu li a {
display:block;
float:left;
color:#fff;
background:#000000;
line-height:27px;
text-decoration:none;
padding:0 7px 0 8px;
height:27px;
}

ul#le-menu li a.right {
padding-right:19px;
}

ul#le-menu li a:hover {
background:#854d00;
}

ul#le-menu li a.current {
color:#854d00;
background:#e6e5d0;
}

ul#le-menu li a.current:hover {
color:#854d00;
background:#e6e5d0;
}




HTML:
------
<ul id="le-menu">
<li><a href="lien01" class="current">01</a></li>
<li><a href="lien02">02</a></li>
<li><a href="lien03">03</a></li>
</ul>


... tous les onglets inactifs ont un background de couleur #000000 mais ce que je souhaite obtenir c'est des onglets en dégradé. C'est à dire que le 01 = #000000, le 02 = #333333, le 03 = #666666. Et je n'y arrive désespérément pas!... je pense que c'est probablement possible en attribuant un id individuel à chaque lien mais je ne sais pas comment l'on fait.

Et enfin le problème numéro 2, c'est que je souhaite avoir un drop-down sur le lien 02. Mais toutes mes tentatives avec une sous-liste n'ont rien donné de bon : tout le menu est déstructuré sitôt que j'ajoute la sous-liste. Voici ce que j'avais fait:

HTML:
------
<ul id="le-menu">
<li><a href="lien01" class="current">01</a></li>
<li><a href="lien02">02</a></li>
<ul><li>sous menu 02</li></ul>
<li><a href="lien03">03</a></li>
</ul>

Quelqu'un veut-il bien avoir la gentillesse de m'aider SVP, car je butte et n'avance plus dans la création de ma page. Merci beaucoup de votre aide.

12 réponses

Réponse 1 / 12
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
7 juil. 2009 à 00:52
Bonsoir,

pour ton dégradé il suffit de faire <li id="couleur1"> etc... et tu fais ton css #couleur1 { background-color:#000000; } et ainsi de suite...

Pour ton drop-down... je ne vois pas ce que tu veux dire... tu veux faire un rollover ? Si oui tu rajoute un état à ton css exemple: li #couleur1:hover { background-color:#333333; } et au survol ton fond changera de couleur.

J'espère t'avoir aidé !
0
Réponse 2 / 12
justME
7 juil. 2009 à 02:15
Bonsoir Monkey Monk,

Tout d'abord un ENORME merci pour ton aide, en effet la solution de l'id avec la couleur dédiée était bel et bien ce qu'il me fallait, merci beaucoup, vraiment!!

Pour répondre à ta question concernant le "drop-down", non ça ne concerne pas le rollover bien que la lumière que tu fais sur ce point est loin d'être inintéressante!... en fait, je voudrais pouvoir faire quelque chose de proche de ceci:

http://lwis.net/free-css-drop-down-menu/simple.horizontal.html

... plus précisément quelque chose de propre comme pour le lien "about us". Mais je ne souhaite même pas charger d'image de fond, tu vois... ce que je voudrais c'est obtenir un déroulant sur le lien 02 du menu. Je pense qu'il faut pour cela ajouter une liste à la liste un peu comme ceci:

<ul id="le-menu">
<li>lien 01</li>
<li>lien 02
<!--- début insert de la "liste à la liste" pour déroulant --->
<ul>
<li>lien sous menu 01</li>
<li>lien sous menu 02</li>
<li>lien sous menu 03</li>
</ul>
<!--- fin insert de la "liste à la liste" pour déroulant --->
</li>
<li>lien 03</li>
</ul>

je suppose qu'il faut ajouter au CSS quelque chose comme:

/*CSS*/

ul#le-menu li lu li a:hover {
background:#854d00;
}

etc... mais toutes mes tentatives ont été infructueuses.. le mieux que j'ai obtenu c'est de déstructurer totalement le menu de base?... je ne sais pas si tu peux/veux m'aider sur ce point??

En tous cas encore merci mille fois de ton aide, cette histoire de couleurs devenait un vrai calvaire... bon... le côté positif c'est que lorsque l'on passe beaucoup de temps à se creuser la cervelle ça aide généralement à intégrer et à progresser mais je dois avouer que là, je n'y arrivais plus!!
0
Réponse 3 / 12
Utilisateur anonyme
7 juil. 2009 à 02:15
Tu peux pas faire une image en dégradé avec gimp que tu mets en fond d'écran et après tu fais:
background-repeat: repeat-y;
0
Réponse 4 / 12
justME
7 juil. 2009 à 03:11
Merci de ta réponse Hapama.

En fait la solution idéale dans mon cas est celle qui m'a été donnée par Monkey Monk.

L'appel d'une image me semble intéressante lorsque l'on veut un rendu spécifique au sein d'une même cellule (un dégradé ou un visuel quel qu'il soit) mais dans mon cas le dégradé que je souhaite obtenir se fait d'un onglet à l'autre, pas au sein de chacun d'entre eux.

Il me semble que pour utiliser une image en background pour une cellule la solution serait d'avoir aussi recours à une id du type

#onglet01 {
background-color: #000000 url("img/back-onglet01.png") no-repeat;
}

mais n'en suis pas sûr car mon savoir faire en la matière laisse encore largement à désirer.

En tous les cas, merci à toi d'avoir pris le temps de répondre à ce post!
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
7 juil. 2009 à 08:02
C'est bien ça pour mettre une image !

Je viens de voir l'exemple de drop box... la liste ressemble à ça : 
<ul id="nav" class="dropdown dropdown-horizontal">
  <li><a href="./">Home</a></li>
    <!--// liste principale //-->
  <li class="dir"><a href="./">Contact Us</a>
    <ul>
      <li><a href="./">Enquiry Form</a></li>
      <li><a href="./">Map &amp; Driving Directions</a></li>
      <li><a href="./">Your Feedback</a></li>
    </ul>
  </li>
</ul>


...et le css : 
ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
ul.dropdown li:hover > ul {
 visibility: visible;
}


Voilà... j'ai juste copié/collé le code de ton exemple mais ça devrait être plus clair !

Sinon, petit conseil, utilise Firefox avec des modules complémentaire tel que "Web Developer", "Measure It", "CSS Viewer", "Fire Bug", "Color Zilla", ...

Extrêment utile pour le développement web !

Bon courage à toi !
0
Réponse 6 / 12
justME
7 juil. 2009 à 23:03
Bonsoir Monkey Monk,

Encore une fois, merci de ta réponse et de tes conseils : je connaissais "Web Developer" (je l'avais installé) mais pas les autres modules!

Pour ce qui est du drop-down je piétine encore... je vois que dans ton exemple qu'il est fait appel à 2 class et 1 id que je ne retrouve pas dans l'extrait de CSS. Pour ne rien te cacher ça fait quelques heures que j'essaie d'intégrer tout ça dans mon CSS d'origine (celui posté en amont) mais je n'ai pas su en tirer quoi que ce soit de bon.

J'ai finalement transformé mon CSS comme suit (cf. plus bas) puis ajoutée une DIV au HTML.

Je pense ne pas être loin du résultat escompté : en fait lorsque je survole le lien 02, les liens du sous menu que je souhaite voir s'afficher sous forme de déroulant apparaissent bien mais à droite, les uns à côté des autres. Je voudrais simplement maintenant qu'ils apparaissent en dessous, les uns au dessus des autres mais je ne vois pas comment faire?!


CSS (je reposte ici la 1ère partie du CSS d'ores et déjà postée en amont à laquelle j'ai ajouté une DIV#menu):
---------------------------------------------

/* CSS base */

ul#le-menu {
list-style-type:none;
width:100%;
position:relative;
height:27px;
font-size:13px;
font-weight:bold;
margin:0;
padding:11px 0 0 0;
}

ul#le-menu li {
display:block;
float:left;
margin:0 0 0 3px;
height:27px;
}

ul#le-menu li.left {
margin:0;
}

ul#le-menu li a {
display:block;
float:left;
color:#fff;
background:#000000;
line-height:27px;
text-decoration:none;
padding:0 7px 0 8px;
height:27px;
}

ul#le-menu li a.right {
padding-right:19px;
}

ul#le-menu li a:hover {
background:#854d00;
}

ul#le-menu li a.current {
color:#854d00;
background:#e6e5d0;
}

ul#le-menu li a.current:hover {
color:#854d00;
background:#e6e5d0;
}


/* NOUVEL AJOUT : DIV */

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

------------------------------------------------------


le nouvel HTML (avec ajout de la balise DIV):
----------------------------------------------------

HTML:
------

<div id="menu">

<ul id="le-menu">
<li>
<a href="lien01" class="current">01</a>

</li>

<li>
<a href="lien02">02</a>
<!--- début sous menu pour déroulant --->
<ul>
<li><a href="./">sous menu 01</a></li>
<li><a href="./">sous menu 02</a></li>
<li><a href="./">sous menu 03</a></li>
</ul>
<!--- fin sous menu pour déroulant --->

</li>

<li>
<a href="lien03">03</a>
</li>
</ul>

<div>
0
Réponse 7 / 12
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
8 juil. 2009 à 09:19
En fait, si tu as firebug et webdeveloper... je te conseille d'aller directement voir ta source de départ !

Le css est suffisamment commenté pour s'y retrouver, tu pourras ensuite "comparer" ta version et celle-là.

Sinon, je regarderais avec plus d'attention sur la pause de midi ! ^^
0
justME
8 juil. 2009 à 12:12
Bonjour Monkey Monk,

Je prends note de ce que tu me dis et j'essaie d'avancer.

En tous les cas merci pour tes précieux conseils ainsi que d'envisager de consacrer de ton temps de midi!!
0
Réponse 8 / 12
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
8 juil. 2009 à 13:17
J'ai l'impression qu'il va te falloir gérer avec float... car, à mon avis, si ton menu s'affiche à droite c'est à cause de la lecture linéaire. Essaye avec des positionnements (div, float, etc...) et dis-moi ce qu'il en est !
0
justME
8 juil. 2009 à 23:30
Bonsoir Monkey Monk

pffff... j'en ai bavé mais j'ai pratiquement atteint l'objectif! ;-)

c'est en utilisant "width", "float" et "position" que j'ai pu résoudre le problème de déstructuration du menu principal lors de l'affichage des sous-menus au moment du survol.

tu peux voir le résultat à cette adresse
http://4012test.free.fr/index-test-css.html

par contre je rencontre encore un petit problème très inesthétique : lors du survol des sous-menus la couleurs de fond définie ne s'applique pas à l'intégralité de la cellule (je ne suis pas certain d'être toujours très clair mais lorsque tu iras sur la page tu verras immédiatement ce à quoi je fais référence).

sais-tu à quoi cela est du??

je sais que je me répète mais encore une fois merci de ton aide qui m'est d'un grand secours!
0
justME
8 juil. 2009 à 23:34
ps: concernant le problème de couleur au survol des sous-menu je te recommande de voir plutôt le sous-menu 03 car c'est le plus explicite.
0
Réponse 9 / 12
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
9 juil. 2009 à 00:15
Bonsoir,

je regarderais plus en détail après une nuit de sommeil (^^) mais je pense que ça viens des width qui sont tantot à 100%, 200px ou encore 180px... il faudrait te décider ^^.

Sinon vérifie les display:block;, ou plutot place bien des display block au selecteur li...

Si ça ne marche toujours pas... je prendrais plus de temps pour lire le css !


Bonne nuit !

* 'suis mort moi :p *
0
justME
9 juil. 2009 à 00:49
merci d'avoir encore pris le temps de répondre ce soir!
Je vais regarder ça cette nuit... tu as raison, de toutes les façons je souhaite avoir un code le plus propre possible :-)
et.................... bonne nuit!! :-)
0
justME
9 juil. 2009 à 22:24
Bonsoir Monkey Monk,

J'ai essayé de retourner dans tous les sens les width mais je ne suis arrivé à rien de bon.

- En fait le 100% me permet d'avoir le menu dans toute son horizontalité sans quoi les cellules se placent les unes au dessus des autres à la manière d'un menu vertical.
- le 200px me permet de couvrir l'intégralité de la largeur du sous-menu avec la couleur de background de mon choix.
- le 180px me permet de ne pas déstructurer le menu lors du survol du lien 02 (qui contient un sous menu). en fait, sans cette valeur sous IE le sous-menu ne s'affiche pas du tout et sous firefox ce n'est pas propre du tout. grâce à cette valeur j'obtiens un sous-menu vertical propre quelque soit le navigateur.

je crois que si je pouvais attribuer une largeur de mon choix, individuellement, à chaque lien au survol le problème serait résolu. car je constate que même dans le sous-menu seule la partie texte active (lien) change de couleur. ce n'est pas un problème dans le menu principal ça marche très bien, mais dès lors que je définis une largeur fixe pour une cellule +large que le lien à proprement parler la couleur attribuée au survol ne couvre pas l'intégralité de la largeur de cette dernière.

En attendant, la seule solution que j'ai trouvée c'est de colorer l'intégralité du sous menu avec la couleur de survol. du coup on ne peut pas s'en rendre compte. Mais ce n'est pas ce que je cherche à obtenir. j'ai le sentiment de n'avoir parcouru que 80% du chemin.

Je crois que je devrais me trouver un bon bouquin sur le CSS! :-)
0
Réponse 10 / 12
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
29 juil. 2009 à 09:43
Bonjour,

pardon pour le "délai" mais je n'ai plus de connexion dans mon ptit chez moi et j'étais en vacance ! ^^

Tout d'abord, je ne trouve pas de réponse à ton problème... vraiment désolé !

Mais j'ai un ptit bout de code qui devrait t'intéresser (je crois) !

>> http://bormat2.free.fr/wordpress4/


Bon courage en tous cas !
0
justME
1 août 2009 à 03:40
Bonsoir Monkey_Monk,

Tu es tout pardonné et merci de revenir "à l'ouvrage" après tes vacances qui je l'espère furent bonnes! :-)
Merci pour ce lien... toutefois je m'aperçois que le même problème est rencontré avec ce menu à savoir que toute la largeur de celui-ci n'est pas active (seul le lien change de couleur pas l'intégralité de la cellule), comme on peut le constater dans la partie droite du menu figurant sur la page que tu indiques.

Je ne désespère pas de trouver la solution.
0
Réponse 11 / 12
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
31 juil. 2009 à 13:32
Bonjour,

je viens de retrouver ça : http://css.maxdesign.com.au/index.htm

Va faire un tour dans les listamatic ! ;)

J'espère que ça t'aidera !
0
justME
1 août 2009 à 03:44
Monkey_Monk,

Oui, je connais ce site je n'y avais pas trouvé la solution... mais finalement je viens de tomber sur ceci
http://css.maxdesign.com.au/listamatic2/horizontal04.htm

Je crois que la solution peut se trouver ici car je constate que l'intégralité de la largeur de la cellule est active lors du survol :-)

Je vais voir ce que je peux faire et je te tiendrai au courant. Encore merci de ton aide ainsi que de ton temps!

@bientôt!
0
justME
13 août 2009 à 21:47
Bonsoir Monkey Monk,

Comme promis, je reviens vers toi pour te donner des nouvelles.

En fait je ne suis pas parvenu à ce que je souhaitais malgré l'exploration des listamatic etc... c'est après réflexion que m'est venue une solution "toute simple" qui a le mérite de fonctionner mais qui par contre ne me semble pas être des plus propres c'est à dire d'indiquer pour chacunes des listes la largeur dans le HTML, par ex:

<li style="width:50px;"></li>

J'applique le même système aux liens de manière à ce que l'intégralité de la largeur du menu déroulant soit active et non pas simplement le lien à proprement parlé, de la manière suivante:

<li id="couleur01"><a style="width:100px;" href="lien01.php">LIEN 01</a></li>

résultat:

<div id="menu">

<ul id="le-menu">
<li style="width:50px;" id="couleur01"><a style="width:50px;" href="lien00.php" class="current">LIEN 00</a></li>
<li style="width:70px;" id="couleur02"><a style="width:70px;" href="#" title="CATEGORIE B">CAT B</a>
<ul>
<li><a style="width:130px;" href="lien01b.php">LIEN 01 B</a></li>
<li><a style="width:130px;" href="lien02b.php">LIEN 02 B</a></li>
<li><a style="width:130px;" href="lien03b.php">LIEN 03 B</a></li>
<li><a style="width:130px;" href="lien04b.php">LIEN 04 B</a></li>
</ul>
</li>
<li style="width:170px;" id="couleur03"><a style="width:170px;" href="#" title="CATEGORIE C">CATC</a>
<ul>
<li><a style="width:130px;" href="lien01c.php">LIEN 01 C</a></li>
<li><a style="width:130px;" href="lien02c.php">LIEN 02 C</a></li>
<li><a style="width:130px;" href="lien03c.php">LIEN 03 C</a></li>
<li><a style="width:130px;" href="lien04c.php">LIEN 04 C</a></li>
</ul>
</li>
</ul>

</div>


Voila... en espérant que cette solution puisse en aider d'autres!
Si quelqu'un voit comment aboutir au même résultat de façon plus propre est surtout plus concise je suis preneur :-)

En tous les cas merci beaucoup de toute ton aide Monkey Monk!
0
Réponse 12 / 12
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 130
17 août 2009 à 16:25
Bonjour justME,

j'avoue ne pas avoir de solution miracle pour ton cas... mais je pense que tu pourrais quand même alléger ton code en utilisant bien tes css.

Ex: 
/* je pense qu'il s'étirera si le contenu est plus grand donc tu n'auras pas besoin de préciser le 70px pour le suivant... à tester. Au pire tu fais 2 id supplémentaire... le premier à 50px, le second à 70px*/
ul#le-menu li a { width:50px; }

/* en faisant comme suit, tu t'épargneras quelques répétitions ! ;) */
ul#le-menu li ul li a { width:130px; }


En stylant les a plutot que les li tu devrais avoir ton résultat (pas besoin de styler 2 fois).


En tous cas, bravo pour ta persévérence !

A bientôt ! ;)
0