La Communauté Webmaster  forum rss


  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax
(Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Problème de création de menu avec CSS
« Précédent Suivant »
Pages: [1] Descendre
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
  Auteur  Sujet: Problème de création de menu avec CSS  (Lu 863 fois)
Problème de création de menu avec CSS
« sur: le 06-04-2006 a 02:36:24 »
Meje
Membre récent
*

Hors-Ligne

Messages: 27



geek powa

Voir le Profil    WWW
Répondre avec citation

Bonjour à tous.

J'ai créé deux version d'un menu pour mon site (Html pour le contenu et CSS pour mise en forme).

La première est une image-map qui reste fixe (un menu fixe) et centrée grâce au CSS.

La seconde est un menu utilisant du javascript pour donner un effet plus dynamique. Ce menu a été réalisé avec Imageready. Il est aligné à gauche.

Je voudrais évidemment réaliser un mixe des deux menus pour obtenir un menu fixe et centré qui possède un effet dynamique.

Malheureusement, question codage, c'est assez casse-tête.

Pour la première version, je crée un codage dans la CSS et un référent dans l'HTML entre des balises. Et c'est tout !

Pour la seconde version, c'est un javascript placé dans la CSS, l'activation dans la balise body et les images scriptées proprement dites avec les "onmouseover", etc. dans l'Html.

Vous voyez le topo.

A la perception, l'image de la première version est identique à celle de la deuxième version. Bien entendu, j'ai dû créer des tranches sous Photoshop puis des fonction d'activation au passage de la souris dans Imageready pour la seconde version ce qui signifie que j'ai en réalité une image dans la première version et plusieurs images dans la seconde.

Ca devient un casse tête au niveau du centrage avec CSS.
Plus question d'appliquer un div margin:0px auto pour centrer les images ni d'appliquer une balise pour le menu fixe pour la seconde version car à ce moment là, toutes les images en tranches sont superposées au centre les unes sur les autres.

Faire un décalage dans le code de la CSS au niveau des pixels sur la page dans le javascript n'est pas une solution car il faudrait que l'image soit centrée de la même manière dans n'importe quel navigateur (excepté Ie5 et versions antérieures) et à n'importe quelle résolution.

Aidez moi à résoudre ce casse-tête!

Merci

Rapporter au modérateur  

Re:Problème de création de menu avec CSS
« Répondre #1 sur: le 06-04-2006 a 12:41:01 »
Deny
Membre récent
*

Hors-Ligne

Sexe: Male
Messages: 7



Qui suis-je ?

Voir le Profil
Répondre avec citation

As-tu pensé à écrire une partie de ton css en javascript, avec des variables...
par exemple :
Code:
document.write("<style id='st0' type='text/css'>");
document.write("#menu {display:inline;position:absolute; top:0px; left:0px;padding:5px;background-color:#CFE6EE;width:"+largmenu+"px;border:3px solid darkblue;font-size:"+tcar0+"px;}");
document.write("</style>");

Egalement, je te mets ici un code pour positionner un élément en centre de page pour toute résolution.
Code:
   posX=Math.ceil((screen.availWidth - larg)/2);
   posY=Math.ceil((screen.availHeight - haut)/2);

Tu comprends je suppose. On peut mettre ensuite les posX et Y dans la CSS écrite en js pour une position en absolute.

Voilà , à plus

Rapporter au modérateur  

Rien ne sert de penser, il faut réfléchir avant.
Pierre Dac
Re:Problème de création de menu avec CSS
« Répondre #2 sur: le 06-04-2006 a 15:14:19 »
Meje
Membre récent
*

Hors-Ligne

Messages: 27



geek powa

Voir le Profil    WWW
Répondre avec citation

Je vais essayer immédiatement !

Merci!

Rapporter au modérateur  
Re:Problème de création de menu avec CSS
« Répondre #3 sur: le 06-04-2006 a 20:04:27 »
Meje
Membre récent
*

Hors-Ligne

Messages: 27



geek powa

Voir le Profil    WWW
Répondre avec citation

Bein, soit, j'ai pas bien effectué l'opération, soit, c'est pas vraiment ça car ça ne fonctionne pas.

Toute la mise en page en css est modifiée (fond noir et plus de cadres en div imbriqués) et pire, le menu (tranches) en javascript est complètement bouleversé car toutes les images-tranches sont alignées à gauche avec une certaine marge et l'une en dessus de l'autre. Quant à la page avec le menu fixe en css, c'est simple, le menu n'est plus fixe du tout.

Peut-on me donner un exemple concret d'application d'un menu fixe en css constitué de tranches(imageready), centré et rendu dynamique avec du javascript?

Merci! 

Rapporter au modérateur  
Re:Problème de création de menu avec CSS
« Répondre #4 sur: le 07-04-2006 a 10:00:27 »
Deny
Membre récent
*

Hors-Ligne

Sexe: Male
Messages: 7



Qui suis-je ?

Voir le Profil
Répondre avec citation

euh ! 
Il faudrait voir ta prog...
Si tu peux mettre tes div imbriquées.

Rapporter au modérateur  

Rien ne sert de penser, il faut réfléchir avant.
Pierre Dac
Re:Problème de création de menu avec CSS
« Répondre #5 sur: le 25-04-2006 a 15:02:31 »
Meje
Membre récent
*

Hors-Ligne

Messages: 27



geek powa

Voir le Profil    WWW
Répondre avec citation

Salut Deny! J'ai mis l'adresse de mon site dans mon profil.

Tu pourras constater, que j'ai mis du javascript pour la page de menu principal mais pas pour le menu pour chaque pages.

J'ai juste utilisé une image map fixe (avec css).

C'est un peu dommage que le procédé de menu fixe ne fonctionne pas sous internet explorer.

C'est pour cela que j'ai conseillé aux utilisateurs de mon site d'installer firefox.

En plus, firefox gère correctement les png (avec les effets de transparence).

Voilà !

Si tu as des remarques ou des conseils à m'apporter, je suis à l'écoute ! (façon de parler)

Rapporter au modérateur  
Répondre    Aviser des réponses    Envoyer le sujet    Imprimer
Pages: [1] Monter
« Précédent Suivant »
Sauter à: 

Votre statut : Invité
Vous devez être membre pour participer.
 
 
Let’s Encrypt : le certificat SSL gratuit
Tester votre site internet sur différents navigateurs
[WordPress] Des problèmes avec l’administration ?
Rappel : Mettez à jour vos CMS et vos sites E-commerce
Le .fr fête ses 25 années d’existence !
Mesurer votre audience en temps réel avec BubbleStat
Porter réclamation contre Google Panda ?
Zlio n’est plus …
 
 
 
 
 

Copyright (c) Devclic 2002 - 2026 - Tous droits réservés

creation site internet strasbourg