menu deroulant vertical

menu deroulant vertical - Web design - Graphisme

Marsh Posté le 22-05-2006 à 17:11:23    

bon je poste ici parce que alsacreations c pas des rapides....
 
en gros j'ai recupéré ce menu :
http://css.alsacreations.com/xmedi [...] smenu4.htm
 
je souhaiterais qu'a la place des menu1, 2, 3 etc ce soit des images
j'ai donc inséré une image dans dt mais le soucis c qu'elle se repete partout... hors j'en voudrait 7 differentes !
 
voila ce que j'ai modifier :
 

Code :
  1. #menu dt {
  2. cursor: pointer;
  3. background-image: url(../images/b_acceuil.gif);
  4. background-repeat: no-repeat;
  5. width: 229px;
  6. height: 25px;
  7. padding: 0;
  8. }


 
quelqu'un pourrait m'aider?
car je ne voit pas trop comment faire :/
 
en + de cela quand on passe sur une des images du menu j'aimerais que ça change de couleur j'ai vue ça dans le script chais pas si ça convient :
 

Code :
  1. #sect1 {
  2. background-image: url(images/Smenu1b.gif)
  3. }
  4. #sect1 a:visited {
  5. background-image: url(images/Smenu1b.gif)
  6. }
  7. #sect1 a:hover {
  8. background-image: url(images/Smenu1o.gif)
  9. }
  10. #sect2 {
  11. background-image: url(images/Smenu2b.gif)
  12. }
  13. #sect3 {
  14. background-image: url(images/Smenu3b.gif)
  15. }
  16. #sect4 {
  17. background-image: url(images/Smenu4b.gif)
  18. }


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 22-05-2006 à 17:11:23   

Reply

Marsh Posté le 22-05-2006 à 17:46:15    

aozora a écrit :

bon je poste ici parce que alsacreations c pas des rapides....
 
en gros j'ai recupéré ce menu :
http://css.alsacreations.com/xmedi [...] smenu4.htm
 
je souhaiterais qu'a la place des menu1, 2, 3 etc ce soit des images
j'ai donc inséré une image dans dt mais le soucis c qu'elle se repete partout... hors j'en voudrait 7 differentes !


ben à part faire 6 autres classes (dta, dtb, dtc... :whistle: ) je ne vois pas :spamafote:

Reply

Marsh Posté le 22-05-2006 à 17:54:07    

ça ne fait rien :o
j'ai dupliqué dt en dt2... mais ça bug
 
 
 


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 22-05-2006 à 17:58:28    

oops chui con, dt c'est pas un nom de classe [:nybbas]

Reply

Marsh Posté le 22-05-2006 à 17:59:24    

s'tune balise  :o


---------------
OUAIB | FLICKR | HFR | 500 PX
Reply

Marsh Posté le 22-05-2006 à 17:59:30    

j'ai pas envie de rigoler....


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 22-05-2006 à 18:01:43    

si tu n'as pas de solutions d'ici demain, mon collegue te dira quoi faire.... moi je n'y connais rien [:spamafote]
mais à ce que j'ai vite fait compris quand il m'a parlé, c'est que "dt" c'est une balise, donc tu dois en faire une classe...
dtclass1,dtclass2,dtclass3,etc...  
 
non  :??:


---------------
OUAIB | FLICKR | HFR | 500 PX
Reply

Marsh Posté le 22-05-2006 à 18:03:28    

je pense que le plus léger serait :

Code :
  1. #menu dt
  2. {
  3. cursor: pointer;
  4. background-repeat: no-repeat;
  5. width: 229px;
  6. height: 25px;
  7. padding: 0;
  8. }
  9. #dt1
  10. {
  11. background-image: url(../images/b_acceuil.gif);
  12. }
  13. #dt1:hover //marche pas sous ie, il faut une balise <a>
  14. {
  15. background-image: url(../images/b_acceuil_hover.gif);
  16. }
  17. //etc.... avec #dt2...


 
et donc dans le html, chaque <dt> possède une ID
 
efin voéla quoi :D
 
edit : juste au cas ou : dans le cas d'image en hover, il vaut mieux faire un preload CSS des images :)


Message édité par remizz le 22-05-2006 à 18:04:53

---------------
topik Annecy
Reply

Marsh Posté le 22-05-2006 à 18:04:15    

c'est ce que je disais non  [:autobot]


---------------
OUAIB | FLICKR | HFR | 500 PX
Reply

Marsh Posté le 22-05-2006 à 18:05:24    

vui mais j'écrivais quand tu as posté ton message  [:tinostar]


---------------
topik Annecy
Reply

Marsh Posté le 22-05-2006 à 18:05:24   

Reply

Marsh Posté le 22-05-2006 à 18:06:46    

remizz a écrit :

vui mais j'écrivais quand tu as posté ton message  [:tinostar]


oui nan mais je voulais juste savoir si c'etait bien ça que mon collegue me raconter... parce que j'ai rien comprite  [:jirotoh]


---------------
OUAIB | FLICKR | HFR | 500 PX
Reply

Marsh Posté le 22-05-2006 à 18:09:18    

aozora a écrit :

j'ai pas envie de rigoler....


 
excuse moi d'essayer d'aider :jap:

Reply

Marsh Posté le 22-05-2006 à 18:11:17    

Tu as essayé en faisant:

Code :
  1. #smenu1{
  2. background:image1.jpg;
  3. }
  4. #smenu2{
  5. background:image2.jpg;
  6. }


 
En même temps je dis peut être des bêtises, ça fait longtemps que je ne me suis pas replongé dans le CSS. :/

Reply

Marsh Posté le 22-05-2006 à 18:16:03    

liverpowen a écrit :

oui nan mais je voulais juste savoir si c'etait bien ça que mon collegue me raconter... parce que j'ai rien comprite  [:jirotoh]


:jap:
 
vui c'est bien ça, dt est une balise.
On fait donc un sélécteur général sur cette balise (dt ou #menu dt dans ce cas), et ensuite, on crée des sélécteurs particuliers (classes ou ID) si on veut des variantes.


---------------
topik Annecy
Reply

Marsh Posté le 22-05-2006 à 18:26:11    

Chipo a écrit :

Tu as essayé en faisant:

Code :
  1. #smenu1{
  2. background:image1.jpg;
  3. }
  4. #smenu2{
  5. background:image2.jpg;
  6. }


 
En même temps je dis peut être des bêtises, ça fait longtemps que je ne me suis pas replongé dans le CSS. :/


 
 
c'est ca :jap:
edit: si ca va pas nickel, faut les mettre sur les dt...
donc :
 - rajouter un id a chaque dt (ex: smenu1dt, smenu2dt)
 - rajouter dans la css les #smenu1dt en mettant le background
 
edit2
meme:
background-image : image.gif;
background-repeat: no-repeat;

Message cité 1 fois
Message édité par Suri le 22-05-2006 à 18:29:27

---------------
Suri.morkitu.org : Balades au coeur de la ville...
Reply

Marsh Posté le 22-05-2006 à 18:29:23    


Cool! j'ai pas tout perdu! [:gm_superstar]  

Reply

Marsh Posté le 22-05-2006 à 18:46:18    

c'est quoi comme balise exactement ce dt?


---------------
| .:: www.wizopunk-art.com - Développement web ::. |
Reply

Marsh Posté le 22-05-2006 à 18:49:53    

dl: definition list
dt: definition term
 
utilisé pour les glossaires à la base jpense...
l'avantage c'est que tu peux englober des list ul par dessus (enfin tu me diras, on peut englober des ul dans les ul.. mais jsais pas si c valide) donc plus de souplesse


---------------
Suri.morkitu.org : Balades au coeur de la ville...
Reply

Marsh Posté le 22-05-2006 à 18:58:53    

okiu.
Donc c'est pratique pour faire des menus :D


---------------
| .:: www.wizopunk-art.com - Développement web ::. |
Reply

Marsh Posté le 22-05-2006 à 19:02:43    

wizopunker a écrit :

okiu.
Donc c'est pratique pour faire des menus :D


C'est pratique pour les menus déroulants, pour des menus classiques une simple liste suffit.

Reply

Marsh Posté le 22-05-2006 à 20:12:43    

oki merci
j'ai rien compris mais bon spa grave... je vais me debrouiller...

Reply

Marsh Posté le 22-05-2006 à 20:28:33    

aozora a écrit :

oki merci
j'ai rien compris mais bon spa grave... je vais me debrouiller...


 
Il faut juste comprendre à quoi correspondent les: dl, dt et dd
dl: définit une liste-> c'est l'ensemble "menu1 menu2 menu3..."
dt: définit les termes de cette liste-> menu1 ou 2 ou 3...
dd: est la définition de chaque terme.
 
Si tu prends pour exemple le code d'alsacreation quand tu mets "#menu dt" tu vas définir le design  de tous les termes: menu1 menu2 menu3 etc...
Dans leur exemple ils ont différencié chaque menu par des "id" différents. Comme ça: <dd id="smenu1">
Du coup pour mettre une image différente pour chaque menu, il faut que tu passe par #smenu1; #smenu2; #smenu3....

Message cité 1 fois
Message édité par Chipo le 22-05-2006 à 20:45:10

---------------
http://marion.arru.free.fr
Reply

Marsh Posté le 22-05-2006 à 20:56:28    

aozora a écrit :

oki merci
j'ai rien compris mais bon spa grave... je vais me debrouiller...


 [:ddr555] idem


---------------
OUAIB | FLICKR | HFR | 500 PX
Reply

Marsh Posté le 23-05-2006 à 09:37:28    

Chipo a écrit :

Il faut juste comprendre à quoi correspondent les: dl, dt et dd
dl: définit une liste-> c'est l'ensemble "menu1 menu2 menu3..."
dt: définit les termes de cette liste-> menu1 ou 2 ou 3...
dd: est la définition de chaque terme.
 
Si tu prends pour exemple le code d'alsacreation quand tu mets "#menu dt" tu vas définir le design  de tous les termes: menu1 menu2 menu3 etc...
Dans leur exemple ils ont différencié chaque menu par des "id" différents. Comme ça: <dd id="smenu1">
Du coup pour mettre une image différente pour chaque menu, il faut que tu passe par #smenu1; #smenu2; #smenu3....


 
bah j'ai mis ça :
 

Code :
  1. #menu dt {
  2. cursor: pointer;
  3. width: 229px;
  4. height: 25px;
  5. padding: 0;
  6. }
  7. #smenu1{
  8. background-image : url(images/b_acceuil.gif);
  9. background-repeat: no-repeat;
  10.       }
  11.  
  12. #smenu2{
  13. background-image : url(images/b_societe.gif);
  14. background-repeat: no-repeat;
  15.       }


 
mais y a rien qui s'affiche....


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 23-05-2006 à 09:40:09    

met une page sur le net qd a faire...
avec le menu, le css et les images...


---------------
Suri.morkitu.org : Balades au coeur de la ville...
Reply

Marsh Posté le 23-05-2006 à 09:52:54    

http://photos.neverends.net/divers/site/home.html
 
et le menu doit ressembler a ça :
http://photos.neverends.net/divers/site/menu.jpg


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 23-05-2006 à 09:55:02    

c'est normal les étoiles scintillantes dans le sous menu gris plus foncé ou c'est le basilic que j'ai fumé hier qui fait ça ??? :o

Reply

Marsh Posté le 23-05-2006 à 09:56:29    


 
et c bon le basilic? :D
j'ai que de l'estragon chez moi :o


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 23-05-2006 à 09:58:43    

Ho, excuse moi je me suis planté. En fait, il faut que tu ajoute un id="menu1" dans tes dt.
Je vais faire l'essai.

Reply

Marsh Posté le 23-05-2006 à 10:01:03    

je capte pas ou ya besoin d'images dans le menu..


---------------
Suri.morkitu.org : Balades au coeur de la ville...
Reply

Marsh Posté le 23-05-2006 à 10:01:28    

aozora a écrit :

et c bon le basilic? :D
j'ai que de l'estragon chez moi :o


nan je me prenais pour des nouilles al pesto  [:r1-bo]  
..
nan mais sans dec', ya que moi qui les voit ces cons de pixels scintillants ?? [:delarue3]

Reply

Marsh Posté le 23-05-2006 à 10:04:20    

Chipo a écrit :

Ho, excuse moi je me suis planté. En fait, il faut que tu ajoute un id="menu1" dans tes dt.
Je vais faire l'essai.


 
 :heink: oki bah si tu le dis...
 

Suri a écrit :

je capte pas ou ya besoin d'images dans le menu..


 
bah le 1er menu : acceuil, societé etc c'est dans une police particuliere alors je les met en images....
pis apres faut que je fasse un truc en rollover quand ça passe dessus...


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 23-05-2006 à 10:05:04    


ça c clair que tu es une sacré nouilles :o


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 23-05-2006 à 10:16:46    

aozora a écrit :

ça c clair que tu es une sacré nouilles :o


tu sais ou je te la fous ma nouill... euuuh nan  [:nico54]  [:nico54]  
bon ben si j'ai bien compris ça ne scintille que sur mon ecran :o (ou alors vous avez décidé de pas me répondre :o :o)

Reply

Marsh Posté le 23-05-2006 à 10:18:55    

ta nouille elle va rester dans son sachet  [:phenos]


---------------
OUAIB | FLICKR | HFR | 500 PX
Reply

Marsh Posté le 23-05-2006 à 10:26:10    

le 2e menu (le sous menu) c'est des images aussi ou pas?


---------------
Suri.morkitu.org : Balades au coeur de la ville...
Reply

Marsh Posté le 23-05-2006 à 10:26:19    

bon en faites c pas grave...  
sur le coup present sur le menu en general j'ai besoins que d'une seule liste deroulante
donc je vais faire un tableau pour le reste avec rollover
faudrait juste que je comprenne comment faire un rollover sur 1 image dans ce machin.
 
sinon ya moyen de faire ça sans layer pour l'image principale?
je veux dire juste l'image seule que j'insere dans un tableau?


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 23-05-2006 à 10:30:22    

ah putain ya un rollover sur les images en plus :D


---------------
Suri.morkitu.org : Balades au coeur de la ville...
Reply

Marsh Posté le 23-05-2006 à 10:34:26    

oué...
non mais si je met qu'une seule image... donc pas besoins de doubler ect comme mon soucis principal
comment je peux faire pour mettre le tout dans un tableau?
parce que le layer il se met jamais ou y faut...


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
Reply

Marsh Posté le 23-05-2006 à 10:35:13    

les tableaux c mal :o
bon attends 2 min, je finis :o


---------------
Suri.morkitu.org : Balades au coeur de la ville...
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed