menu en css

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : menu en css

Magik_billy

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

Publicité

Magik_billy

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

omega2

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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

gatsusat

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

The-Shadow

Développeur
T'as été voir dans ton profil?

ç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

The-Shadow

Développeur
T'as été voir dans ton profil?

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

gatsusat

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

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#menu, #menu *{ margin:0; padding:0; list-style:none;}
#menu li { float:left; }
#menu li a {
display:block;
text-decoration: none;
text-indent:-5000px;
height:17px;
background-repeat: no-repeat;
background-position:left top;
}
#menu li a:hover {
background-position: left -22px;
}
#menu #Mnews { background-image: url("images/news.gif" ); width:87px; }
#menu #Mconcerts { background-image: url("images/concerts.gif" ); width:128px; }
#menu #Mlisten { background-image: url("images/listen.gif" ); width:93px; }
#menu #Mliens { background-image: url("images/liens.gif" ); width:77px; }
#menu #Mcontacts { background-image: url("images/contacts.gif" ); width:111px; }
</style>
</head>
<body>
<ul id="menu">
<li><a href="#" id="Mnews">News</a></li>
<li><a href="#" id="Mconcerts">Concerts</a></li>
<li><a href="#" id="Mlisten">Listen</a></li>
<li><a href="#" id="Mliens">Liens</a></li>
<li><a href="#" id="Mcontacts">Contacts</a></li>
</ul>
</body>
</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

gatsusat

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

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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

Publicité

The-Shadow

Développeur
T'as été voir dans ton profil?

gatsusat a écrit :

Nan c'est toi qui fume !

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

gatsusat

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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

gatsusat

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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

Roane

Pingouino's fan

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

gatsusat

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 :

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

<a href="#" class="bouton">texte</a>
et en CSS :
[code]
.bouton {
background:url("img.jpg" ) no-repeat;
}
.bouton:hover {
background:url("imgover.jpg" ) no-repeat;
}

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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.

gatsusat

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

The-Shadow

Développeur
T'as été voir dans ton profil?

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 :

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

Code :

<a href="#" class="bouton">texte</a>
et en CSS :
[code]
.bouton {
background:url("img.jpg" ) no-repeat;
}
.bouton:hover {
background:url("imgover.jpg" ) no-repeat;
}

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.

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 :

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

gatsusat

The-Shadow a écrit :

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

Magik_billy

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.

Magik_billy

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

Magik_billy

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!!

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

menu en css

Sujets relatifs
mon menu javascript passe "en dessous" de mon anim flash	Menu sous conditions
[CSS] a:hover - menu - overflow - imbrication - div - dl - dd - dt	Pb javascript pour un menu (Map)
menu déroulant qui déroule bien	[css][resolu] centrer un menu.
Menu : décallage IE et FireFox	menu deroulant avec div et css
Menu Roll over	menu contextuel dans IE
Plus de sujets relatifs à : menu en css

Page générée en 0.083 secondes