Je n'arrive pas a enlever une marge

Je n'arrive pas a enlever une marge - HTML/CSS - Programmation

Marsh Posté le 18-04-2008 à 11:17:33    

bonjour à tous,  
 
j'ai un petit problème, en effet je suis en train de faire un site et j'ai un problème dans ma mise en page.
 
voila mes codes :  
 
html

Code :
  1. <html>
  2. ...(tout ce qu'il faut y est)
  3. <body>
  4. ....
  5. </body>
  6. </html>


 
css

Code :
  1. html
  2. {
  3. width:100%;
  4. height:100%;
  5. background-color: #1E90FF; /* couleur de fond */
  6. }
  8. body
  9. {
  10. width: 75%;
  11. height:100%;
  12. margin-left: auto;
  13. margin-right: auto;
  14. margin-top:0;
  15. margin-bottom:0;
  16. background-color : white;
  17. }


 
et voila ce que ca me donne :  
 
(sous FF)
http://img384.imageshack.us/img384/2682/sanstitreub9.th.jpg
(sous IE)
http://img384.imageshack.us/img384/1824/sanstitrelf0.th.jpg
 
je voudrais donc savoir si il est possible de coller le cadre blanc en haut de la page sous firefox.
ce qui m'etonne le plus c'est que sous IE le cadre est collé comme je veux.
 
merci de vos réponses.

Reply

Marsh Posté le 18-04-2008 à 11:17:33   

Reply

Marsh Posté le 18-04-2008 à 11:49:44    

je peux voir ton code html plus complet?

Reply

Marsh Posté le 18-04-2008 à 11:52:47    

bien sur :  
 

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=iso-8859-1" />
  5. <!--[if IE]><!-->
  6. <link rel="stylesheet" media="screen" type="text/css" title="Design" href="styleie.css" />
  7. <!--<![endif]-->
  9. <!--[if !IE]><!-->
  10. <link rel="stylesheet" media="screen" type="text/css" title="Design" href="style.css" />
  11. <!--<![endif]-->
  13. <title>Bienvenue sur iSpé2m.fr</title>
  14. <script src="ajax.js" type="text/javascript"></script><!-- script qui permet de creer la variable "xhr", utilisée ensuite dans la fonction javascript -->
  15. <!-- fonction qui permet d'afficher le texte contenu dans un fichier texte et l'afficher dans l'espace prevu a cet effet, sans avoir a recharger toute la page -->
  16. <script language="JavaScript" type="text/javascript">
  18. function lireFichier(url)
  19. {
  20. var xhr=createXHR();
  22. xhr.open("GET", url ,true);<!-- requete qui lit dans le fichier voulu -->
  24. document.getElementById("corps" ).innerHTML="Started...";
  26. xhr.onreadystatechange=function()
  27. {
  28.  document.getElementById("corps" ).innerHTML="Wait server...";
  29.  if(xhr.readyState == 4)
  30.  {
  32.   document.getElementById("corps" ).innerHTML= xhr.responseText;<!-- afficher le contenu du fichier dans le div "corps" -->
  33.  }
  34. };
  36. xhr.send(null);
  37. }
  39. </script>
  40. </head>
  42. <body>
  44.       <div id="en_tete"><!-- header de la page -->
  45.   <ul id="banniere">
  46.             <li id="image"><a href="index.html"></a></li><!-- tout est dans le fichier css -->
  47.   </ul>
  48.       </div>
  49.        
  50. <div id="a_definir"><!-- fenetre a definir : horloge ou identification -->
  51. <table cols="1"><th>a definir :</th> </table>
  52. </div>
  55. <div id="menu"><!-- menu horizontal de la page -->
  56.  <ul id="menuDeroulant">
  57.     <li id="acceuil" >
  58.    <a href="#" onclick="submitForm('textes/test.TXT');"></a>
  59.    <ul class="sousMenu">
  60.     <li><a href="#">Raison d'être</a></li>
  61.    <li><a href="#">Notre Mission</a></li>
  62.    <li><a href="#">Les Produits Phares</a></li>
  63.    </ul>
  64.    </li>
  66.     <li id="activite">
  67.    <a href="#"></a>
  68.    <ul class="sousMenu">
  69.     <li><a href="#">Formations et Accompagnements</a></li>
  70.    <li><a href="#">Conseil et Assistance</a></li>
  71.    <li><a href="#">Séminaire</a></li>
  72.    </ul>
  73.    </li>
  75.    <li id="qui">
  76.    <a href="#"></a>
  77.    <ul class="sousMenu">
  78.     <li><a href="#">Historique</a></li>
  79.    <li><a href="#">Organisation de la société</a></li>
  80.     <li><a href="#">Les Valeurs d'iSpé2m</a></li>
  81.     <li><a href="#">Le Dirigeant</a></li>
  82.     <li><a href="#">Partenariat</a></li>
  83.    </ul>
  84.    </li>
  86.    <li id="contact">
  87.    <a href="#"></a>
  88.    <ul class="sousMenu">
  89.     <li><a href="#">Adresse</a></li>
  90.    <li><a href="#">Téléphone</a></li>
  91.    <li><a href="#">Mail</a></li>
  92.   </ul>
  93.   </li>
  94.  </ul>
  96.  </div>
  97.  
  98.  
  99.       <div id="menu2">
  100.    <ul id="menuVert">
  101.     <li id="case1">
  102.      <a href="#"></a></li>
  104.   <li id="case2">
  105.      <a href="#"></a></li>
  107.   <li id="case3">
  108.      <a href="#"></a></li>
  110.   <li id="case4">
  111.    <a href="#"></a></li>
  112.  </ul>
  113.       </div>
  114.  
  115.  
  116.     <div id="corps">
  118. <!-- combo css+fichiers textes appeles avec la fonction javascript -->
  119.     </div>
  120.  
  121.      
  122.       <div id="pied_de_page"> <!-- footer de la page -->
  123. <table border="0" cellpadding="10">
  124. <tr>
  125. <th><a href="#" onclick="lireFichier('textes/mentions.TXT');">Mentions legales</a></th>
  126. <th><a href="#">Plan du site</a></th>
  127. <th><a href="#">Envoyer un mail au dirigeant</a></th>
  128. </tr>
  130. </table>
  131.        
  132.  
  133.       </div>
  135. </body>
  136. </html>

Reply

Marsh Posté le 18-04-2008 à 12:16:58    

essayer de remplacer:
margin-top:0;  par  margin-top:auto;

Reply

Marsh Posté le 18-04-2008 à 12:33:21    

hélas çà ne change rien.

Reply

Marsh Posté le 18-04-2008 à 13:08:16    

alors je viens de trouver un truc :  
 
si dans margin-top je mets une valeur négative, cela fait remonter le cadre.
 
mais c'est assez moche et surtout pas adapté pour un design extensible.
 
enfin bon si ya pas possibilité d'avoir mieux.

Reply

Marsh Posté le 18-04-2008 à 15:17:39    

c bon g trouvé :  
 
voila mon nouveau css :  
 

Code :
  1. html
  2. {
  3. width:100%;
  4. height:100%;
  5. background-color: #1E90FF; /* couleur de fond */
  6. }
  8. body
  9. {
  10. width: 75%;
  11. height:inherit;
  12. /*permet de coller le cadre aux bords haut et bas du navigateur, et de la centrer sur la fenetre*/
  13. position:absolute;
  14. margin-left: 12.5%;
  15. margin-right: 12.5%;
  16. margin-top:0;
  17. margin-bottom:0;
  18. background-color : white;
  19. overflow:auto;
  20. }

Reply

Sujets relatifs:

Leave a Replay

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