France Hardware : Forums de discussion - Découvrez notre nouveau comparateur d'offres Internet
Retrouvez les prix près de chez vous :  
Index du forum | Liste des membres | Liste des groupes | Inscription | F-A-Q | Recherche
Pseudo :    Password :     
29 521 membres enregistrés - 2 069 420 posts - 122 057 topics
Index des forums FH  | Index des forums DegroupNews
      Programmation
           Langages Web
                Problème de décalage et de compatibilité
111 connectés(record : 2799 le 29 May 2016 - 15 h 34)

Vous devez vous connecter pour répondre au topic.
Problème de décalage et de compatibilité

quaresma


Messages : 613
Inscrit le 22/05/04
Ville : Grenoble
Non connecté
  Posté le 23 October 2010 - 21 h 44 m 04 s
Bonjour à toutes et tous,

j'ai fait un menu en html/css.

Cependant, je ne sais pas pourquoi, le menu est décalé du haut de la cellule.

Pour plus de compréhension, voici mes codes :

CSS

    Code     
 1. #menu{
 2. 	width:150px;
 3. }
 4. .menu, .sousmenu{
 5. 	text-align: right;
 6. }
 7. .menu{
 8. 	height:18px;
 9. 	width:150px;
10. 	color:#fff;
11. 	padding-bottom: 10px;
12. 	top:auto;
13. 	font-family:arial,sans-serif;
14. 	font-size:12px;
15. 	text-decoration:none;
16. }
17. .sousmenu{
18. 	height:14px;
19. 	width:170px;
20. 	padding: 0px;
21. 	color:#ffffff;
22. 	text-align: right;
23. }
24. .menu a{
25. 	display:block;
26. 	width:100%;
27. 	height:100%;
28. 	color:#fff;
29. 	font-family:arial,sans-serif;
30. 	font-size:12px;
31. 	text-decoration:none;
32. }
33. .sousmenu a{
34. 	display:block;
35. 	width:100%;
36. 	height:100%;
37. 	color:#666666;
38. 	font-family:Garamond;
39. 	font-size:18px;
40. 	text-decoration:none;
41. }
42. .sousmenu a:hover, .sousmenu a:active, .sousmenu a:focus{
43. 	color:#ffffff;
44. }
HTML
    Code     
 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2. <html xmlns="http://www.w3.org/1999/xhtml">
 3. <head>
 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5. <meta name="robots" content="index, follow" />
 6. <meta name="keywords" content=" "/>
 7. <meta name="description" content=" "/>
 8. <title></title>
 9.      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
10. 	 <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
11. 	 <script type="text/javascript" src="js/copie_functions.js"></script>
12. <style type="text/css">
13. <!--
14. body {
15. 	margin-top: 0px;
16. }
17. -->
18. 
19. </style></head>
20. <body bgcolor="#333333">
21. <table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">
22. <tr>
23. <td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>
24. </tr>
25. <tr>
26. <td width="183" valign="top"><div id="menu">
27. &#65279;<div class="menu" id="menu1" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
28. <div id="sousmenu1" style="display:none"><br>
29. <div class="sousmenu"><a href="#">th&eacute;&acirc;tre</a></div><br>
30. <div class="sousmenu"><a href="#">enfance et jeunesse</a></div><br>
31. <div class="sousmenu"><a href="#">po&eacute;sie</a></div><br>
32. 
33. <div class="sousmenu"><a href="#">traduction</a></div><br>
34. <div class="sousmenu"><a href="#">in&eacute;dits</a></div><br>
35. <div class="sousmenu"><a href="#">autres publications</a></div><br>
36. </div>
37. <div class="menu" id="menu2" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
38. <div id="sousmenu2" style="display:none"><br>
39. <div class="sousmenu"><a href="#">saison 2010-2011</a></div><br>
40. <div class="sousmenu"><a href="#">saison 2009-2010</a></div><br>
41. <div class="sousmenu"><a href="#">archives</a></div><br>
42. </div>
43. 
44. <div class="menu" id="menu3" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
45. <div id="sousmenu3" style="display:none"><br>
46. <div class="sousmenu"><a href="#">lacoop</a></div><br>
47. <div class="sousmenu"><a href="#">projets pour la sc&egrave;ne</a></div><br>
48. <div class="sousmenu"><a href="#">enseignement/Ateliers</a></div><br>
49. <div class="sousmenu"><a href="#">radio</a></div><br>
50. </div>
51. <div class="menu" id="menu4" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
52. <div id="sousmenu4" style="display:none"><br>
53. <div class="sousmenu"><a href="#">&agrave; l'affiche</a></div><br>
54. 
55. <div class="sousmenu"><a href="#">nouvelle publication</a></div><br>
56. <div class="sousmenu"><a href="#">impromptus</a></div><br>
57. </div>
58. <div class="menu" id="menu5" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" /></a></div><br>
59. <div id="sousmenu5" style="display:none"><br>
60. <div class="sousmenu"><a href="#">presse</a></div><br>
61. <div class="sousmenu"><a href="#">liens</a></div><br>
62. <div class="sousmenu"><a href="#">contact</a></div><br>
63. </div>
64. </div></td>
65. <td width="800" valign="top" style="width: 665px; background: #fff;">contenu</td>
66. 
67. <td width="17" style="background: #000;">&nbsp;</td>
68. </tr>
69. </table>
70. 
71. </body>
72. </html>
Javascript
    Code     
 1. function afficheMenu(obj){
 2. 	
 3. 	var idMenu     = obj.id;
 4. 	var idSousMenu = 'sous' + idMenu;
 5. 	var sousMenu   = document.getElementById(idSousMenu);
 6. 	
 7. 	/*****************************************************/
 8. 	/**	on cache tous les sous-menus pour n'afficher    **/
 9. 	/** que celui dont le menu correspondant est cliqué **/
10. 	/** où 4 correspond au nombre de sous-menus         **/
11. 	/*****************************************************/
12. 	for(var i = 1; i <= 5; i++){
13. 		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
14. 			document.getElementById('sousmenu' + i).style.display = "none";
15. 		}
16. 	}
17. 	
18. 	if(sousMenu){
19. 		//alert(sousMenu.style.display);
20. 		if(sousMenu.style.display == "block"){
21. 			sousMenu.style.display = "none";
22. 		}
23. 		else{
24. 			sousMenu.style.display = "block";
25. 		}
26. 	}
27. 	
28. }


Pour voir le résultat : http://www.la-grange-sardieres.fr/site%20Fab/presentation2.php#

Sous IE il y a également un problème, lorsque je clique sur un menu pour le dérouler, on attend un clique et l'image est entourée.

Pourriez-vous m'aider s'il vous plait ?

Merci beaucoup et bonne soirée




quaresma


Messages : 613
Inscrit le 22/05/04
Ville : Grenoble
Non connecté
  Posté le 24 October 2010 - 13 h 56 m 34 s
Il est appelé en externe, là je l'ai mis comme cela pour vous montrer le contenu de style.css




quaresma


Messages : 613
Inscrit le 22/05/04
Ville : Grenoble
Non connecté
  Posté le 25 October 2010 - 13 h 46 m 45 s
OK voici ce que ça donne sans tableaux : http://www.la-grange-sardieres.fr/site%20Fab/presentation2css.php#

La marge est toujours présente :(




quaresma


Messages : 613
Inscrit le 22/05/04
Ville : Grenoble
Non connecté
  Posté le 26 October 2010 - 11 h 47 m 43 s


Le 26 octobre 2010 - 10 h 18, grabber a écrit :
margin / padding sur les conteneurs


J'ai essayé avec firebug de mettre

margin: 0;
padding: 0;

sur les conteneurs mais cela ne change rien.




quaresma


Messages : 613
Inscrit le 22/05/04
Ville : Grenoble
Non connecté
  Posté le 26 October 2010 - 23 h 19 m 36 s
Toujours ce fameux décalage :(




quaresma


Messages : 613
Inscrit le 22/05/04
Ville : Grenoble
Non connecté
  Posté le 29 October 2010 - 21 h 45 m 13 s
Le décalage n'est plus présent.

J'ai supprimé les tableaux et j'ai tout réalisé avec des div+css.

Merci et bonne soirée




Page genérée en 0.2562 secondes par RahForum 2.0 | Gzip off |  Stats |  Metaforums |  RSS
© 2004 Cerbere Systems.
Prix Matériel Informatique | Informatique Lyon | Informatique Grenoble | Informatique Annecy | Informatique Marseille | Informatique Bordeaux | Forum Informatique
ADSL | Actualité ADSL | Deligo | Appareil photo | Commande Au Volant
Creative Commons
Message Boards and Forums Directory