Idée pour mise en place d'un menu horizontal..... - HTML/CSS - Programmation
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
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.
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
Marsh Posté le 03-01-2005 à 14:09:25
Tiens, voilà l'image en PNG (4.06 Ko) :
Après tu rajoute ton logo et le menu.
Marsh Posté le 03-01-2005 à 14:38:17
FlorentG a écrit : Tiens, voilà l'image en PNG (4.06 Ko) : |
Ca va être inutilisable, ca demande bien trop de précisiondans le placement du menu
Marsh Posté le 03-01-2005 à 14:38:56
Masklinn a écrit : |
ben nan
Marsh Posté le 03-01-2005 à 14:40:25
Masklinn a écrit : |
Je vois pas le problème
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?
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)
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 )
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 ...
Marsh Posté le 03-01-2005 à 15:09:14
Ben dans tous les cas une taille de police plus importante posera problème, alors...
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. ?"
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
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??
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...
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 :
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