1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

Menu deroulant Javascript placé en fonction de la fenetre d'ordinateur

Résolu
maripaun2003
Messages postés
24
Date d'inscription
vendredi 30 mai 2008
Statut
Membre
Dernière intervention
1 mai 2010
 - 9 juin 2008 à 14:38
maripaun2003
Messages postés
24
Date d'inscription
vendredi 30 mai 2008
Statut
Membre
Dernière intervention
1 mai 2010
 - 11 juin 2008 à 13:35
Bonjour,
Je suis débutante en java script. pour mon site personnel j'ai crée un menu déroulant avec le java script. Il marche enfin mais le problème c'est qu'il se déplace en fonction de la taille de la fenêtre ouverte. J'ai essayé de résoudre le problème mais je n'ai pas réussi.
Merci d'avance pour votre aide.
Voila le nom de mon site: www.alina-creations.com
Mon code source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type='text/javascript'>
function afficher(nom){
//alert(nom);
document.getElementById(nom).style.display="block";


}
function supprimer(nom){
//alert(nom);
document.getElementById(nom).style.display="none";
}

</script>

<style type="text/css">


#menu{
position :absolute;
z-index:10;
left:560px;
top:126px;

}
.onglet{
postion:relative;
float:left;

}
#accueil{
display:none;
background:#FFFFFF;
width:65px;



}
#publicité{
display:none;
background:#FFFFFF;
width:90px;

}
#art{
display:none;
background:#FFFFFF;
width:61px;


}
#cv{
display:none;
background:#FFFFFF;
width:31px;


}

#contact{
display:none;
background:#FFFFFF;
width:66px;


}

#menuv{
position :absolute;
z-index:10;
left:410px;
top:300px;
width:106px;

}
.ongletv{
postion:relative;
float:left;

}

#publicitév{
display:none;
background:#FFFFFF;
width:106px;

}
#artv{
display:none;
background:#FFFFFF;
width:61px;
}

#cvv{
display:none;
background:#FFFFFF;
width:31px;


}

#contactv{
display:none;
background:#FFFFFF;
width:66px;

</style></head>







[index.html ]








[pubspage.php?page=0
]
[airaffiches.php?page=7
]















[peinturepage2.php?page=0
]
[dessinpage.php?page=14
]
[tapisseriepage.php?page=0
]






[cvpage.html





]















[pubspage.php?page=0 ]

[airaffiches.php?page=7
]














[peinturepage2.php?page=0
]
[dessinpage.php?page=14
]
[tapisseriepage.php?page=0
]






[cvpage.html





]






,

----

<table width="750" border="0" cellspacing="0" cellpadding="0">
----, </td>
,
,
,
,

,

</td>
</tr>
<tr>
<td>,

<table width="122" border="0" cellspacing="0" cellpadding="0">
----, </td>

----

,

----

,

----







</td>
<td width="291">








</td>
</tr>
</table></td>
</tr>
</table>



</html>
A voir également:

9 réponses

Réponse 1 / 9
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 18
10 juin 2008 à 00:48
<table bgcolor= "#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">

----,

Je pense que la solution sera de lier la page
HTML et le menu

</td>

</td>
</tr>
</tbody>
</table>je
le pense aussi...

Un ébauche de ce que pourrait être ta page revue et
corigée...

1 / Les fonctions se réduisent à cela
<script type ="text/javascript">

function afficher(nom){

  document.getElementById(nom).style.display= "block";
}
function
supprimer(nom){
  document.getElementById(nom).style.display="none";
}

</script>

2 / dans la partie style il faut
ajouter
<style
type ="text/css">
#D_MAIN { /* concerne le DIV
general */
  position : absolute;
  width : 750px;
  left
: 50%; /* centre le DIV a l'ecran */
  margin-left : -375px; /* c'est la moitie de la
largeur du DIV */
  border : 1px solid #c0c0c0;
}
img {

 display : block; /* pour eviter le blanc entre les
images */
}
</style>

3/ la partie
BODYdevient...



  

  

  ...METTRE LE CONTENU du DIV MENU ICI...
  


  

    
  


  

    

  

  

    
  




</html>

Un conseil
pour finir, supprimes les caractères accentués des ID des DIV.

Il te
restes à observer les différents styles pour bien comprendre leurs influences
sur le positionnement.
;O)
3
Réponse 2 / 9
cs_ov3rdoze
Messages postés
414
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
23 septembre 2014
9 juin 2008 à 14:59
Salut

Tu as déjà posté ce message il me semble...
0
Réponse 3 / 9
maripaun2003
Messages postés
24
Date d'inscription
vendredi 30 mai 2008
Statut
Membre
Dernière intervention
1 mai 2010
9 juin 2008 à 15:08
Au debut le menu ne marchais pas avec l'internet explorer. avec votre ai j'ai reussi le faire marcher.
Aujourd'hui j'ai realisé que il se deplace n'import ou sur la page.
Merci si vous pouvez m'aider a nouveau
0
Réponse 4 / 9
cs_ov3rdoze
Messages postés
414
Date d'inscription
lundi 19 juillet 2004
Statut
Membre
Dernière intervention
23 septembre 2014
9 juin 2008 à 15:10
Je t'avoue que j'ai pas tout compris...
Ca marche pas? Ca marche mais tu veux que ça fasse autre chose en plus?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 9
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 18
9 juin 2008 à 17:48
Bonjour,
essaies avec cette déclaration de
style...
#menu{
  position
: absolute;
  z-index : 10;
  top : 126px;
  width : 350px;

  left : 50%;
  margin-left : 20px;
}
explication !!!!:

width : 350px;
fixe la
largeur, impératif pour avoir un rendu propre...

left : 50%;
force ton DIV en milieu de page, le
centre en fait...

margin-left
: 20px;
opére le décalage que tu souhaites, le décentrage...

De
la sorte si tu agrandis la page le bandeau suivra...

nota : Si tu
retrécis la page le bandeau suivra aussi et si la page est moins large que la
document le décalage sera inverse.
Fais des essais en jouant avec la valeur
de margin-left, essais avec -100px par exemple et
100px, tu devrais voir le comportement
;O)
0
Réponse 6 / 9
maripaun2003
Messages postés
24
Date d'inscription
vendredi 30 mai 2008
Statut
Membre
Dernière intervention
1 mai 2010
9 juin 2008 à 20:11
Merci pour ton reponse.


J'ai esseyé ta solution mais ça ne change pas grand chose. Quand je retrecis la page mon menu part à gauche. Il s'aligne en function de la fenetre.
J'arrive pas à voir ou la probleme est?
0
Réponse 7 / 9
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 18
9 juin 2008 à 21:44
<table bgcolor="#e6effe" border="0" cellpadding="5" cellspacing="0" width="100%">

----,

Quand je retrecis la page mon menu part à
gauche

</td>

</td>
</tr>
</tbody>
</table>Cette
situation est normale, comme je te le signale plus haut...
J'en conclu donc
que ce n'est pas cela ton soucis...

Il semblerait que le mieux serait de revoir la conception de la mise en page et de la faire avec des DIV par exemple.
;O)
0
Réponse 8 / 9
maripaun2003
Messages postés
24
Date d'inscription
vendredi 30 mai 2008
Statut
Membre
Dernière intervention
1 mai 2010
9 juin 2008 à 21:57
Je pense que la solution sera de lier la page HTML et le menu, mais je sais pas si c'est possible, n'y comment me prendre.


J'ai applique aussi :
document.getElementById("menu").style.left = ((screen.availWidth - 750) / 2 + 395) + "px";
dans ma function java script.
Maintenant le menu il se deplace plus gauche mais à droite.

voir:
<script type='text/javascript'>


function afficher(nom){
//alert(nom);
document.getElementById(nom).style.display="block";
}
function supprimer(nom){
//alert(nom);
document.getElementById(nom).style.display="none";
document.getElementById("menu").style.left = ((screen.availWidth - 750) / 2 + 395) + "px";
document.getElementById("menuv").style.left = ((screen.availWidth - 750) / 2 + 264) + "px";
}
</script>
0
Réponse 9 / 9
maripaun2003
Messages postés
24
Date d'inscription
vendredi 30 mai 2008
Statut
Membre
Dernière intervention
1 mai 2010
11 juin 2008 à 13:35
Merci beaucoup,
Ca marche, c'est super!!!
0