Idée pour mise en place d'un menu horizontal.....

Idée pour mise en place d'un menu horizontal..... - HTML/CSS - Programmation

Marsh Posté le 03-01-2005 à 13:14:57    

Yop!
 
J'ai un petit problème avec la conception d'une page web...
 
J'ai fais le design suivant sous fireworks :
 
http://www.duotone.ch/~proprios/test.gif
 
et je sais pas comment mettre en place le menu horizontal que vous pouvez voir... -> en fait le problème, c que la bande grisée touche le batiment (à gauche) et que je ne vois pas comment je pourrais faire autrement que d'utiliser une "grande" image qui enbloberait le batiment, le logo et le menu...
 
De plus j'ai également fais un essai avec animation flash (du menu)...mais je sais pas si c terrible d'avoir un menu en flash (si le visiteur n'a pas le FlashPlayer, il est baisé... :S).
 
Des conseils? Merci!!
 
@++


Message édité par le_duc le 03-01-2005 à 13:15:54
Reply

Marsh Posté le 03-01-2005 à 13:14:57   

Reply

Marsh Posté le 03-01-2005 à 13:33:53    

Laisse tomber le menu flash. Sinon pour le batiment de gauche, ben effectivement il faut une toute grande image. Dans ce cas-là, en PNG-8 ça serait super léger, donc pas de probs ;)
 
Ensuite pour les éléments du menus, une simple liste (<ul> ) avec les <li> en float: left;, et ça roule :)

Reply

Marsh Posté le 03-01-2005 à 13:41:05    

Oui il y a plusieurs façon de faire ...
Tu peux aussi faire une image qui comprend tout le bandeau sans le bas de l'image (sans la bande du menu) et mettre le bout restant du batiment en fond du menu à gauche.

Reply

Marsh Posté le 03-01-2005 à 14:00:22    

pour le menu en lui même, voir ici, pour son fond une image en dégradé faisant la bonne hauteur et 1px de large répétée sur tout l'axe X, pour le logo (batiment), PNG8 transparent dans le coin bas droite


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-01-2005 à 14:09:25    

Tiens, voilà l'image en PNG (4.06 Ko) :
 
http://florent.geffroy.free.fr/test.png
 
Après tu rajoute ton logo et le menu.

Reply

Marsh Posté le 03-01-2005 à 14:38:17    

FlorentG a écrit :

Tiens, voilà l'image en PNG (4.06 Ko) :
 
http://florent.geffroy.free.fr/test.png
 
Après tu rajoute ton logo et le menu.


 [:totoz]  
Ca va être inutilisable, ca demande bien trop de précisiondans le placement du menu


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-01-2005 à 14:38:56    

Masklinn a écrit :

[:totoz]  
Ca va être inutilisable, ca demande bien trop de précisiondans le placement du menu


ben nan [:skeye]

Reply

Marsh Posté le 03-01-2005 à 14:40:25    

Masklinn a écrit :

[:totoz]  
Ca va être inutilisable, ca demande bien trop de précisiondans le placement du menu


 
Je vois pas le problème :??:

Reply

Marsh Posté le 03-01-2005 à 15:01:35    

re
 
Merci pour vos réponses!
 
Donc il faut que je mettes mon batiment en tant qu'image de fond de cellule, puis je place les éléments de mon menu au pixel près à l'aide d'une css. ? c juste?

Reply

Marsh Posté le 03-01-2005 à 15:03:17    

FlorentG a écrit :

Je vois pas le problème :??:


le positionnement (avec les incohérences entre IE et le reste), je pense qu'un résultat correct serait beaucoup plus facilement accessible/cohérent en séparant en 3 éléments (le bâtiment, le logo et le menu) ou 2 (bâtiment + logo et menu), rendant ainsi (du même coup) le menu indépendant graphiquement du reste et donc modifiable plus simplement (en cas de besoin)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-01-2005 à 15:03:17   

Reply

Marsh Posté le 03-01-2005 à 15:05:16    

Non, je pense que ça ira, faut juste faire un peu gaffe, mais ça passera même sous IE5 sans aucun hack (bien-sûr y'aura au pire 1 pixel de différence, mais rien de bien méchant ;) )

Reply

Marsh Posté le 03-01-2005 à 15:08:27    

Ben je vois pas comment peut être gérer le passage à une taille de police plus importante ... qui est accessible à tous les utilisateurs quel que soit leur navigateur ...

Reply

Marsh Posté le 03-01-2005 à 15:09:14    

Ben dans tous les cas une taille de police plus importante posera problème, alors...

Reply

Marsh Posté le 03-01-2005 à 15:11:27    

donc ce que je disais est bien correct :
 
"Donc il faut que je mettes mon batiment en tant qu'image de fond de cellule, puis je place les éléments de mon menu au pixel près à l'aide d'une css. ?"

Reply

Marsh Posté le 03-01-2005 à 15:13:33    

Oui, tout en CSS, c'est ça l'idée. Tu positionne ton <ul> pour correspondre à la barre grise, puis tu met tes <li> en position flottante. Pour la barre grise, elle sera en fond de l'<ul>. Pour le bâtiment, hop image transparente en gif, en position absolue, et ça marche :)

Reply

Marsh Posté le 03-01-2005 à 15:29:01    

FlorentG a écrit :

Oui, tout en CSS, c'est ça l'idée. Tu positionne ton <ul> pour correspondre à la barre grise, puis tu met tes <li> en position flottante. Pour la barre grise, elle sera en fond de l'<ul>. Pour le bâtiment, hop image transparente en gif, en position absolue, et ça marche :)


 
mais mtn je suis en-train de me demander si il n'y aura pas un "décalage" entre le début de la barre grise qui colle au batiment et la barre grise qui sera généré par css.....
 
pasque si c le cas, vaut ptetre mieux faire comme tu disais FlorentG, à savoir une "grande" image avec batiment, logo et barre du menu, puis positionner uniquement les éléments du menu avec une css...
 
A part ce problème, ca serait possible de faire un effet visuel "onMouseOver" qui changerait l'état de la barre de menu??

Reply

Marsh Posté le 03-01-2005 à 15:30:58    

Le décalage en _théorie_ non, mais on n'est jamais sûr du browser, donc effectivement une toute grande image et hop. Pour le onMouseOver, suffit de rajouter une image de fond dans le a:hover, et tu peux changer l'apparence de la barre. Encore une fois y'a des risques de décalage...
 
Faut faire l'essai en fait...

Reply

Marsh Posté le 03-01-2005 à 15:37:11    

yes, Ok! ben vais essayer ;)

Reply

Sujets relatifs:

Leave a Replay

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