[WiP PHP/CSS] 3 Mars: Problème de marge CSS

3 Mars: Problème de marge CSS [WiP PHP/CSS] - HTML/CSS - Programmation

Marsh Posté le 01-05-2005 à 22:59:36    

J'ai déjà crée plusieurs topic pour tel ou tel problème, alors je me décide à centraliser tout ce qui concerne la progression de mon portail php.
Le principe est double:
- Apprendre le php de façon productive et amusante.
- Avoir un portail php complet, simple, sur mesure.
 
Si cela interresse des gens (je poste en ayant aucune idée si j'vais me faire insulter ou si ca va interresser certains), téléchargez donc les sources, j'ai essayé de les commenter. Je serais ravis de recevoir vos remarques à n'importe quel niveau, ainsi que vos suggestions, critiques, insultes, chèques cadeau fnac, etc...
 
Au fur et a mesure de la progression, je mettrai à jour ce post, avec les derniers ajouts, les problèmes rencontrés, les idées, etc...
 
---
 
3 mars:
J'ai change totalement de voie ;)  
Je suis tombé amoureux du CSS, et j'ai laissé tombé les tableaux html !
Bien sur les fonctions et autres scripts php seront réutilisés, donc je ne repars pas de zero loin de la ! Mais je me concentre actuellement sur le CSS:
 
Voici ce que ca donne pour le moment:
http://neo3ouaf.free.fr/@PHP/blog_v0.01/
 
Je n'ai donc utilisé aucun cadre, mais des div, ce qui rend pareil (mieux ?) avec plus de simplicité, grace au positioning ! Les cadres se superposent, parfois avec de la transparence... C'est très simple, le code source est d'une légèreté déconcertante !!
 
Il est 5 heures du mat' alors j'vais m'coucher ;)
Avant cela je vous expose les problèmes:
J'ai qques soucis mineurs, mais surtout un que j'arrive pas du tout a résoudre: Que ce soit sous IE ou sour Firefox, je n'arrive pas a avoir de marge en bas, et du coups sous IE on ne peut pas voir les "tableaux" jusqu'en bas !  
J'ai essayé tous les attributs de marge dans le css, j'ai essayé d'ajouter des <br> au pied de la page, rien n'y fait ! J'ai l'impression que la position relative du cadre "administration" en bas, par rapport au cadre de fond lui meme en position absolute... ben ca fait un peu chier ^^
 
Qui peut m'aider ?
Voici les codes source:
 
Le fichier index:

Code :
  1. <link rel="stylesheet" type="text/css" href="style.css">
  2. <body>
  4. <div id="news-top">
  5. <div id="title"><center><h1>OUAFOUAF HOMEPAGE</h1></center></div><br><br>
  6. <div id="menu">menu</div>
  7. <div id="menu"><br>menu trick</div>
  10. <?php
  12. include('lib/extraction_des_articles.php');
  14. while( $contenu = mysql_fetch_array ($req))
  15. {
  17. include('lib/affichage_des_categories.php'); // Personnalisation des catégories
  19. $news = bbcode(tarea($contenu['news'])); // formatage et gestion BBCode du contenu de l'article
  20. $name = bbcode(tarea($contenu['name'])); // formatage et gestion BBCode du titre de l'article
  22. echo '<div id="news">';
  23. echo '<h1>'.$name.'</h1>';
  24. echo '<h1 class="subtitle">['.$cat.'] par '.$contenu['auteur'].' le '.date('d/m/Y à H\hi',$contenu['date']).'</h1><br><br>';
  25. echo $news;
  26. echo '<br><br><p class="droite">commentaires</p></div>';
  28. }
  30. mysql_close();
  32. ?>
  35. <div id="bottom"><center>administration</center></div>
  36. </div>


 
Le fichier CSS:

Code :
  1. body {
  2. background-color : #aaa;
  3. color : #964;
  4. font-family : Georgia, "Times New Roman", Times, serif;
  5. font-size : 8pt;
  6. margin-bottom: 150px;
  7. padding-bottom: 150px;
  8. }
  10. h1
  11. {
  12. font-family: Helvetica, "Times New Roman", Times, serif;
  13. font-size: 16pt;
  14. margin-bottom: 0px;
  15. margin-top:4px;
  16. margin-left:6px;
  17. }
  19. h1.subtitle
  20. {
  21. font-family: Helvetica, "Times New Roman", Times, serif;
  22. font-size: 9pt;
  23. margin-bottom: 0px;
  24. margin-top:0px;
  25. margin-left:6px;
  26. font-style: italic;
  27. font-weight: normal;
  28. }
  31. p.droite
  32. {
  33. text-align: right;
  34. color: black;
  35. margin: 0px;
  36. font-style: italic;
  37. font-size: 9pt;
  38. }
  40. #news-top {
  41. width: 600;
  42. position: absolute;
  43. left: 45;
  44. top: 50;
  45. background-color: #964;
  46. color: #631;
  47. padding: 3px;
  48. border: 1px solid #000;
  49. z-index:0;
  50. }
  52. #news {
  53. width: 560;
  54. position: relative;
  55. left: -40;
  56. top: 10;
  57. background-color: #bbb;
  58. border: 1px solid #840;
  59. padding: 10px;
  60. margin: 5px;
  61. z-index:1;
  62. }
  64. #title {
  65. width: 500;
  66. height: 35;
  67. position: absolute;
  68. left: 50;
  69. top: -40;
  70. background-color: #bbb;
  71. border: 1px solid #840;
  72. padding: 10px;
  73. margin: 5px;
  74. z-index:2;
  75. }
  77. #menu {
  78. width: 150;
  79. height: 800;
  80. position: absolute;
  81. left: 580;
  82. top: 40;
  83. background-color: #bbb;
  84. border: 1px solid #840;
  85. padding: 10px;
  86. margin: 5px;
  87. filter:alpha(opacity=50);
  88.    -moz-opacity:0.5;
  89.    opacity: 0.5;
  90. }
  92. #menu_trick  {
  93. width: 150;
  94. height: 800;
  95. position: absolute;
  96. left: 630;
  97. top: 110;
  98. background-color: #bbb;
  99. border: 1px solid #840;
  100. padding: 10px;
  101. margin: 5px;
  102. }
  104. #bottom {
  105. width: 500;
  106. position: relative;
  107. left: 30;
  108. top: 25;
  109. background-color: #bbb;
  110. border: 1px solid #840;
  111. padding: 5px;
  112. margin: 5px;
  113. }


Message édité par gnarky le 03-05-2005 à 15:23:33
Reply

Marsh Posté le 01-05-2005 à 22:59:36   

Reply

Marsh Posté le 01-05-2005 à 23:03:52    

En tous cas, c'est vrai que ça manque de topics "WIP" comme ils ont sur graph

Reply

Marsh Posté le 01-05-2005 à 23:05:50    

ah vi WIP j'me rappelais pu de la balise usuelle de ce genre de thread ^^

Reply

Marsh Posté le 03-05-2005 à 05:10:21    

UP ! j'ai mis a jour le premier post, j'éspère que vous pourrez m'aider !
Au fait bien sur tout ce que vous voyez sur le site n'est qu'une ébauche, ne faites pas attention aux petits défauts, ni a l'aspect inachevé ;)


Message édité par gnarky le 03-05-2005 à 05:11:55
Reply

Marsh Posté le 03-05-2005 à 15:50:02    

ptit up [:undertaker666]


Message édité par gnarky le 03-05-2005 à 15:50:33
Reply

Sujets relatifs:

Leave a Replay

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