Se connecter avec
S'enregistrer | Connectez-vous

Problème de mise en page sur Firefox

Dernière réponse : dans Programmation

Bonjour tout le monde!
Voilà je commence en programmation web et j'ai commencé un petit site perso mais j'ai vite été arrêté par des problèmes d'affichage sur en les naviguateurs IE et Firefox, l'affichage ne donne pas le même. Voilà un aperçu du début de mon site. Juste avec ce début j'ose même pas imaginer le résultat du site final.
http://img113.imageshack.us/my.php?image=diffrence2vl.j...


Et voici mon code:


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
    

  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" lang="fr">
    

  3. <head>
    

  4. <title>...</title>
    

  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    

  6. <style type="text/css">
    

  7.  
  8. html, body 
    

  9. {
    

  10. 	margin:0;
    

  11. 	width:100%;
    

  12. }
    

  13. .conteneur 
    

  14. {
    

  15.   	width:800px;
    

  16.   	border:2px black solid;
    

  17.   	height:900px;
    

  18.       margin:auto;
    

  19. }
    

  20.  
  21.  
  22. #menu
    

  23. {
    

  24.  
  25. 	margin-top:-44px;
    

  26. 	margin-left:40px;
    

  27. }
    

  28.  
  29.  
  30. li.menu_top 
    

  31. {
    

  32. 	position:relative;
    

  33. 	display:inline;
    

  34. 	width:90px;
    

  35. 	float:left;
    

  36. 	border-right:1px solid white;
    

  37. 	line-height:20px;
    

  38. }
    

  39.  
  40.  
  41. .menu_top a 
    

  42. {
    

  43. 	font-family:arial;
    

  44. 	color:white;
    

  45. 	font-weight:bold;
    

  46. 	font-size:8pt;
    

  47. 	text-decoration:none;
    

  48. 	text-align:center;
    

  49. 	border:0px red dashed;
    

  50. 	display:block;
    

  51. }
    

  52.  
  53.  
  54. .left
    

  55. {
    

  56. 	position:relative;
    

  57. 	display:inline;
    

  58. 	width:90px;
    

  59. 	float:left;
    

  60. 	border-left:1px solid white;
    

  61. 	line-height:20px;
    

  62. }
    

  63.  
  64. .on
    

  65. {
    

  66.     background-color:#003399;
    

  67. }
    

  68. </style>
    

  69. </head>
    

  70.  
  71. <body>
    

  72.  
  73. <div class="conteneur">
    

  74.    	<div id="img1"><img src=bannière.jpg /></div>
    

  75. 	   <div id="img2"><img src=menu.jpg width=800 height=30 /></div>	
    

  76.  
  77. 	<div id="menu">	
    

  78. 		<ul >
    

  79. 			<li class='menu_top left on'><a href="#">Lien</a></li>
    

  80. 			<li class='menu_top'><a href="#">Lien</a></li>
    

  81. 			<li class='menu_top'><a href="#">Lien</a></li>
    

  82. 			<li class='menu_top'><a href="#">Lien</a></li>
    

  83. 			<li class='menu_top'><a href="#">Lien</a></li>
    

  84. 			<li class='menu_top'><a href="#">Lien</a></li>
    

  85. 			<li class='menu_top'><a href="#">Lien</a></li>
    

  86.  		</ul>
    

  87. 	</div>
    

  88.  
  89. </div>
    

  90. </body>
    

  91. </html>



J'espère que vous pouvez m'aidez et me donner des conseils ou des extraits de code pour m'aider! merci d'avance!

Autres pages sur : probleme mise page firefox

Lassé par la pub ? Créez un compte

C'est quoi ces marges ??
  1. #menu
    

  2. {
    

  3.     margin-top:-44px;
    

  4.     margin-left:40px;
    

  5. }


Pour éviter ce genre de pb, il te suffit de mettre tes blocs conteneurs "à la suite", en utilisant :
  1. position: relative;
    

  2. margin: 0px auto; // "auto" pour le centrage latéral


Sinon, furette bien le topic pinné dans la tête de liste : tu auras des tas de liens très intéressants ;) ..

:jap: 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet