Positionnement de div et flash

P

plom

Nouveau membre
Bonjour.

J'ai ajouté un menu en flash sur ce site
Vous devez être connecté pour voir les liens.

J'ai placé l'objet flash dans un <div> que j'ai placé en position absolute afin que ça fasse passer mon menu par dessus la page HTML ainsi j'ai ma transparence.
Le problème est que je ne parviens pas à régler correctement la position. Si vous redimensionné la page, si vous etes dans une autre résolution, le menu se déplace, ça ne colle pas.
Si qqun peux m'aider à le faire.
Merci d'avance !
 
dartyduck

dartyduck

Grand Meuble Suprême
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.
 
P

plom

Nouveau membre
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 ?
 
dartyduck

dartyduck

Grand Meuble Suprême
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.
[cpp]
<div id="entete">
<div id="menu">
</div>
</div>
[/cpp]
 
P

plom

Nouveau membre
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)

[cpp]
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];
}
[/cpp]

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

[cpp]
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);
}
[/cpp]

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

plom

Nouveau membre
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....
 
dartyduck

dartyduck

Grand Meuble Suprême
et si tu remplaces le top et left par margin ?
au lieu de par ex:
[cpp]top: 100px;
left: 50px[/cpp]
tu utilises:
[cpp]top: 0;
left: 0;
margin: 100px 0 0 50px;[/cpp]
??
 
P

plom

Nouveau membre
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.
 
dartyduck

dartyduck

Grand Meuble Suprême
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...
 
P

plom

Nouveau membre
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 ?
 
dartyduck

dartyduck

Grand Meuble Suprême
je regarde ton code css et tu pourrais le simplifier sérieusement:
remplace:
[cpp]margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;[/cpp]
par
[cpp]margin: 0 0 0 0;[/cpp]
dans l'ordre: top right bottom left
puis meme par:
[cpp]margin: 0;[/cpp]
Ensuite, idem pour border:
[cpp]border: 0px solid #036;[/cpp]
Et mieux, vas te mettre à jour sur le site du zéro:
Vous devez être connecté pour voir les liens.
quitte à tout reprendre à zéro
 
dartyduck

dartyduck

Grand Meuble Suprême

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.
 
P

plom

Nouveau membre
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...
 
P

plom

Nouveau membre
A priori j'ai trouvé.

[cpp]
<div style="height:66px;width:248px;">
<div id="menu" style="position:absolute;margin: -40px 0 0 -60px;">
[/cpp]

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

marsien

Grand Maître
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:
 
marsien

marsien

Grand Maître

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...
 
P

plom

Nouveau membre
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.
 
marsien

marsien

Grand Maître
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...
 
P

plom

Nouveau membre
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...
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Dernières actus
Derniers messages publiés
Statistiques globales
Discussions
730 131
Messages
6 717 939
Membres
1 586 382
Dernier membre
alejandrooo
Partager cette page
Haut