[résolu] Un menu horizontal en une image...

Bonjour à tous (et à toutes )

Je souhaiterais faire un mbeau menu, accessible (primordiale pour un menu...), bien codé, et esthétique....avec une seule et unique image à laquelle il faut que je me tienne.

Voici l'image : http://www.hellsplayers.com/images/menubar.gif
->
http://www.hellsplayers.com/images/menubar.gif

J'hésite dans ma façon de procéder.
J'ai lu le billet de raphael concernant une technique pour les images map mais ici...

Comment feriez vous ?
Modifié par Dark elf (22 Jul 2005 - 23:04)

Tu est obligé de faire ca avec une image ? sinon tu pourrait obtenir un résultat très proche en mettant juste le dégradé en image en background, puis faire le reste en codant. Enfin c'est comme tu le sent, evidement le résultat sera pas pile-piol le même (je pense surtout à la police) en codant.

Nul besoin d'image maps pour ton menu.
Un vrai menu conviendra très bien, en employant la technique des portes coulissantes pour n'avoir qu'une seule image en tout

J'ai beau avoir compris cet article, je ne comprend pas bien comment l'assoicer à mon menu...

Si je peux mettre les liens en block pour leur donner la tailles qu'ils occupent sur l'image, mais ils ne seront plus alignés..

Je peux donc essayer en float...mais par rapport aux portes coulissantes je vois pas..

Et sachant en plus que le texte du menu fais partit de l'image...pfiou
Il ne faut pas oublier que l'image que je dois utiliser est celle que j'ai donné.

Et à la fin le menu devrai être centré
Modifié par Dark elf (20 Jul 2005 - 18:08)

J'ai du mal à comprendre ton problème.
Ce principe est justement fait pour créer des menus graphiques.

En voici quelques-uns construits sur ce principe :
- http://css.alsacreations.com (le menu horizontal)
- http://css.alsacreations.com/modelesmenus/g01.htm
- http://css.alsacreations.com/modelesmenus/g02.htm
- http://css.alsacreations.com/modelesmenus/g03.htm
- http://css.alsacreations.com/modelesmenus/g05.htm
- http://css.alsacreations.com/modelesmenus/g06.htm

Comme tu le vois : tout est faisable avec ce principe !!

Mon principal probleme, c'est que le menu est horizontal..

Mais en voyant ceci : http://css.alsacreations.com/modelesmenus/g02.htm

Je pense que je peux parvenir à mes fins. C'est à peu près ça..

Par contre, après, je serais obligé de rajouter une division dans le code pour pouvoir centrer le menu en float..
Modifié par Dark elf (20 Jul 2005 - 18:15)

Voilà ce que j'ai fait :

xhtml

<ul>
<li id="lien1"><a href="lien1"><span>Test</span></a></li>
<li id="lien2"><a href="lien1"><span>Test</span></a></li>
<li id="lien3"><a href="lien1"><span>Test</span></a></li>
<li id="lien4"><a href="lien1"><span>Test</span></a></li>
</ul>

css

ul, li {
margin : 0;
padding :0;
}
ul {
list-style-type : none;
background : url(menubar.gif) no-repeat;
height : 22px;
}
li {
float : left;
}
li a {
display : block;
}
li#lien1 a {
width : 70px;
background : #000;
}
li#lien2 a {
width : 80px;
}
li#lien3 a {
width : 60px;
background : #000;
}
li#lien4 a {
width : 70px;
}
span {
margin-left : -5000px;
}

Ca marche bien
Qu'en pensez vous ?

J'en pense que " c'est pas terrible "... Tu n'as pas bien lu ce que Raphaël essaie de t'expliquer en parlant d'une seule image et en t'envoyant vers un lien qui est au top, puis vers des tutoriels qu'il à lui même écrit.

Dans cette image les traits bleus sont des repères photoshop.
Ton image possède des coordonnées que toi seul, le créateur peut connaître avec précision. Le coin supérieur gauche est la clé capitale pour le background-position à indiquer dans les éléments <li> et non dans <ul>. Exemple :

#menucommunity a {
background: url("images/menu.jpg") -405px 0 no-repeat;}
#menucommunity a:hover {
background: url("images/menu.jpg") -405px -22px no-repeat;}
#menucommunity a:active {
background: url("images/menu.jpg") -405px -44px no-repeat;}

PS : je ne me souviens jamais si on doit indiquer top ou left en premier un simple essai te permettra de le savoir. Après :

<ul><li id="menucommunity"><a href="comun.html" title="connaître notre communauté"></a></li></ul>

et... Ne pas oublier de remplir un attribut " title " pour l'accessibilité. Il faudra aussi indiquer une hauteur ( ici 22px ) et une largeur précise pour chaque élément.
Modifié par Aureance (21 Jul 2005 - 02:54)

Alors là franchement, je ne comprend pas..

Tu me présente un menu qui a des propriété hover et active alors que pour le moment, celui-ci est plus simple...

Et je ne vois pas ce que tes propos m'apportent là...
Tu me présentes plutot la façon de le rendre un peu plus dynamique grace à un hover & co.

J'essayais juste de bien positionner les liens sur mon menu/image..
je ne vois pas en quoi tu positionne des liens dans la portion de code que tu viens de donner..

Et je ne vois pas en quoi ma solution est alors "pas terrible" puisque le code est clair et que la solution parait accessible

Si mes propos peuvent paraitre agressif, détrompe toi, je suis peut être juste un peu trop direct mais j'apprécie beaucoup que tu tentes de m'éclaircir sur mon probleme

Mais il y a des chances qu'en effet je comprenne mal alors je vais relire l'ensemble des posts ici-présents..

Edit : je commence à mieux percevoir ce que tu voulais dire...
Je vais essayer aussi ainsi. Mais en quoi ma solution était elle moins bonne ?
Modifié par Dark elf (21 Jul 2005 - 12:49)

Je trouve que de mettre l'image dans <ul> est moins bon parce que pas évolutif à l'avenir. Tu peux par exemple, même si tu ne veux pas d'effet hover ou active, avoir besoin d'une petite différence de couleur pour différencier l'onglet de la rubrique ouverte. Au cas ou tu changerais d'avis dans quelques mois, ce serait plus facile à modifier.
Dans le cas de l'image que j'ai mis plus haut, tu peux n'utiliser que la première bande à placer dans <li>. Si j'ai mis un exemple qui va trop au delà de tes désirs : c'est parce que l'autre jour, avec FireFox, j'ai vu un site ou toutes les images de l'interface étaient reunies en trois planches : le menu complet / toutes les puces et petites illustrations / tous les smileys... 3 images uniquement pour une interface complète, j'ai vraîment trouvé ça génial.
Je trouve que la solution de positionner les backgrounds dans les éléments de liste <li> est la solution la plus complète et la plus évoluée. Et comme on dit : qui peut le plus peut le moins.

Pas bête

Je vais me pencher là dessus
Dis le découpage que tu as fait (0, -69 & co) est-il correct ?
Si c'est le cas, j'aimerais m'en servir

Non, hélas ! le découpage, les hauteurs 0 / 22 / 44 sont bonnes mais pour les largeurs, les cotes ne sont pas correctes, j'ai fait à "main levée" ( au pif ) sur photoshop, c'est pas trop éloigné de la vérité mais il peut y avoir ( il y a sans doute ) des décalages de quelques pixels. Si tu regardes bien, parfois le repère vertical est avant ou après les séparations.
Il n'y a pas de repères sur un jpg, donc pas de magnétisme. C'est à toi de mettre tes repères et tes cotes quand tu fabriques ton illustration. Seul celui qui fait et décide son image .psd peut savoir et noter avec précision les cotes.
<edit> Dommage, je n'ai pas conservé le doc photoshop avec les calques... sinon je te l'aurais donné.
Modifié par Aureance (22 Jul 2005 - 01:32)

Aureance a écrit :

PS : je ne me souviens jamais si on doit indiquer top ou left en premier

Quand on utilise les mots-clés, on peut écrire top left ou left top, ça signifie toujours en haut à gauche (à gauche en haut). C'est quand on utilise des valeurs en pourcentage ou en longueur que la première valeur correspond à la position horizontale.

Recommandation CSS2 du W3C a écrit :

top left et left top
Identique à '0% 0%' ;

top, top center et center top
Identique à '50% 0%';

right top et top right
Identique à '100% 0%' ;

left, left center et center left
Identique à '0% 50%' ;

center et center center
Identique à '50% 50%' ;

right, right center et center right
Identique à '100% 50%' ;

bottom left et left bottom
Identique à '0% 100%' ;

bottom, bottom center et center bottom
Identique à '50% 100%' ;

bottom right et right bottom
Identique à '100% 100%'.

http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background-position

Merci Stephan. J'avais déjà lu cette page et comme je la trouve super "claire", je suis toujours obligé de vérifier :
background: url("menu.jpg") 250px -40px;
Je ne sais jamais avant vérification ( même en ayant lu cette recommandation ) si 250px se rapporte a l'axe X ou Y.
Donc, après super effort de concentration... La première notation se rapporte à l'axe X.
Donc on note dans l'ordre : 1x(pour left) 2y (pour top). Y'a pas d'erreur ?
Modifié par Aureance (22 Jul 2005 - 02:19)

Aureance a écrit :
Non, hélas ! le découpage, les hauteurs 0 / 22 / 44 sont bonnes mais pour les largeurs, les cotes ne sont pas correctes, j'ai fait à "main levée" ( au pif ) sur photoshop, c'est pas trop éloigné de la vérité mais il peut y avoir ( il y a sans doute ) des décalages de quelques pixels. Si tu regardes bien, parfois le repère vertical est avant ou après les séparations.
Il n'y a pas de repères sur un jpg, donc pas de magnétisme. C'est à toi de mettre tes repères et tes cotes quand tu fabriques ton illustration. Seul celui qui fait et décide son image .psd peut savoir et noter avec précision les cotes.
<edit> Dommage, je n'ai pas conservé le doc photoshop avec les calques... sinon je te l'aurais donné.

Bah écoute, je m'en suis servit quand même et la précision est tout de même plus ou moins au rendez-vous.
Si possible j'aimerais que tu m'en dise un peu plus sur la façon de mettre une echelle car j'ai essayé avec toshop, j'ai eu un peu de mal..

Et j'aimerais aussi comprendre pourquoi les mesures sont négatives.. Je croyais que c'était la distance par rapport au bord droit, alors pourquoi je n'y arrive pas avec des mesures positives ?

Je vous donne mon code final au cas ou vous ayez encore quelques remarques :

css

ul, li {
margin : 0;
padding :0;
}
ul {
position : absolute ;
left: 50%; 
margin-left : -250px;
list-style-type : none;
}
li {
float : left;
}
li a {
display : block;
height : 22px;
}
li#lien_accueil a {
width : 69px;
background: url(menubar.gif) no-repeat 0 0;
}
li#lien_articles a {
width : 86px;
background: url(menubar.gif) no-repeat -69px 0;
}
li#lien_jeux a {
width : 52px;
background: url(menubar.gif) no-repeat -155px 0;
}
li#lien_gallerie a {
width : 76px;
background: url(menubar.gif) no-repeat -207px 0;
}
li#lien_media a {
width : 76px;
background: url(menubar.gif) no-repeat -283px 0;
}
li#lien_forum a {
width : 57px;
background: url(menubar.gif) no-repeat -340px 0;
}
li#lien_community a {
width : 94px;
background: url(menubar.gif) no-repeat -405px 0;
}
span {
margin-left : -5000px;
}

xhtml

<ul>
<li id="lien_accueil"><a href="index.php" title="Revenir vers l'accueil"><span>Accueil</span></a></li>
<li id="lien_articles"><a href="articles.php" title="Lire les articles""><span>Articles</span></a></li>
<li id="lien_jeux"><a href="jeux.php"><span>Jeux</span></a></li>
<li id="lien_gallerie"><a href="gallerie.php" title="Voir la gallerie"><span>Gallerie</span></a></li>
<li id="lien_articles"><a href="articles.php"><span>Media</span></a></li>
<li id="lien_jeux"><a href="jeux.php" title="Aller sur le forum"><span>Forum</span></a></li>
<li id="lien_community"><a href="community.php"><span>Community</span></a></li>
</ul>

En tout cas, merci à tous
PLus particulièrement à Aureance
Modifié par Dark elf (22 Jul 2005 - 22:49)

Le point zéro ( 0x et 0y ) se situe en haut à gauche. Alors pour le positionnement, ce petit dessin t'expliquera.


Pour Photoshop, c'est pas trop le lieu pour en parler... mais :

Pour mettre " l'échelle " sur Photoshop, je pense que tu parles du quadrillage fait par lignes de repères ?
• Il faut d'abord aller dans les préférences Photoshop pour quelques réglages.
1/ préférences > repères et grille > Repères : traits continus. Grille : régler le pas à 5px et les subdivisions à 5.
2/ préférences > unités et règles > règles : pixels.
Puis il faut activer le magnétisme de la grille et désactiver celui des repères.
3/ menu affichage > magnétisme > grille, repères.
Afficher les règles.
4/ pom+r ( ou ctrl+r si tu es sur PC ) affiche/désaffiche les règles.
5/ tu peux afficher la grille, moi j'aime pas, ça cache tout et puisque son magnétisme fonctionne même sans qu'elle soit affichée on peut s'en passer.
Bon, nous sommes prêts. Maintenant, ( C'est pas mauvais de zoomer sur le document pour être encore plus précis ) on pose son curseur sur une règle, on fait un cliqué/glissé vers le centre de l'écran. Il sort, de la barre de règle, un repère collé au curseur ( ligne pointillée grise ). Quand tu arrives à peu près à l'endroit ou tu veux poser le repère, tu appuies sur la touche ctrl ça forcera le repère à se placer très précisément sur une des divisions de la grille, grâce au magnétisme. Tu lâches le clic, voilà, le repère est créé. Si on est pas content de soi, on peut faire pom+z ( ctrl+z pour PC ) ou bien déplacer le repère en approchant doucement dessus la souris et en appuyant sur la touche contrôle, le curseur change de forme... clic+contrôle+déplacement. ( tu lâches ailleurs ou si tu vas jusqu'à la règle il s'anéantit dedans )

• Une fois tous tes repères disposés. On va prendre les mesures.
1/ On désactive le magnétisme de la grille et on active celui des repères.
2/ On affiche les infos ( menu fenêtre > infos ).
3/ Avec l'outil sélection rectangulaire, tu cliques sur l'angle supérieur gauche de l'image, tu glisses jusque ou tu veux. Le magnétisme collera aux repères et ta palette d'infos te donnera les coordonnées, les dimensions en pixels puisqu'on a réglé au départ les unités dans les préférences ( ou bien voir dans les options de la palette infos ). etc...

NB : La meilleure méthode, pour être précis, consiste à créer les repères avant et de s'en servir pour construire l'image. Plutôt que de faire une image " à l'œil " puis de tisser dessus un réseau de repères pour mesurer après.

Merci beaucoup Aureance

Je dois être bête ou pas en forme parce que je vois toujours pas trop pourquoi c'est -69 et pas 69...je vais observer ton schéma plus attentivement..

Pour l'histoire de faire le repère avant l'image & co, le probleme est que notre équipe dispose d'un webdesigner et que moi je m'occupe du code xhtml/css, pas directement des images

D'ailleurs, on a sortit le site hier si cela interresse certains
=> http://www.xbox360area.fr (je ne me suis pas encore penché sur la totalité des pages..)

Et je tente de régler un petit probleme sur la page d'accueil (index.php) :
Le titre de chaque news ainsi que le petit texte d'intro qui les suit devraient être collés, or, j'ai un espace.
J'ai tellement travaillé et retouché le code que l'évidence de la solution ne me saute pas aux yeux. Donc si quelqu'un sait d'où vient l'espace
Ce sera très gentil
Modifié par Dark elf (23 Jul 2005 - 18:27)

Dark elf a écrit :
Je dois être bête ou pas en forme parce que je vois toujours pas trop pourquoi c'est -69 et pas 69...

Faut jamais dire qu'on est bête... mais dire qu'on comprend vite quand on nous explique longtemps. ( voir, qu'on nous explique bien )
Le coin supérieur gauche de l'image se place automatiquement par défaut au même endroit que le point supérieur gauche du conteneur ( body, div, p, li etc... on s'en moque... de ce point de vue, c'est pareil. )
Prenons pour base ton image, exemple :
1/ L'angle supérieur gauche de la zone " jeux " de l'image est situé " à 155px à droite par rapport à l'angle supérieur gauche de l'image elle même. il est aussi situé par défaut à 155px à droite de l'angle supérieur gauche du conteneur.
2/ Pour tirer l'image vers la gauche, on lui enlève -155px "left" pour que le point +155px à droite dans l'image corresponde à la position du point zéro du conteneur.

Pour ton web designer; tu lui demandes les cotes exactes ( tu lui montres ce post s'il ne veut rien comprendre )
Dans ta css tu as laissé la règle "div.news p" vide et pas fait de "div.news h2". Faut voir avec les marges pour enlever l'espace entre tes titres et tes paragraphes, exemple : margin top & bottom : zéro. ou "div.new p {margin: 0;}
C'est bien clean, ton truc fini. Bravo.
Modifié par Aureance (23 Jul 2005 - 21:20)

Merci (maitenant c'est clair )

Merci aussi pour le compliment au sujet de mon code. J'ai essayé de faire de mon mieux, pas toujours evident quand on est plusieurs à coder et que les news et dossiers sont écrits via une administration (même si on l'a recodée nous même).
Je compte encore éclaircir un peu mon code..(et virer le javascript que le second codeur a mis et qui ne sert plus à rien)

Mais pour l'espace entre le titre et le chapeau de la news..je suis désolé mais si le contenu de div.news p est vide, c'est que je l'ai viré pour des tests.

Mais lorsque je met carrément margin : 0;
aucun résultat

Je vais le faire pour que tu t'en rende compte.
Edit : voilà, avec margin : 0; aucun resultat..
Modifié par Dark elf (24 Jul 2005 - 00:49)