Positionnement de div et flash

Mais si tu mets ton menu en position relative dans un <div id="menu" > lui-meme dans le div de ton entete, le fond de ton entete devrait se retrouver en arriere plan et donc l'image de ton menu se retrouver en premier plan, non ? et du coup tu positionne ton menu ancré à ton entete, et donc il ne bougera pas.

Le problème du menu c'est que l'ont vois une image de 249x66 alors que le menu fait 300x500, donc si je fais comme tu dis, j'vais avoir un gros "trou", non ?

ah wai, je vois ce que tu veux dire... d'ou le absolute... en fait, la référence de ton objet mis en absolute dépend de où tu mets ton div dans ton code. je m'explique: si tu mets ton div de menu DANS ton div d'entete, la position de ton menu sera fonction de celle de ton entete. donc si tu lui mets un top: 100px et un left: 0px il se positionnera à 100px du haut de ton entete et à 0px du bord gauche de ton entete. la référence est le coin supérieur gauche du div conteneur du div de ton objet. J'espere m'etre bien fait comprendre... ce sont des poupées russes: le div du menu est dans (et est positionné par rapport à) le div de l'entete.

<div id="entete">

    <div id="menu">

    </div>

</div>

Ok, je vais essayer.

Sinon j'avais trouvé cette solution un peu usine à gaz

J'ai utiliser code pour trouve la position d'un objet (ici l'image dans l'entête)

function findPos(obj)

			{

				var curleft = curtop = 0;

				if (obj.offsetParent) {

					curleft = obj.offsetLeft

					curtop = obj.offsetTop

					while (obj = obj.offsetParent) {

						curleft += obj.offsetLeft

						curtop += obj.offsetTop

					}

				}

				return [curleft,curtop];

			}

Ensuite j'ai fait une fonction que j'appelle tout les 100ms pour repositionner

function menu_pos()

			{

				var x = document.getElementById("menu");

				var y = document.getElementsByName("img_menu");

				x.style.visibility = "visible";

				coords = findPos(y[0]);

				x.style.left = coords[0]-60 + "px";

				x.style.top = coords[1]-40 + "px";

				setTimeout("menu_pos()",100);

			}

Ca marche impéc mais c'est le gros bordel quand même.
J'vais donc immédiatement tester ta solution.
Merci.

Voilà. Ta méthode fonctionne très bien jusqu'à se que je tente de déplacer mon div "menu". dès que je met une valeur à top ou left ça me le replace par rapport à la page entière....

et si tu remplaces le top et left par margin ?
au lieu de par ex:

top: 100px;

left: 50px

tu utilises:

top: 0;

left: 0;

margin: 100px 0 0 50px;

??

OUAAIIIIIIIIISSSSSSSSSSSS
T'es un chef !
Merci !
Ca marche impéc, enfin sous Opera et FF. Par contre sous IE, le positionnement est bon mais ça merde pour le flash. J'vais mettre ça en ligne pour que regarde.

http://www.guides-courchevel-meribel.com/main_eng.php

Regarde, sous FF et Opera c'est impéc.
Sous IE, c'est décalé.

sous IE6 le menu se déroule normalement, et les liens sont actifs. en revanche, la main s'active meme en dehors du menu, comme si ta boite était trop grande...
wai, décalé de 1 ou 2 px...

Oui le menu c'est ok.
Oui la boite est plus grande car il faut des "boutons" invisibles pour faire refermer le menu.
Comment je peux faire pour éviter se décalage ideux ?

je regarde ton code css et tu pourrais le simplifier sérieusement:
remplace:

margin-top: 0;

margin-right: 0;

margin-bottom: 0;

margin-left: 0;

par

margin: 0 0 0 0;

dans l'ordre: top right bottom left
puis meme par:

margin: 0;

Ensuite, idem pour border:

border: 0px solid #036;

Et mieux, vas te mettre à jour sur le site du zéro: www.siteduzero.com quitte à tout reprendre à zéro

pour le décalage, je sais pas... si tes boutons sont invisibles, ils n'ont peut etre pas besoin d'etre affichés, et donc ils peuvent etre derriere la boite? réduis ta boite et vois ce que ca donne en mettant un padding négatif pour le haut.
Enfin moi je te donne des pistes, faut que tu essaies, bidouille. je suis pas professionnel, juste un amateur qui commence à connaitre quelques bases en css/html. y'en a qui sont plus confirmés que moi sur le sujet. J'ai beaucoup appris en faisant des essais, par logique.

J'essai, j'essai...
c'est tjrs sur IE que ça chie. Y a tjrs un décalage.
si j'avais à caler sous IE, c'est sous Opera et FF et ça chie...

A priori j'ai trouvé.

<div style="height:66px;width:248px;">

   <div id="menu" style="position:absolute;margin: -40px 0 0 -60px;">

J'ai figé le premier div à la taille de l'image pour forcer Internet Explorer à la laisser à cette taille.

Bon j'ai pas tout lu, mais faire du flash pour un menu aussi basique, c'est un peu comme tuer une mouche au bazooka.

Une simple liste à puce avec un peu de css suffira amplement à faire un menu identique à l'acutel, et tu n'auras pas besoin de la lourdeur de chargement de flash.

Ensuite vu, tes questions, je suppose que tu ne connais pas le css. Absolute positionne en pixel par rapport à l'angle supérieur gauche. Donc c'est normal le décalage en fonction de la résolution, si tu centres ton site sur la page.

Tu veux pas apprendre le css correctement avant de faire un truc imbuvable ?

Et au passage la mise en page par frame et tableau c'est mort en même temps que le 20e siècle.

Va faire un tour sur le site du zero, apprends le xhtml et le css, et quand tu sauras ce que tu fais, tu reviendras si le problème existe encore ; ce qui m'étonnerais.

Bon courage  

;jap:

Non, ça ne marche pas, IE n'est pas tout seul... Pense à ceux qui utilisent un autre navigateur... Et de margin négatifs, c'est pas tolérable, c'est du bidouillage d'approximation...

Peut être mais ça marche sur IE, FF et Opera.

J'ai fait en flash pour apprendre le flash.

Y a pas de Frame dans mon html.
S'il te plaise pas mes tableaux ne va pas les voir.

Heureusement que certain garde un ton sympathique. Merci encore dartyduck.

Excuse moi si tu l'as mal pris, mais un site doit être pensé pour l'utilisateur, et non pour se faire plaisir... Falsh + tableau + mauvais entête, c'est pas gagné pour les moteurs de recherche, et tu fais pateauger les navigateurs entre fausses info et plugins à charger pour trois fois rien, sans compter la lourdeur de la mise en page par tableau.

Mais si ça te plait, ne change surtout pas, tu risquerais d'apprendre des choses...

C'est surtout que c'est une graphiste qui m'a fait le design sous Fireworks/Dreamweaver. J'allait donc pas reprendre tout le code...

Alors, pour reprendre tout ça, Marsien a raison sur tout:
+1 pour les tableaux.
+1 pour le menu en flash. J'ai même pas relevé qu'un simple menu déroulant en css serait beaucoup plus léger et plus maniable pour ta mise en page.
+1 pour les bases de css, mais ça je te l'ai déjà dit, non ?
Et OUI, tu vas devoir reprendre tout le code. On ne fait pas un site sans savoir ce que l'on fait. Je t'ai dit d'aller sur le site du zéro www.siteduzero.com pour apprendre comment on code le css.
Moi, ce qui m'étonne, c'est qu'un débutant fasse un site commercial à grand public.
Désolé Marsien, je suis passé à coté des bases...

Bon alors, rien que pour toi, je me suis fait chier à faire ca: http://chanke.free.fr/plom juste pour te prouver que c'est largement faisable de faire un menu dynamique autrement qu'en flash et c'est beaucoup plus léger. Imagine le mec qui veut pas iactiver les javascript ou les plugins flash sur son pc parce qu'il est parano: ben il peut pas naviguer sur ton site, ce serait dommage, non ?
Mais surtout ne pompe pas ce que j'ai fait, c'est tout cradingue et pas fignolé, fait en quelques minutes seulement. Mais c'est juste un exemple de ce que tu pourras faire une fois que tu auras suivi les cours du site du zéro.

c'est plutot parce que ça bouffe des ressources ! combien de PDA ou de smart phone ont du javascript/flash ? (si oui : de combien de minute l'autonomie est t'elle réduite ?)

C'est exactement ça l'idée menu en hmtl/css.   En tout cas dartyduck, bravo, tu progresses bien et dans le bon sens  

Après il est facilement fignolable pour remettre les effets du menu flash.

+1 avec Batchy pour les pda/smartphone, mais aussi pour ceux toujours plus nombreux qui utilisent des bloqueurs de scripts ou de flash (adblock ou noscript par ex...)

Et on ne parle même pas des p'tits malins qui font des choses-machins en Flash en haute qualité par défaut avec tout plein de keyframe toutes les millisecondes et toutes ces sortes de choses qui font que mon pauvre XP2400+ rame à donf' juste pour exécuter l'anim (la nouvelle mouture du site de Maliki, par exemple) !! Parfois il y a des gars qui ont l'éclair de lucidité de mettre un bouton "stop" au bas de leur anim, mais c'est très rare ! Comme le bouton pour couper la zique qu'ils ont associée à leur Flash....

De plus, Flash n'est pas indexable par les moteurs de recherche, pas plus que le JavaScript.. Donc un gros mauvais point pour ton site..

Le CSS a justement été développé pour permettre des mises en page évoluée et évolutives, en liaison avec l'XHTML dont le principe de base est de séparer strictement les règles de mise en page de la structure du contenu, principe récupéré sur le langage XML puisque l'XHTML n'est autre que du HTML traité à la sauce XML..

Autre chose : Flash ne permet pas le multi-langue directement.. Ton menu demande soit deux versions de ton Flash (ta version anglaise n'est pas traduite, ou si peu !), soit de passer par JS et ActionScript avec les mêmes restrictions sur l'usage de JS..


J'ajoute ma petite contribution à propos de ton site et elle ne va pas te plaire (c'est aussi un peu comme ça qu'on apprend  ) : le HTML 4.01 Frameset c'est de la prog à grand-papa, seuls des comiques l'utilisent encore simplement parce qu'ils ont des portions de code toutes faites et qu'ils ne veulent pas prendre 5 minutes pour les mettre à jour, la majorité des gens un peu sérieux ont au moins adopté l'XHTML 1.0 Transitional comme base de développement ! Le HTML 4 (et qui plus est les frameset) est abandonné depuis un paquet d'années, met-toi à jour de ce côté là : les frames posent des problèmes d'indexation des pages par les moteurs de recherche (pages indexées hors du jeu de cadre, donc orphelines).. Pour info, l'XHTML 1.0 est officiellement né en 2000 (date de sa première recommandation finale), sa déclinaison 1.1 date de 2001.. Le 2.0 est en cours de développement..

Idem pour les mises en page par l'usage de <table> : c'est lourd et pas maniable.. Avec des <div> génériques et du CSS, on fait aussi bien, même mieux et en bien plus léger.. En utilisant la prog de grand-père, tu penses être compatible avec quels navigateurs ? IE 4 pour Windows, IE 4 & 5 pour Mac, Netscape Navigator / Communicator ? Ils sont tous abandonnés et ne représentent qu'à peine 0.5% des navigateurs encore utilisés. Tous les navigateurs récents et même IE 5.x / 6.0 pour Windows savent exploiter le CSS.. Tu fais de l'XHTML 1.0 Strict en type mime "text/html" et tu passes partout !

Et j'adore la page de contact qui ne fonctionne pas avec FF et Opera (probablement idem avec Konqueror et Safari) ! On est autorisé à cliquer pour avoir des infos ou c'est réservé à ceusses qui passent par IE ? D'ailleurs, le site "tombe en panne" dès qu'on désactive JavaScript : plus de Flash, plus de navigation : c'est une erreur grossière.. J'espère que SM2i ne t'a pas facturé sa réalisation trop cher, elle ne lui a certainement rien couté..


dartyduck a proposé la version "de base" du menu déroulant full-XHTML/CSS dont tu ne peux que t'inspirer car elle est amplement suffisante pour le peu que tu demandes à ton déroulant.. A toi de l'embellir avec des couleurs et une ou deux images adaptées à ton site..


A l'autre "bout", je te propose un exemple de menu finalisé 100% graphique avec déroulant à un seul étage, mais avec effets de survol sur chaque bouton et un petit ergot de localisation "escamotable" pour les pages des rubriques qui se trouvent dans le sous-menu déroulant : page présentant le petit ergot de localisation (modification récente de l'agencement des rubriques dans une maquette qui ne l'est pas et que je ne voulais pas refaire tout de suite ; maquette faite avec Photoshop et ImageReady, l'équivalent de Fireworks) >> http://www.nicolasullern.net/albums_photos/villes.. J'ai fait ce menu de la même façon que tous ici : en reprenant les exemples donnés par les uns et les autres autant que ceux décrits sur AlsaCréations, OpenWeb, le Site du zér0 et quelques autres (vois le topic unique pinné en gras et en tête de liste ici même)..

Mon menu fonctionne avec tous les navigateurs dignes de ce nom, mais aussi avec les anciennes versions d'IE (5.x et 6.0) : pour eux qui ne connaissaient pas les règles de survol CSS autrement qu'avec les liens <a>, je passe par un JavaScript et une classe additionnelle ajoutée "à la volée" (tuto dans le topic unique pinné).. Et si JS est désactivé sur ces navigateurs, le menu reste 100% fonctionnel et n'empêche aucunement la navigation : des pages "de transition" sont en place, accessibles par tout le monde et dans tous les cas de figure.. IE 7, heureusement, est bien plus "conforme" aux recommandations W3C en matière de CSS et n'a pas besoin d'une bidouille JS..


Et je ne suis pas un pro du développement Web, je ne fais pas commerce de mes quelques compétences en XHTML / CSS.. Seulement j'ai accepté d'apprendre un outil bien utile (XHTML / CSS et PHP / MySQL), même si certaines choses sont assez obscures à celles et ceux qui n'ont pas l'esprit très orienté prog (et qu'elles resteront obscures pour moi).. Et je suis entièrement d'accord que rien ne se fait en un claquement de doigt : tous ici nous pouvons le certifier.. Il faut juste prendre le temps de faire, peu importe ce temps passé  ..

 

Petite rectif: le menu que j'ai proposé n'est effectivement pas applicable avec IE<7, j'ai omis cette précision.
Au temps pour moi.

En même temps, je crois qu'on va être un bon nombre à désormais "oublier" IE 6 et précédents  ........ Mais c'est clair qu'il va nous falloir être encore un peu vigilents de ce côté là, nombreux sont encore les postes Win2k et même encore des Win98/Me sur lesquels on ne peut pas installer IE 7 (je sens que ce temps là va être encore un peu long ; espérons que non  )..