Résolu Espace différent entre les DIV selon navigateur

Solutions (5)
Tags :
  • Sites Internet
  • Firefox
  • Programmation
|
Bonjour,

je suis tombé sur des topics qui parlent de mon problème, mais pas exactement.

Mon problème concerne le site web que je suis en train de créer. Pour l'instant il consiste en deux div l'un sous l'autre. Le premier sert de bandeau, l'autre de zone de contenu. Je compte y ajouter un troisième en dessous.

Je le crée avec Firefox (je suis sur Mac). L'alignement et l'espacement horizontal entre les div sont parfaits avec Firefox, mais sous Safari, l'espace horizontal est plus large.

J'ai remarqué que l'espace change si on affiche la barre d'état ou non, le nombre de barre d'outils du navigateur...etc.

Comment faire pour qu'il y ait toujours le même espacement entre les div quel que soit le navigateur?

Merci.

EDIT: voici le code de la page ( le bandeau est vide pour l'instant et la zone de contenu contient une image )

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title>Mon site internet</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  7. <STYLE type=text/css>
  8. #bandeau
  9. {
  10. position:absolute;
  11. left: 50%;
  12. top: 0%;
  13. width: 850px;
  14. height: 150px;
  15. border: 1px solid #000;
  16. margin-top: 5px;
  17. margin-left: -425px; /* moitié de la largeur */
  18. }
  19. #global
  20. {
  21. position:absolute;
  22. left: 50%;
  23. top: 45%;
  24. width: 850px;
  25. height: 400px;
  26. margin-top: -200px; /* moitié de la hauteur */
  27. margin-left: -425px; /* moitié de la largeur */
  28. border: 1px solid #000;
  29. }
  30. </STYLE>
  31. </head>
  32.  
  33. <body>
  34. <div id="bandeau"></div>
  35. <div id="global"><img src="../images/image_accueil2.jpg"></div>
  36. </body>
  37. </html>
Contenus similaires
Meilleure solution
partage
, Modérateur |
Je n'avais pas regardé ton code CSS...
Mais en effet, avec des marges négatives dans tous les sens, tu vas avoir beaucoup de mal à avoir un aperçu identique sur les différents navigateurs ! Pourquoi as tu besoin de t'em*erder avec des marges négatives ?

Si tu veux centrer horizontalement ta div, tu mets un margin: 0 auto; et elle est centrée, pas besoin de faire des left:50% et d'enlever des marges.
  • Commenter cette solution |
Score
0
òh
òi
|
Meilleure réponse sélectionnée par matix68.
  • Commenter cette réponse |
Score
0
òh
òi
|
Yesss!! Merci beaucoup, ça marche impeccable! Pour les marges négatives, j'avais lu cette méthode je sais plus où, mais c'est pas super pratique apparemment...
  • Commenter cette réponse |
Score
0
òh
òi
|
Hmm...merci de l'aide, mais ça ne marche pas...si je décide de ne pas afficher la barre d'état, le 2ème div descend d'une dizaine de pixels (environ) et un espace se créé entre les deux div...c'est énervant!!!
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Salut,

Afin de réinitialiser les marges et padding qui sont toujours différents entre chaque navigateurs, je te conseille de toujours ajouter ce bout de code CSS afin de réinistializer les valeurs, et avoir plus de chances d'avoir un aperçu identiques.
Il y a des réinitialisateurs beaucoup plus compliqués que celui là, mais celui là fait déjà pas mal :
  1. * {
  2. padding: 0;
  3. margin: 0;
  4. }
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS