Discussion :

[Jolt0x]

Bonsoir,

Je reviens vers vous.

Je voudrais reproduire a (presque) l'identique le menu gauche en vert a cette URL: http://www.opensourcescripts.com/

J'ai editè le source, j'ai regardé les feuilles de style et je me suis appercu qu'il y avait ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div class="grid_2 Left">
	<h2>Categories</h2>
	 <ul id="Accordion">
 
         		<li><a href="/dir/ASP/" title="ASP open source software">ASP</a>
 
 
                 </li>
        <li>

Avec les feuilles de style, OK, je dois pouvoir recopier bêtement et ajuster.

En revanche j'ai dit plus haut "presque". En effet je voudrais en plus mettre en surbrillance le "<li>" ou le "<ul>" (avec une couleur a déterminer) lorsque je passe ma sourie dessus. Comment faire ?

Merci.

[cahnory]

Le mieux que tu puisses faire et de mettre l'effet sur le a. En fait tu style tout ton bouton sur la balise a (padding, background...) et tu ajoutes les styles du survol de la sorte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#Accordion a:hover { /*Tes styles*/ }

[Jolt0x]

cahnory, est-ce que tu pourrais détailler, svp ? Je en suis vraiment pas a l'aise avec les feuilles de style et les styles. Je suis de la veille école. Je mets des styles direct dans la page html, comme au début du web.

Mais je me mets au feuille de style CSS... progressivement...

Merci.

[cahnory]

Oki, bon alors concept de base, la sélection d'un élément.

Si avant tu avais quelque chose du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<table id="monTableau"><tr class="ligne"><td style="background:#F00;">...

en css tu auras :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

table tr td { background:#F00; }

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#monTableau td { background:#F00; }

ou encore

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.ligne td { background:#F00; }

et j'en passe.
Comme tu le vois tu peux sélectionner un élément par son chemin (voir une portion du chemin) son id, class ou encore celui de ses parents... bref tu as de quoi faire sur le net pour découvrir toute les possibilités de sélection.

Cas concret, je commence par remplace l'id Accordion par une class accordion. J'utilise ici une class car j'imagine que ce type de menu n'est pas unique dans la page (hors un id ne doit être présent qu'une seule et unique fois par page).
J'applique le style de mon bouton sur les liens présent dans les élément .accordion (le "." représente une class mais pareil je t'invite aller te documenter sur les sélecteurs css) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.accordion a { display: block; background: #0F0;... }

Là j'ai stylé l'état normal de mon bouton. Pour style un élément survolé on utilise ce qu'on appel une pseudo class et dans le cas présent, la pseudo class hover :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.accordion a:hover { display: block; background: #F00; }

Survolé, mon bouton aura un background rouge. La pseudo class hover fonctionne parfaitement mais sur ie6 elle ne s'appliquent qu'aux éléments "a". Si tu l'utilise sur un autre type d'élément, ie6 ne changera pas de style au survol (à moins de l'aider avec javascript).

[Vil'Coyote]

bon,

FAQ et tuto avant de savoir conduire on doit apprendre.

[Jolt0x]

Merci cahnory pour ce cours et pour tes liens Vil'Coyote

Mais je suis encore plus vieux que cela. Je m'étais - a l'epoque - mes styles comme ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<td width="70% align = left bgcolor =#f0f0d0>mon message...</td>

C'est vraiment la veille école...