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é !
[Monkey Monk]

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://www.lwis.net/free-css-drop-down-menu/dropdown.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!!

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;

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!

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>

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

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>

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 ! ^^
[Monkey Monk]

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 !
[Monkey Monk]

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 *
[Monkey Monk]

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/


Bon courage en tous cas !
[Monkey Monk]
That's all folks !

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 !
[Monkey Monk]
That's all folks !

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