css et pied de page

css et pied de page - HTML/CSS - Programmation

Marsh Posté le 06-10-2005 à 11:32:50    

bonjour tout le monde,
 
alors voilà j'ai ma page avec mes <div> et mon css mais j'ai un problème avec le bloc pied de page...
 
en fait il a l'air de se caler sur mon bloc "right" donc ca foire l'affichage
 
voici une petite photo de ce que ca donne
 
http://img386.imageshack.us/img386/4749/pied7pr.th.jpg
 
et voici le css
 

Code :
  1. body
  2. {
  3. width: 760px;
  4. margin: auto;
  5. margin-top: 20px;
  6. margin-bottom: 20px;
  7. background: #DED8D0;
  8. }
  10. a:link {
  11. font-family: Verdana, Arial, Helvetica, sans-serif;
  12. font-size: 10px;
  13. color: #FFFFFF;
  14. text-decoration: none;
  15. font-weight: bold;
  16. }
  17. a:visited {
  18. font-family: Verdana, Arial, Helvetica, sans-serif;
  19. font-size: 10px;
  20. color: #FFFFFF;
  21. text-decoration: none;
  22. font-weight: bold;
  23. }
  24. a:hover {
  25. font-family: Verdana, Arial, Helvetica, sans-serif;
  26. font-size: 10px;
  27. color: #DED8D0;
  28. text-decoration: none;
  29. font-weight: bold;
  30. text-transform: none;
  31. }
  32. a:active {
  33. font-family: Verdana, Arial, Helvetica, sans-serif;
  34. font-size: 10px;
  35. color: #DED8D0;
  36. text-decoration: none;
  37. font-weight: bold;
  38. }
  39. ul {
  40. list-style-image: url("./images/bouquet.gif" );
  41. }
  42. a img
  43. {
  44. border: none;
  45. }
  46. .titre {
  47. font:24px Trebuchet MS;
  48. }
  50. /* L'en-tête */
  52. #top
  53. {
  54. width: 758px;
  55. height: 219px;
  56. margin-bottom: 0px;
  57. background: #cec398;
  58. border: 1px solid black;
  59. }
  62. /* Le menu */
  64. #menu
  65. {
  66. float: left;
  67. width: 120px;
  68. }
  70. .element_menu
  71. {
  72. background-color: #cec398;
  73. border: 1px solid black;
  74. margin-bottom: 10px;
  75. }
  77. /* Le corps de la page */
  79. #right
  80. {
  81. margin-left: 140px;
  82. margin-bottom: 20px;
  83. padding: 5px;
  84. color: black;
  85. background: #cec398;
  86. border: 1px solid black;
  87. }
  89. /* Le pied de page */
  91. #bas
  92. {
  93. padding: 5px;
  94. text-align: center;
  95. color: black;
  96. background: #cec398;
  97. border: 1px solid black;
  98. }


 
et le code html
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
  4. <head>
  5. <title>test</title>
  6. <link href="test.css" rel="stylesheet" type="text/css"></link>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. </head>
  10. <body>
  12. <div id="top">
  13.  test
  14. </div>
  16. <div id="menu">
  17.  <div class="element_menu">
  18.  <ul>
  19.  <li><a href="accueil.php">Accueil</a></li>
  20.  <li><a href="presentation.php">Présentation</a></li>
  21.  <li><a href="news.php">Nouveauté</a></li>
  22.  <li><a href="salle.php">La Salle</a></li>
  23.  <li><a href="galerie.php">Galeries</a></li>
  24.  <li><a href="contact.php">Contact</a></li>
  25.  <li><a href="livre.php">Livre d'or</a></li>
  26.  </ul>
  27.  </div>
  29.  <div class="element_menu">
  30.  <li><a href="accueil.php">Accueil</a></li>
  31.  <li><a href="presentation.php">Présentation</a></li>
  32.  <li><a href="news.php">Nouveauté</a></li>
  33.  <li><a href="salle.php">La Salle</a></li>
  34.  <li><a href="galerie.php">Galeries</a></li>
  35.  <li><a href="contact.php">Contact</a></li>
  36.  <li><a href="livre.php">Livre d'or</a></li>
  37.  </div>
  38. </div>
  40. <div id="right">
  41.  <fieldset />
  42.  <legend>Accueil</legend>
  43.  <table>
  44.               <tr>
  45.  <td><p>Voilà le site.</p>
  46.               <p>il faut que le bloc se cale sur mon 2eme menu...</p>
  47.               <p>mais je sais pas pourquoi ca fait ca.</p>
  48.  </td>
  49.             <td><div align="right"><img src="images/presentation.jpg" width="147" height="150"></div></td>
  50.    </tr>
  51.  </table>
  52. <br>
  53. <br>
  54.  </fieldset />
  55. </div>
  57. <div id="bas">test
  58.       </div>
  60. </body>
  62. </html>


 
si quelqu'un a une idée
 
merci d'avance


Message édité par bigbebel le 06-10-2005 à 11:37:30
Reply

Marsh Posté le 06-10-2005 à 11:32:50   

Reply

Marsh Posté le 06-10-2005 à 11:35:22    

Et la page html, elle dit quoi?

Reply

Marsh Posté le 06-10-2005 à 11:57:56    

Un clear both sur le pied de page...

Reply

Marsh Posté le 06-10-2005 à 11:58:18    

clear:both dans #bas ?
 
Edit : grilled by Florentgai :p


Message édité par plainsofpain le 06-10-2005 à 11:58:59

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 06-10-2005 à 12:09:51    

merci beaucoup !!

Reply

Marsh Posté le 06-10-2005 à 12:40:08    

hey hooooooooooooo
 
les menu c'est en UL pas en DIV
parque tu mets des LI directements après, alors qu'un LI ca ne se met ke dans un UL
 
<ul class="element_menu">  
        <li><a href="accueil.php">Accueil</a></li>  
        <li><a href="presentation.php">Présentation</a></li>  
        <li><a href="news.php">Nouveauté</a></li>  
        <li><a href="salle.php">La Salle</a></li>  
        <li><a href="galerie.php">Galeries</a></li>  
        <li><a href="contact.php">Contact</a></li>  
        <li><a href="livre.php">Livre d'or</a></li>  
        </ul>  

Reply

Marsh Posté le 06-10-2005 à 14:26:31    

et les tableaux pour les news, c pas terrible ^^


---------------
:Moultiplayers:.:Quatuor Chevalier:.:Admin G15-france.com:.:Wiki -G15-france:.:-Papa-:.
Reply

Marsh Posté le 07-10-2005 à 08:41:42    

gatsusat,
 
mes LI sont bien dans un UL à part dans le 2ème mais ca c'est normal j'ai juste copier/coller vite fait pour vous montrer le problème d'affichage parce que tu me diras, pourquoi c'est la même chose que celui d'en haut ?  
 
 
sinon pour bl@p_psx, la page c'est juste un test dans la version finale ya pas de tableau


Message édité par bigbebel le 07-10-2005 à 08:45:37
Reply

Marsh Posté le 07-10-2005 à 08:59:15    

ah j'avais pas vu désolé :D mais je suis ravi kan je vois du code comme le tiens hummmmmmmmmm.


---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 07-10-2005 à 16:35:02    

Comme je suis en train de galérer pour implémenter un pied de page, on est d'accord que pour en faire un tout bien tout bien c'est qd-même la misère (http://pompage.net/pompe/pieds/), non ?
 
Et que sans javascript, il ne pourra fonctionner de manière universelle ?
 
Parce que si vous avez une méthode "pure CSS/harmonieuse/joie/universelle/bonheur", cad que je me tire des plombs pour rien, suis preneur. Merci.

Reply

Marsh Posté le 07-10-2005 à 16:35:02   

Reply

Marsh Posté le 07-10-2005 à 16:41:12    

Beral2 > pourquoi j'ai rien compris à ce que tu veux faire et pourquoi t'as besoin du javascript? :pt1cable:

Reply

Marsh Posté le 07-10-2005 à 16:52:55    

Ben regarde le lien alors ;)
Entre ceux qui se mettent juste "après" (dans le flux, mais pas forcément en bas de page si celle-ci est courte), ceux en position absolue qui se superposent au block précédent et les compatibilités (?) des différents navigateurs qui continuent de nous les hum... y a de quoi s'énerver, encore une fois.

Reply

Marsh Posté le 23-10-2005 à 18:29:46    

Heu.. je me permet de déterrer un peu ce post.
 
J'ai tenté un bête copier coller des codes source ci-dessus, afin d'avoir une idée du fonctionnement du truc. Seulement ça ne fonctionne pas du tout.
 
Les div sont simplement en colonne, dans l'ordre du code, avec une perte totale de style pour le pied de page et l'entête.
 
J'ai un pied de page à mettre bien en palce donc si pouvait comprendre le fonctionnement de float et autre, ça m'aiderait beaucoup...


Message édité par Damascus le 23-10-2005 à 18:30:15
Reply

Sujets relatifs:

Leave a Replay

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