menu en css

menu en css - HTML/CSS - Programmation

Marsh Posté le 19-10-2005 à 21:24:40    

puisque j'ecoute bien ce qu'on me dit, je fait donc mon menu en css.  
Mais, comment on le fait avec des images, et pas avec des fonds de couleur...  
Comme sur mon site( qui marche mal, voir pas), mais pas en js, en css ?  
ya qq1?  
Merci

Reply

Marsh Posté le 19-10-2005 à 21:24:40   

Reply

Marsh Posté le 19-10-2005 à 21:25:51    

ah oui....
www.nancyrockcity.com  
qui est la version provisoire, vu que c tout vérolé...

Reply

Marsh Posté le 21-10-2005 à 18:28:26    

En utilisant 'background−image' au lieu de 'background−color' dans le css.

Reply

Marsh Posté le 21-10-2005 à 18:57:01    

Vu le menu de ton site, je m'en tiendrais au rollover en js, les CSS n'ont pas d'intérêt dans ce cas précis.

Message cité 1 fois
Reply

Marsh Posté le 21-10-2005 à 19:48:47    

The-Shadow a écrit :

Vu le menu de ton site, je m'en tiendrais au rollover en js, les CSS n'ont pas d'intérêt dans ce cas précis.


 
tu fumes toi !
justement les CSS on toutes leur intérêt dans ce cas précis. un rollover en JS pour un truc aussi simple faut pas abuser quand même.
 
UL LI A
 
et un id sur chaque lien et CSS powa et basta


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 21-10-2005 à 19:53:51    

ça veut dire 2 déclaration de background par bouton du menu, c'est inutile, quand un simple onmouseover="image.src='monimage.gif" suffit.
Et si il fait son menu en background CSS, ça va s'afficher comment ses boutons image sur un navigateur texte ? Alors qu'avec un seul div et 5 images, il peut mettre des textes alternatifs.
C'est toi qui fume.

Message cité 1 fois
Message édité par The-Shadow le 21-10-2005 à 19:54:20
Reply

Marsh Posté le 21-10-2005 à 19:56:22    

Euh, par contre, je n'utiliserais pas la fonction toute faite de Dreamweaver pour les faire, il y a beaucoup plus simple.

Reply

Marsh Posté le 21-10-2005 à 20:34:07    

débutant : full CSS ca prend 10x moins de code HTML :  
http://gatsu.ftp.free.fr/Modele/Menu/menu.html
 

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <style type="text/css">
  7.  #menu, #menu *{ margin:0; padding:0; list-style:none;}
  8.  #menu li { float:left; }
  9.  #menu li a {
  10.   display:block;
  11.   text-decoration: none;
  12.   text-indent:-5000px;
  13.   height:17px;
  14.   background-repeat: no-repeat;
  15.   background-position:left top;
  16.  }
  17.  #menu li a:hover {
  18.   background-position: left -22px;
  19.  }
  20.  #menu #Mnews { background-image: url("images/news.gif" ); width:87px; }
  21.  #menu #Mconcerts { background-image: url("images/concerts.gif" ); width:128px; }
  22.  #menu #Mlisten { background-image: url("images/listen.gif" ); width:93px; }
  23.  #menu #Mliens { background-image: url("images/liens.gif" ); width:77px; }
  24.  #menu #Mcontacts { background-image: url("images/contacts.gif" ); width:111px; }
  25. </style>
  26. </head>
  28. <body>
  29. <ul id="menu">
  30. <li><a href="#" id="Mnews">News</a></li>
  31. <li><a href="#" id="Mconcerts">Concerts</a></li>
  32. <li><a href="#" id="Mlisten">Listen</a></li>
  33. <li><a href="#" id="Mliens">Liens</a></li>
  34. <li><a href="#" id="Mcontacts">Contacts</a></li>
  35. </ul>
  36. </body>
  37. </html>


The-Shadow a écrit :

ça veut dire 2 déclaration de background par bouton du menu, c'est inutile, quand un simple onmouseover="image.src='monimage.gif" suffit.


ya pas de double declaration de background, puisque j'utilise une seul image par bouton.
j'aurai même pu utiliser une seule et même image pour tout le menu. mais bon j'aurai du refaire des calculs sur le background-position

The-Shadow a écrit :


Et si il fait son menu en background CSS, ça va s'afficher comment ses boutons image sur un navigateur texte ? Alors qu'avec un seul div et 5 images, il peut mettre des textes alternatifs..


J'ai mis des textes dans mes liens et ils s'afficheront correctement dans un navigateur texte. et c'est bien mieux que les textes alternatif

The-Shadow a écrit :


C'est toi qui fume.


 
Nan c'est toi qui fume !

Message cité 1 fois
Message édité par gatsusat le 21-10-2005 à 20:39:53

---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 21-10-2005 à 20:36:42    

et utilise les CSS bordel, ca va regler ton pb de background en un clin d'oeil


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 21-10-2005 à 21:32:24    

Ouai super, on met du texte et on le décale à gauche de l'écran.
En PAO, on appelle ça du bidouillage ou de la mise en page poubelle.
Et entre nous, je te le fais en JS avec encore moins de code.

Message cité 1 fois
Reply

Marsh Posté le 21-10-2005 à 21:32:24   

Reply

Marsh Posté le 21-10-2005 à 21:33:02    

gatsusat a écrit :


Nan c'est toi qui fume !


Oui mais moi contrairement à toi, c'est du tabac.  :)

Reply

Marsh Posté le 21-10-2005 à 21:52:58    

The-Shadow a écrit :

Ouai super, on met du texte et on le décale à gauche de l'écran.


Techinque utilisée par tous les professionnels des CSS et très souvent utilisée pour des menus de ce type.

The-Shadow a écrit :


En PAO, on appelle ça du bidouillage ou de la mise en page poubelle.


c'est pas du bidouillage, c'est du CSS autre que toi tu connais
 

The-Shadow a écrit :


Et entre nous, je te le fais en JS avec encore moins de code.


Le JS c'est pour ameliorer l'experience utilisateur, et quand on a pas de JS on a pas les fioritures, alors qu'avec les CSS ici on les aas.
 
et puis on sépare toujours le HTML/CSS/JS, il n'y a jamais de javascript dans les pages de nos jours.
 
tiens pour ta gouverne !!!!
http://css.alsacreations.com/Galeries-de-menus-en-CSS
 
les CSS c'est pas du bidouillage, sauf dans de très rares caas pour palier aux merdes de IE.
le text-indent:-5000px, ca fait partie des choses qu'on peut se permettre de faire en CSS, tout comme un paquet d'autres choses. A partir du moment ou le code HTML  n'est pas pourri par du JS à deux balles

Message cité 1 fois
Message édité par gatsusat le 21-10-2005 à 21:59:31

---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 21-10-2005 à 22:15:12    

gatsusat a écrit :


et puis on sépare toujours le HTML/CSS/JS, il n'y a jamais de javascript dans les pages de nos jours.


N'importe quoi, le vieux rêve genre le monde est comme je veux. :sarcastic:  

Message cité 1 fois
Reply

Marsh Posté le 22-10-2005 à 08:19:57    

The-Shadow a écrit :

N'importe quoi, le vieux rêve genre le monde est comme je veux. :sarcastic:


 
Demande à tous les pros de cette section, il te diront la même chose.
 
continue à produire de la merde, et a faire du vieux HTML. Nous on s'en fout. Mais viens pas conseiller les gens de faire un rollover en JS alors que en CSS Ca se fait tout simplement, comme tu peux le voir.
 
et puis il y a peut etre beaucoup de code pour mes CSS, mais seulement 2 lignes pour mon rollOver.
 
Tu n'as rien compris aux CSS, et je crois que ce n'est pas maintenant que tu y comprendras quelque chose  [:petrus75]  
 
Si le mec veux un jour changer tout le design de son site, il n'aura juste qu'à passer par la feuille de style, alors que avec ta solution bidon de JS/HTML, il devra modifier un paquet de trucs

Message cité 1 fois

---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 22-10-2005 à 10:50:00    

gatsusat a écrit :

Demande à tous les pros de cette section, il te diront la même chose.


Je suis un pro, je suis de cette section et je te dis le contraire.  [:airforceone]  
 

gatsusat a écrit :

continue à produire de la merde, et a faire du vieux HTML. Nous on s'en fout. Mais viens pas conseiller les gens de faire un rollover en JS alors que en CSS Ca se fait tout simplement, comme tu peux le voir.


Je fais ce que je veux.  [:airforceone]  
 

gatsusat a écrit :


et puis il y a peut etre beaucoup de code pour mes CSS, mais seulement 2 lignes pour mon rollOver.


Je te le fesais en plus court.  [:airforceone]  
 

gatsusat a écrit :

Tu n'as rien compris aux CSS, et je crois que ce n'est pas maintenant que tu y comprendras quelque chose  [:petrus75]


J'ai très bien compris ce qu'il y avait à comprendre. [:airforceone]  
 

gatsusat a écrit :

Si le mec veux un jour changer tout le design de son site, il n'aura juste qu'à passer par la feuille de style, alors que avec ta solution bidon de JS/HTML, il devra modifier un paquet de trucs


Ca c'est du pipeau et si tu étais un vrai pro, tu le saurais. Quand on redesign un site, on ne se contente jamais de retoucher au CSS.  [:airforceone]  

Message cité 2 fois
Reply

Marsh Posté le 22-10-2005 à 10:56:44    

The-Shadow a écrit :

Quand on redesign un site, on ne se contente jamais de retoucher au CSS.  [:airforceone]


 
Ben en fait, si la css est bien faite, si :)
 
Voire meme que si t'as séparé les couches mvc, t'as que des templates à modifier :)


---------------
http://www.alsacreations.com, http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net. A ne surtout pas prendre en exemple : http://www.worldinternet.be
Reply

Marsh Posté le 22-10-2005 à 11:05:26    

The-Shadow a écrit :

Je suis un pro, je suis de cette section et je te dis le contraire.  [:airforceone]


un pro qui indique le mauvais chemin à pratiquer, n'est pas un pro pour moi
 

The-Shadow a écrit :

Je fais ce que je veux.  [:airforceone]


Fais ce que tu veux mais dans 5 ans tu utiliseras encore des méthodes dépassées
 

The-Shadow a écrit :

Je te le fesais en plus court.  [:airforceone]


toi ton rollover tu fais :  

Code :
  1. <a href="#"><img onmouseover="this.src='imgover.gif' onmouseout="this.src='imgout.gif'"></a>


 
ça c'est du code moche.
Imagine que tu as un bouton contenant du texte, qui se répète assez souvent dans le site, tu vas faire comment ?? pour chaque bouton tu va creer une image over et une image out ?
 
ben nan tu fais comme ca c'est tout :  

Code :
  1. <a href="#" class="bouton">texte</a>
  4. et en CSS :
  5. [code]
  6. .bouton {
  7.   background:url("img.jpg" ) no-repeat;
  8. }
  9. .bouton:hover {
  10.   background:url("imgover.jpg" ) no-repeat;
  11. }


et pour n'importe quel bouton du site, j'ai juste qu'à faire class="bouton". c'est tout simple
 

The-Shadow a écrit :

J'ai très bien compris ce qu'il y avait à comprendre. [:airforceone]


Tant que tu proposeras encore des rollover en JS pour des menu de ce genre tu n'auras rien compris du tout.
 

The-Shadow a écrit :

Ca c'est du pipeau et si tu étais un vrai pro, tu le saurais. Quand on redesign un site, on ne se contente jamais de retoucher au CSS.  [:airforceone]


Je viens de finir un contrat de 2 ans dans une boite de dev, on faisait des portails et des sites. Quand ils ont vu que leurs truc compliqués en JS et vieux HTML je le transformait en truc simple en CSS. il m'ont tout de suite demandé de faire des modifs en CSS de certains de leurs vieux menu a deux balles pleins de tableaux pourri. Resultat des courses : on gagne 5ko à 10ko par page.
 
et si toi tu étais un vrai pro, quand on redesign un site, on se contente de la feuille de style, et au pire, on rajoute quelques balises HTML si nécessaire. Mais normalement il n'y a pas besoin.

Message cité 1 fois
Message édité par gatsusat le 22-10-2005 à 11:05:57

---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 22-10-2005 à 11:08:36    

Rien à voir avec la conception de la CSS, j'ai pas dit que c'était impossible, j'ai dit qu'on ne s'en contentait pas.

Reply

Marsh Posté le 22-10-2005 à 11:12:01    

ben si on peu s'en contenter largement. Le monsieur il a demandé un menu en CSS et toi tu lui propose une merde en JS


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 22-10-2005 à 11:15:13    

gatsusat a écrit :

un pro qui indique le mauvais chemin à pratiquer, n'est pas un pro pour moi


Pour toi (ou même pour vous sur HFR), j'm'en fous un peu, aucun de vous ne me rapportera jamais d'argent de toutes façons.  [:airforceone]  
 

gatsusat a écrit :


Fais ce que tu veux mais dans 5 ans tu utiliseras encore des méthodes dépassées


Tu as tout faux.  [:airforceone]  
 

gatsusat a écrit :


toi ton rollover tu fais :  

Code :
  1. <a href="#"><img onmouseover="this.src='imgover.gif' onmouseout="this.src='imgout.gif'"></a>


 
ça c'est du code moche.
Imagine que tu as un bouton contenant du texte, qui se répète assez souvent dans le site, tu vas faire comment ?? pour chaque bouton tu va creer une image over et une image out ?
 
ben nan tu fais comme ca c'est tout :  

Code :
  1. <a href="#" class="bouton">texte</a>
  4. et en CSS :
  5. [code]
  6. .bouton {
  7.   background:url("img.jpg" ) no-repeat;
  8. }
  9. .bouton:hover {
  10.   background:url("imgover.jpg" ) no-repeat;
  11. }


et pour n'importe quel bouton du site, j'ai juste qu'à faire class="bouton". c'est tout simple


T'as vu la taille de ton code par rapport à celui que j'aurais fait.  [:airforceone]  
Si je fais un bouton avec du texte à l'intérieur mais que le texte est en HTML, je fais une liste CSS, je prends le meilleur dans les 2 mondes et je l'utilise quand il faut.  [:airforceone]  
 

gatsusat a écrit :

Tant que tu proposeras encore des rollover en JS pour des menu de ce genre tu n'auras rien compris du tout.


Prétentieux et présomptueux. C'est tout toi.  [:airforceone]  
 
 

gatsusat a écrit :

Je viens de finir un contrat de 2 ans dans une boite de dev, on faisait des portails et des sites. Quand ils ont vu que leurs truc compliqués en JS et vieux HTML je le transformait en truc simple en CSS. il m'ont tout de suite demandé de faire des modifs en CSS de certains de leurs vieux menu a deux balles pleins de tableaux pourri. Resultat des courses : on gagne 5ko à 10ko par page.


Super, j'suis content pour toi. Du coup, tu bosses toujours chez eux et tu te fais des couilles en or j'espère.  [:airforceone]  
 

gatsusat a écrit :

et si toi tu étais un vrai pro, quand on redesign un site, on se contente de la feuille de style, et au pire, on rajoute quelques balises HTML si nécessaire. Mais normalement il n'y a pas besoin.


Ha bah tu nuances tes propos déjà, un peu de bon sens te viendrait-il ?
 
 
Bon, sujet clos pour moi, débat stérile, parler à un mur pour faire du HS, c'est pas intéressant.

Message cité 1 fois
Reply

Marsh Posté le 22-10-2005 à 11:18:11    

The-Shadow a écrit :


T'as vu la taille de ton code par rapport à celui que j'aurais fait.  [:airforceone]  
Si je fais un bouton avec du texte à l'intérieur mais que le texte est en HTML, je fais une liste CSS, je prends le meilleur dans les 2 mondes et je l'utilise quand il faut.  [:airforceone]  


Mon code n'est pas lourd puisqu'il sera integré dans la CSS qui ne sera chargée qu'une seule fois.
 
et toi tu aura du JS inline qui malheureusement devra être modifié dans chaque page (si site sans include).
 
M'enfin ca sera toujours un debat stérile.
Mais essaye de faire comme on te dis bordel !


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 27-10-2005 à 18:11:06    

Salut, je traine un peu pour repondre, mais bon....
donc, j'ai fait ca :  
 
 
 
<style type="text/css">
 
#menu {display:block; width:900px; height:30px;}
 
#menu ul {margin:0; padding:0; list-style-type:none;}
 
#menu li {float:left;}
 
#menu a {display:block; width:100px; padding-top:30px; margin-right:0px; height:0; color:#000; text-decoration:none; overflow:hidden;}
 
* html #menu a:link, * html #menu a:visited {height:30px; height:0;}
 
#menu a#item1 {background:transparent url(/imagesmenu/news.jpg) 0 0 no-repeat;}
#menu a#item2 {background:transparent url(/imagesmenu/concerts.jpg) 0 0 no-repeat;}
#menu a#item3 {background:transparent url(/imagesmenu/listen.jpg) 0 0 no-repeat;}
#menu a#item4 {background:transparent url(/imagesmenu/liens.jpg) 0 0 no-repeat;}
#menu a#item5 {background:transparent url(/imagesmenu/mailing.jpg) 0 0 no-repeat;}
#menu a#item6 {background:transparent url(/imagesmenu/contact.jpg) 0 0 no-repeat;}
 
#menu a#item1:hover {background:transparent url(/imagesmenu/news_on.jpg) 0 0 no-repeat;}
#menu a#item2:hover {background:transparent url(/imagesmenu/concerts_on.jpg) 0 0 no-repeat;}
#menu a#item3:hover {background:transparent url(/imagesmenu/listen_on.jpg) 0 0 no-repeat;}
#menu a#item4:hover {background:transparent url(/imagesmenu/liens_on.jpg) 0 0 no-repeat;}
#menu a#item5:hover {background:transparent url(/imagesmenu/mailing_on.jpg) 0 0 no-repeat;}
#menu a#item6:hover {background:transparent url(/imagesmenu/contact_on.jpg) 0 0 no-repeat;}
 
* html #menu a:hover {height:30px; height:0;}
 
 
 
 
</style>
 
 
 
<div id="menu">
<ul>
<li class="list1"><a id="item1" href="#" title="NEWS">NEWS</a></li>
<li class="list2"><a id="item2" href="#" title="CONCERTS">CONCERTS</a></li>
<li class="list3"><a id="item3" href="#" title="LISTEN">LISTEN</a></li>
<li class="list4"><a id="item4" href="#" title="LIENS">LIENS</a></li>
<li class="list5"><a id="item5" href="#" title="MAILING">MAILING</a></li>
<li class="list6"><a id="item6" href="#" title="CONTACTS">CONTACTS</a></li>
</ul>
</div>
 
 
 
mais ca n'affiche rein dnas mon navigateur.
 
Sans faire  le relou je bosse de nuit dans un HP, et j'ai des restrictions reso... donc pas accés au forum. Si vous pouvez me repondre sur mon mail... ca me permettra d'avancer un peu, et bcp plus vite que tout seul comme un iench.. nancyrockcity@hotmail.com  
 
Un GRAND merci d'avance.

Reply

Marsh Posté le 27-10-2005 à 18:12:53    

et comment je bouge les commentaires qui s'affiche  qd je passe sur le liens ? les petite fenetre avec le nom du liens ?

Reply

Marsh Posté le 27-10-2005 à 18:19:37    

gatsusat, je viens de voir le liens avec mon menu, merci!!! donc, oué, c bien mieux avec une seule image, et bien mieux en CSS qu'en JS.... pas de doute la dessus!!!!!!
 
Merci!!

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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