Fixer un menu (probleme en fonction de la resolution)

Fixer un menu (probleme en fonction de la resolution) - HTML/CSS - Programmation

Marsh Posté le 27-03-2005 à 18:05:17    

Salut a tous  :hello:  
 
Je realise un site, grace a l'aide de forumeurs je suis parvenu a faire des menus deroulants  :jap:  
 
Le probleme est que ceux ci bougent en fonction de la resolution de l'ecran de l'usilisateur  :cry:  
 
Chez moi, en 1280*1024 :
 
http://xp6theboss.free.fr/Forums/probderoulant.JPG
 
chez moi, en 1280*1024 sous firefox  :heink:  
 
http://xp6theboss.free.fr/Forums/probderoulant3.JPG
 
Chez un pote, en 1024*768
 
http://xp6theboss.free.fr/Forums/probderoulant2.JPG
 
L'url : http://jacques.genevieve.free.fr/Patrimoine/index2.htm
 
Le code (du menu):
 

Citation :


 
<div id="menu">
 <dl>    
 
  <dt onmouseover="javascript:montre('smenu1');""><a href="exposer.html"><img src="Images/Boutons/Exposer.gif" width="150" height="40" border="0"></a></dt>
   
   
   
  <dd id="smenu1">
   <ul>
    <li><a href="Deroulants/ar500fra.exe">Dossier exposants </a></li>
    <li><a href="#">Liste fournisseurs </a></li>
     
   </ul>
 
   </dd>
 </dl>
   <dl>  
  <dt onmouseover="javascript:montre('smenu2');"><a href="visiter.html"><img src="Images/Boutons/Visiter.gif" width="150" height="40" border="0"></a></dt>
   <dd id="smenu2">
    <ul>
     <li><a href="#">Liste exposants</a></li>
     <li><a href="#">Guide pratique</a></li>
     <li><a href="#">Plan salon</a></li>
     </ul>
   </dd>
 </dl>
 
 <dl>  
  <dt onmouseover="javascript:montre('smenu3');""><a href="presse.html"><img src="Images/Boutons/Presse.gif" width="150" height="40" border="0"></a></dt>
   <dd id="smenu3">
 
    <ul>
     <li><a href="#">Communiqués</a></li>
     <li><a href="#">Photos</a></li>
     
    </ul>
   </dd>
 </dl>
  <dl>  
  <dt onmouseover="javascript:montre('smenu4');""><a href="programme.html"><img src="Images/Boutons/Programme.gif" width="150" height="40" border="0"></a></dt>
   <dd id="smenu4">
    <ul>
     <li><a href="#">Ateliers</a></li>
     <li><a href="#">Conférences</a></li>
     <li><a href="#">Remise de prix</a></li>
    </ul>
   </dd>
 </dl>
 <dl>  
  <dt onmouseover="javascript:montre('smenu5');"><a href="Th&#233;me.html"><img src="Images/Boutons/Theme.gif" width="150" height="40" border="0"></a></a></dt>
   <dd id="smenu5">
    <ul>
     <li><a href="#">thém</a></li>
     <li><a href="#">Sous-Menu 5.2</a></li>
     <li><a href="#">Sous-Menu 5.3</a></li>
    </ul>
   </dd>
 </dl>
 <dl>  
  <dt onmouseover="javascript:montre('smenu6');"" onmouseout="javascript:montre('');"><a href="newsletter.html"><img src="Images/Boutons/Newsletter.gif" width="150" height="40" border="0"></a></dt>
   
   
 </dl>
 <p>&nbsp;</p>
</div>


 
Note : Quand je suis sous dreamviewer je peu deplacer le menu a volonté avec la souris
 
Voila merci d'avance à tous  :jap:


Message édité par XPaY le 27-03-2005 à 18:05:33
Reply

Marsh Posté le 27-03-2005 à 18:05:17   

Reply

Marsh Posté le 27-03-2005 à 22:03:06    

up svp

Reply

Marsh Posté le 27-03-2005 à 22:21:44    

A tout hasard, je te dirai de virer  
 

Code :
  1. position: absolute;
  2. top: 162px;
  3. left: 160px;

dans le css pour le #menu et à la place de mettre :  
 

Code :
  1. margin : 0 auto 0 auto;


 
Normalement, avec un peu de chance, ça centrera tout ce qui sera à l'intérieur du <div id="menu">... </div>
 

Reply

Marsh Posté le 27-03-2005 à 23:50:28    

Ca me le colle tout en haut a gauche quand je fais ca :(
 
Une autre idée?

Reply

Marsh Posté le 28-03-2005 à 00:36:56    

Salut,  
dans ton code le width="150", a la place de 150 tu mets 100%. Partout où tu trouvera width="150"

Reply

Marsh Posté le 28-03-2005 à 00:42:43    

petite modifs : je me suis planté désolé (il est 00h40 je fatigue :-D). Les 150 javé pa vu que s'était pour chaque boutons. Alors tu créer un tableau invisible où tu mettera tout tes boutons dedans, puis le tableau dont la source est ici : <table border="0" width="100%" cellspacing="0" cellpadding="1">
Tu constate que le width est à 100%. Quand tu aura créé ton tableau le code sera pas exactement pareil, le width sera une valeur comme 1280 par exemple, donc tu mets 100% à la place.

Reply

Marsh Posté le 28-03-2005 à 00:48:53    

Tien regarde avant de mettre un tableau, c'est le code HTML de ton site :  
 
<!--  
/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
 margin: 0;
 padding: 0;
 background: white;
 font: 80% verdana, arial, sans-serif;
 background-color: #990000;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
 position: absolute;
 top: 162px;
 left: 160px;
 z-index:100;
 width: 950px; Mets 100 %
 height: 28px;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;

Reply

Marsh Posté le 28-03-2005 à 12:08:23    

Quand je met a 100% ca me fait pareil :-/
 
Ya pas moyen de le mettre dans un tableau?  
 
Ou alors un autre menu deroulant moin chiant (mais pas trop compliqué pour le debutant que je suis) ?

Reply

Marsh Posté le 28-03-2005 à 13:39:00    

XPaY a écrit :

Ca me le colle tout en haut a gauche quand je fais ca :(
 
Une autre idée?


 
 
SI ça le colle tout en haut, tu règles la marge en haut,  
 
au lieu de margin : 0 auto 0 auto, tu mets margin 50px auto 0 auto  
 
Essaye 50, regarde où ça te le met et règles toi même la valeur :)

Reply

Marsh Posté le 28-03-2005 à 14:17:36    

http://jacques.genevieve.free.fr/Patrimoine/index2.htm
 
Je deprime là :S
 
Vous auriez pas un lien pour en faire des plus simple?
 

Reply

Marsh Posté le 28-03-2005 à 14:17:36   

Reply

Marsh Posté le 28-03-2005 à 16:04:14    

up svp :(

Reply

Marsh Posté le 28-03-2005 à 17:49:48    

up  :cry:   :sweat:   :(

Reply

Marsh Posté le 28-03-2005 à 19:13:45    

le meilleur moyen c'est de mettre tout ca dan un tableau avec marge =0 pour ne pas le voir. Une fois que ton tableau est fait tu peut régler la disposition de son intérieur (tes menus quoi) et le mettre en centrage par rapport à la feuille. Tu peut également ajouter des cellues ... Le tableau est la solution

Reply

Marsh Posté le 28-03-2005 à 19:18:50    

Voilà un tableau invisible, tu mets tout ce code entre les balises Body. Et tu mets tes menus où c'est demandé :  
 
<table border="0" width="100%" cellspacing="0" cellpadding="1">
 <!-- MSTableType="layout" -->
 <tr>
  <td valign="top" colspan="2" height="67">
  <!-- MSCellType="ContentHead" -->
  TOUT TES MENUS ICI</td>
 </tr>
 
 
Normalement ca sera ok
 
 :hello:

Reply

Sujets relatifs:

Leave a Replay

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