Placer un calque precisement a cote d'une image, quelque soit la resol

Placer un calque precisement a cote d'une image, quelque soit la resol - HTML/CSS - Programmation

Marsh Posté le 11-10-2002 à 18:01:33    

Parce que je veux faire un menu masquable
Donc je voudrais le placer precisement a cote du bouton "menu"
Le prob : des qu'on redimensionne la fenetre ou autre, bah il est plus au bon endroit...
 
Donc bah, il doit bien y avoir une fonction en javascript pour faire ca ;)
Et je vous la demande a present :p

Reply

Marsh Posté le 11-10-2002 à 18:01:33   

Reply

Marsh Posté le 11-10-2002 à 18:23:34    

Avec le positionnement relatif.
 
<img ...>
<div id="menu">...</div>
 
div#menu {
  position: relative;
  top: -40px;
  left: 50px; /*par exemple*/
}
 
Tu utilises les propriétés top, left, right et bottom pour déplacer le <div> par rapport à la position qu'il aurait eu s'il n'avait pas été déplacé.


Message édité par gm_superstar le 11-10-2002 à 18:23:47
Reply

Marsh Posté le 11-10-2002 à 18:39:35    

bah... apparement il prend pas en compte ce que je lui precise niveau position
et pire... il n'apparait pas PAR DESSUS le reste de la page, donc comme son code est mis au niveau d'un tableau, bah le tableau s'en trouve "deforme"

Reply

Marsh Posté le 11-10-2002 à 18:41:57    

Montre le code ou le site.

Reply

Marsh Posté le 11-10-2002 à 18:44:37    

Dans l'en tete de ma page :
 

Code :
  1. div#menulayer {
  2. position: relative;
  3. top: -50px;
  4. visibility: hidden;
  5. }
  6. <script type="text/javascript">
  7. visible=0
  8. function affmenu()
  9. {
  10.   if (visible==0)
  11.   {
  12.     visible=1
  13.     menubouton.src="inploy.png"
  14.     menulayer.style.visibility="visible"
  15.   }
  16.   else
  17.   {
  18.     visible=0
  19.     menubouton.src="deploy.png"
  20.     menulayer.style.visibility="hidden"
  21.   }
  22. }
  23. </script>


 
Au niveau du corps :
 

Code :
  1. <img id="menubouton" src="deploy.png" onclick="affmenu()"  width="62" height="18" align="right" >
  2. <div id="menulayer">
  3.   Test 1<br>
  4.   Test 2<br>
  5.   Test 3
  6. </div>


 
bah euh... vala, le calque est place bizarrement, et les valeurs que je mets pour top ou left ne changent rien :'(

Reply

Marsh Posté le 11-10-2002 à 19:11:24    

Déjà, vire le align="right" dans l'image, ça ne se fait plus. Utilise plutôt :
 

img#menubouton {
  float: right;
}


 
Ensuite tu vas faire pareil pour ton menu :

img#menubouton {
  float: right;
}


 
Ca devrait plaque le <div> à gauche de l'image. Si sa position ne te plait pas tu pourras ensuite le déplacer avec position: relative; et top, left...
 
Et un dernier truc, si tu veux que ton site passe aussi avec Mozilla, utilise getElementById() pour accéder aux objets du document :

bouton = document.getElementById("menubouton" );
menu = document.getElementById("menulayer" );
 
...
 
bouton.src = "inploy.png";
menu.style.visibility = "visible";
 
...


Message édité par gm_superstar le 11-10-2002 à 19:11:35
Reply

Marsh Posté le 12-10-2002 à 02:28:12    

Alors apres divers test
il semblerait qu'a partir du moment ou je passe le calque en "relative", tout merde... dans le sens ou il n'est pas en superposition sur le reste de la page
en absolu c nikel MAIS c pas ce que je veux, vu que si on bouge la fenetre, tout merde
 
 
heeeeeeelp :cry:

Reply

Marsh Posté le 12-10-2002 à 10:27:26    

Tu peux mettre ta page en ligne ? parce que là tu n'apporte aucune information supplémentaire...

Reply

Sujets relatifs:

Leave a Replay

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