Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1808 connectés 

  FORUM HardWare.fr
  Graphisme
  Web design

  menu deroulant vertical

 



 Mot :   Pseudo :  
 
 Page :   1  2  3
Page Précédente
Auteur Sujet :

menu deroulant vertical

n°827370
aozora
Posté le 22-05-2006 à 17:11:23  profilanswer
 

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
mood
Publicité
Posté le 22-05-2006 à 17:11:23  profilanswer
 

n°827388
Skopos
Titilleur de nombrils...
Posté le 22-05-2006 à 17:46:15  profilanswer
 

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:


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°827393
aozora
Posté le 22-05-2006 à 17:54:07  profilanswer
 

ç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
n°827396
Skopos
Titilleur de nombrils...
Posté le 22-05-2006 à 17:58:28  profilanswer
 

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


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°827397
liverpowen
Profil : Friche Culturelle
Posté le 22-05-2006 à 17:59:24  profilanswer
 

s'tune balise  :o


---------------
OUAIB | FLICKR | HFR | 500 PX
n°827398
aozora
Posté le 22-05-2006 à 17:59:30  profilanswer
 

j'ai pas envie de rigoler....


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
n°827399
liverpowen
Profil : Friche Culturelle
Posté le 22-05-2006 à 18:01:43  profilanswer
 

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
n°827401
remizz
Adventure !
Posté le 22-05-2006 à 18:03:28  profilanswer
 

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 - BF3 : Cadmion
n°827402
liverpowen
Profil : Friche Culturelle
Posté le 22-05-2006 à 18:04:15  profilanswer
 

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


---------------
OUAIB | FLICKR | HFR | 500 PX
n°827403
remizz
Adventure !
Posté le 22-05-2006 à 18:05:24  profilanswer
 

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


---------------
topik Annecy - BF3 : Cadmion
mood
Publicité
Posté le 22-05-2006 à 18:05:24  profilanswer
 

n°827406
liverpowen
Profil : Friche Culturelle
Posté le 22-05-2006 à 18:06:46  profilanswer
 

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
n°827408
Skopos
Titilleur de nombrils...
Posté le 22-05-2006 à 18:09:18  profilanswer
 

aozora a écrit :

j'ai pas envie de rigoler....


 
excuse moi d'essayer d'aider :jap:


---------------
userstyles HFR : alléger l'accueil du forum; réduire les img https des quotes. Script AHK ImageFloodHFR
n°827409
Chipo
Posté le 22-05-2006 à 18:11:17  profilanswer
 

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. :/

n°827412
remizz
Adventure !
Posté le 22-05-2006 à 18:16:03  profilanswer
 

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 - BF3 : Cadmion
n°827414
Suri
Darksurious
Posté le 22-05-2006 à 18:26:11  profilanswer
 

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...
n°827416
Chipo
Posté le 22-05-2006 à 18:29:23  profilanswer
 


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

n°827423
wizopunker
FUCK ANARCHY!
Posté le 22-05-2006 à 18:46:18  profilanswer
 

c'est quoi comme balise exactement ce dt?


---------------
| .:: www.wizopunk-art.com - Développement web ::. |
n°827425
Suri
Darksurious
Posté le 22-05-2006 à 18:49:53  profilanswer
 

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...
n°827431
wizopunker
FUCK ANARCHY!
Posté le 22-05-2006 à 18:58:53  profilanswer
 

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


---------------
| .:: www.wizopunk-art.com - Développement web ::. |
n°827433
Chipo
Posté le 22-05-2006 à 19:02:43  profilanswer
 

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.

n°827455
aozora
Posté le 22-05-2006 à 20:12:43  profilanswer
 

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

n°827458
Chipo
Posté le 22-05-2006 à 20:28:33  profilanswer
 

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
n°827473
liverpowen
Profil : Friche Culturelle
Posté le 22-05-2006 à 20:56:28  profilanswer
 

aozora a écrit :

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


 [:ddr555] idem


---------------
OUAIB | FLICKR | HFR | 500 PX
n°827643
aozora
Posté le 23-05-2006 à 09:37:28  profilanswer
 

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
n°827650
Suri
Darksurious
Posté le 23-05-2006 à 09:40:09  profilanswer
 

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...
n°827659
aozora
Posté le 23-05-2006 à 09:52:54  profilanswer
 

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
n°827665
Profil sup​primé
Posté le 23-05-2006 à 09:55:02  answer
 

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

n°827667
aozora
Posté le 23-05-2006 à 09:56:29  profilanswer
 


 
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
n°827671
Chipo
Posté le 23-05-2006 à 09:58:43  profilanswer
 

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.

n°827675
Suri
Darksurious
Posté le 23-05-2006 à 10:01:03  profilanswer
 

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


---------------
Suri.morkitu.org : Balades au coeur de la ville...
n°827677
Profil sup​primé
Posté le 23-05-2006 à 10:01:28  answer
 

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]

n°827682
aozora
Posté le 23-05-2006 à 10:04:20  profilanswer
 

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
n°827684
aozora
Posté le 23-05-2006 à 10:05:04  profilanswer
 


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


---------------
Flickr Neverends | Neverends | Landolfi : Un bucheron dans un corps de princesse
n°827697
Profil sup​primé
Posté le 23-05-2006 à 10:16:46  answer
 

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)

n°827699
liverpowen
Profil : Friche Culturelle
Posté le 23-05-2006 à 10:18:55  profilanswer
 

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


---------------
OUAIB | FLICKR | HFR | 500 PX
n°827708
Suri
Darksurious
Posté le 23-05-2006 à 10:26:10  profilanswer
 

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


---------------
Suri.morkitu.org : Balades au coeur de la ville...
n°827709
aozora
Posté le 23-05-2006 à 10:26:19  profilanswer
 

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
n°827711
Suri
Darksurious
Posté le 23-05-2006 à 10:30:22  profilanswer
 

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


---------------
Suri.morkitu.org : Balades au coeur de la ville...
n°827717
aozora
Posté le 23-05-2006 à 10:34:26  profilanswer
 

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
n°827720
Suri
Darksurious
Posté le 23-05-2006 à 10:35:13  profilanswer
 

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


---------------
Suri.morkitu.org : Balades au coeur de la ville...
mood
Publicité
Posté le   profilanswer
 

 Page :   1  2  3
Page Précédente

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Graphisme
  Web design

  menu deroulant vertical

 

Sujets relatifs
Design dreamweaver....(menu)Logiciel de création menu dvd
Menu Horizontal ou Vertical ?[problème avec un menu dhtml]
Apprentissage flash pour création de bannière et menumise en page et menu toujour affiché sans l'utilisation des frames.
Menu flash. De l'aide!Prb menu flash
Flash Mx 6.0 ==> menu déroulant 
Plus de sujets relatifs à : menu deroulant vertical


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR