CSS compatible Mozilla

CSS compatible Mozilla - HTML/CSS - Programmation

Marsh Posté le 22-08-2008 à 22:49:46    

Salut à tous,  
j'ai un soucis avec mon #main avec Mozilla.
En effet, celui-ci n'a que la hauteur de mon titre et le reste qui est dans deux autres div (boutons et boutons_droite et uniquement sur cette page) est complètement dans le vide.
Comment puis-je faire pour que ces 2 div prennent leur place dans le div main avec Mozilla?  
Dois-je rajouter qqch dans les #boutons?
Merci!!!!

Code :
  1. <div id="container">
  2.   <div id="header"><? include("../header_membres.php" ) ?></div>
  3.   <div id="main">
  4.    <p align="center" class="titres"><strong>Espace Administration</strong></p>
  5.    <div id="boutons">
  6. <p align="left" class="pave_main"><input name="Bouton" type="button" style="height:52px; width:200px; font-weight: bold; color: #2B2F70; margin-top:10px; margin-bottom:5px;" value="Gestion des Membres" onclick="location.href='gestion_membres.php?id=<? echo "$id"; ?>'"></p>
  7. <p align="left" class="pave_main"><input name="Bouton" type="button" style="height:52px; width:200px; font-weight: bold; color: #2B2F70; margin-top:10px; margin-bottom:5px;" value="Gestion des Acc&egrave;s" onclick="location.href='gestion_acces.php?id=<? echo "$id"; ?>'"></p>
  8. <p align="left" class="pave_main"><input name="Bouton" type="button" style="height:52px; width:200px; font-weight: bold; color: #2B2F70; margin-top:10px; margin-bottom:5px;" value="Gestion des Pr&eacute;sences" onclick="location.href='gestion_presences.php?id=<? echo "$id"; ?>'"></p>
  9. <p align="left" class="pave_main"><input name="Bouton" type="button" style="height:52px; width:200px; font-weight: bold; color: #2B2F70; margin-top:10px; margin-bottom:5px;" value="Gestion de l'Agenda" onclick="location.href='gestion_agenda.php?id=<? echo "$id"; ?>'"></p>
  10. <p align="left" class="pave_main"><input name="Bouton" type="button" style="height:52px; width:200px; font-weight: bold; color: #2B2F70; margin-top:10px; margin-bottom:5px;" value="Gestion des News" onclick="location.href='gestion_news.php?id=<? echo "$id"; ?>'"></p>
  11.    </div>
  12.    <div id="droite_boutons" class="pave_main" align="center"><br><br><br><br><strong>Bienvenue dans l'Espace Administration. <br>
  13.    </strong><br>
  14.    <br>Choisissez dans le menu de gauche la partie pour laquelle vous voulez travailler.
  15.    </div>
  16.   </div> 
  17.   <div id="bas" align="center"><p class="pave_bas"><? include ("../bas.txt" ) ?></p></div>
  18. </div>


Code :
  1. #container {
  2. position: relative;
  3. width: 995px;
  4. text-align: left;
  5. background:   url(http://www.self-defense-hrj-namur.be/images/fond2.jpg) repeat-y ;
  6. margin:auto;
  7. }
  8. #header {
  9. width: 995px;
  10. height: 225px;
  11. color: #D1D9EC;
  12. background:   url(http://www.self-defense-hrj-namur.be/images/fond_haut.jpg) top center no-repeat;
  13. }
  14. #haut {
  15. width: 995px;
  16. height: 177px;
  17. }
  18. .pave{
  19. margin-top: 154px;
  20. text-align: right;
  21. margin-right: 45px;
  22. color: #2B2F70;
  23. }
  25. #menu {
  26. text-align: center;
  27. color: #FFFFFF;
  28. padding-top: 20px;
  29. padding-bottom: 6px;
  30. font-size: 12px;
  31. }
  32. #main {
  33. width: 932px;
  34. margin-left: 26px;
  35. background-image:url(images/fond.jpg);
  36. }
  37. .pave_main{
  38. color: #2B2F70;
  39. margin:10px
  40. }
  43. .titres{
  44. color: #2B2F70;
  45. font-size:26px;
  46. font-family:"Times New Roman", Times, serif;
  47. font-style: italic;
  48. font-weight: bold;
  49. margin:20px 0px 30px 10px
  50. }
  52. #bas {
  53. width: 995px;
  54. height: 40px;
  55. background:   url(http://www.self-defense-hrj-namur.be/images/bas.jpg) center no-repeat;
  56. }
  57. .pave_bas{
  58. padding-top:10px;
  59. color: #FFFFFF;
  60. }
  62. #boutons {
  63. width:210px;
  64. float:left;
  66. }
  67. #droite_boutons {
  68. width:690px;
  69. float:right;
  70. }


 

Reply

Marsh Posté le 22-08-2008 à 22:49:46   

Reply

Marsh Posté le 22-08-2008 à 23:32:51    

Les floats par défaut n'augmentent pas la taille du parent, ils en sortent. Vois l'exemple dans la recommandation CSS 2.1 :

 

http://hfr-rehost.net/www.w3.org/TR/CSS21/images/float2p.png

 

Le rectangle gris, en float, "sort" du premier paragraphe pour aller dans le deuxième. Là c'est pareil, boutons et bouton_droite sortent de #main.

 

Mais on peut faire en sortr que le main les englobe tout de même, genre en mettant dessus un overflow hidden :

Code :
  1. #main {
  2.   ...
  3.   overflow: hidden;
  4. }


Message édité par FlorentG le 22-08-2008 à 23:39:56
Reply

Marsh Posté le 23-08-2008 à 09:33:21    

et juste parce que c est horrible cette soupe ou tu melanges des styles inlines les <br> et les align, j ai fait un peu de menage... y a probablement encore du travail mais j ai essayé d eviter de modifier la structure de ton site
 

Code :
  1. #container {position: relative;width: 995px;text-align: left;background:   url(http://www.self-defense-hrj-namur.be/images/fond2.jpg) repeat-y ;margin:auto;}
  2. #header {width: 995px;height: 225px;color: #D1D9EC;background:   url(http://www.self-defense-hrj-namur. [...] d_haut.jpg) top center no-repeat;}
  3. #haut {width: 995px;height: 177px;}
  4. .pave{margin-top: 154px;text-align: right;margin-right: 45px;color: #2B2F70;}
  5. #menu {text-align: center;color: #FFFFFF;padding-top: 20px;padding-bottom: 6px;font-size: 12px;}
  6. #main {width: 932px;margin-left: 26px;background-image:url(images/fond.jpg);}
  7. #boutons button, .pave_main{color: #2B2F70;margin:10px}
  8. h2 {color: #2B2F70;font: italic bold 26px "Times New Roman", Times, serif;margin:20px 0px 30px 10px;text-align:center;}
  9. h3 {font-size:16px;margin:80px 0 40px;}
  10. #bas {width: 995px;height: 40px;background:   url(http://www.self-defense-hrj-namur.be/images/bas.jpg) center no-repeat;text-align:center;}
  11. .pave_bas {padding-top:10px;color: #FFFFFF;}
  12. #boutons {width:210px;float:left;}
  13. #boutons button {height:52px; width:200px; font-weight: bold; color: #2B2F70; margin-top:10px; margin-bottom:5px;}
  14. #droite_boutons {width:690px;float:right;text-align:center;}


 

Code :
  1. <div id="container"> 
  2.     <div id="header"><? include("../header_membres.php" ) ?></div>  
  3.     <div id="main"> 
  4.         <h2>Espace Administration</h2> 
  5.         <div id="boutons"> 
  6.             <button onclick="location.href='gestion_membres.php?id=<? echo "$id"; ?>'">Gestion des Membres</button> 
  7.             <button onclick="location.href='gestion_acces.php?id=<? echo "$id"; ?>'">Gestion des Acc&egrave;s</button> 
  8.             <button onclick="location.href='gestion_presences.php?id=<? echo "$id"; ?>'">Gestion des Pr&eacute;sences</button> 
  9.             <button onclick="location.href='gestion_agenda.php?id=<? echo "$id"; ?>'">Gestion de l'Agenda</button> 
  10.             <button onclick="location.href='gestion_news.php?id=<? echo "$id"; ?>'">Gestion des News</button> 
  11.         </div> 
  12.         <div id="droite_boutons" class="pave_main"> 
  13.             <h3>Bienvenue dans l'Espace Administration.</h3> 
  14.             <p>Choisissez dans le menu de gauche la partie pour laquelle vous voulez travailler.</p> 
  15.         </div> 
  16.     </div>    
  17.     <div id="bas"><p class="pave_bas"><? include ("../bas.txt" ) ?></p></div> 
  18. </div>


les input s utilisent dans un form
c est pas negociable et c est l interet de button


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Sujets relatifs:

Leave a Replay

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