Votre question

Probleme création footer (x)html

Tags :
  • Creation
  • Programmation
Dernière réponse : dans Programmation
10 Février 2008 16:56:56

Bonjour a tous! J'ai un problème de création de pied de page :colere2:.Lorque j'essaie de créer une division tout en bas de ma source, au lieu de s'afficher son contenu en bas de la page, elle l'affiche en bas de la division "corps"(enfin j'en ai l'impression). Si je ne suis pas clair demandez-moi des précisions, et si vous avez des idées pour améliorer le css ou la source n'hésitez pas non plus.





Voici mon code x(html) valide W3C :D  (et franchement inspiré des tutos du SdZ).
  1. <DOCTYPE html
  2. PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  5. <head>
  6.  
  7. <meta name="Description" content="Bienvenue sur le site de l'info. C'est un site generaliste ou nous publions vos photos,dessins,video..." />
  8. <meta name="keywords" content="kings, roi, king, rois, nouvelles, nouvelle, info, actu, actualite, information, informations, news, new, jeux, flash, marc, remi, trackmania, trackmania nations, humour," />
  9. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />
  10. <meta name="Author" content="Remi, Marco" />
  11. <meta name="copyright" content="kingsdelanews.free.fr" />
  12. <title>Mon super site</title>
  13.  
  14.  
  15.  
  16. <link rel="stylesheet" media="screen" type="text/css" title="Design" href="index3.css" />
  17. <link rel="shortcut icon" type="image/x-icon" href="images/karting.ico" />
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24. </head>
  25.  
  26. <body>
  27.  
  28. <!-- L'en-tête -->
  29.  
  30. <p id="en_tete"><img src="images/banierenew.png" alt="" /></p>
  31.  
  32. <!--barre rapido :)-->
  33.  
  34. <ul id="barre">
  35. <li class="barregauche"><a href="http://kingsdelanews.free.fr/index.php" title="Retournez sur la page d'accueil"><span>Accueil</span></a></li>
  36. <li class="barregauche"><a href="http://kingsdelanews.free.fr/livreor/" title="Laissez un message !"><span>Livre d'or</span></a></li>
  37. <li class="barredroite"><a href="http://kingsdelanews.free.fr/phpBB2/" title="Le forum"><span>Forum</span></a></li>
  38. <li class="barredroite"><a href="wanalester/subscribe.php" title="Le forum"><span>Newsletter</span></a></li>
  39.  
  40. </ul>
  41. <!-- Le menu qui merde bien sur, je fais un include comme on arrete pas de le modifier autant que ce soit pour toutes les pages en même temps-->
  42. <div id="fond">
  43. <div id="menu">
  44. <div id="menu_dynamique">
  45. <ul>
  46.  
  47.  
  48. <li class="extend ">
  49.  
  50. <a href="#">Vidéo du net</a>
  51. <ul>
  52. <li class="end first"><a href="http://kingsdelanews.free.fr/vactu.php">Actualité</a></li>
  53. <li class="end"><a href="http://kingsdelanews.free.fr/vhumour.php">Humour</a></li>
  54. <li class="end"><a href="http://kingsdelanews.free.fr/vpub.php">Publicité</a></li>
  55. <li class="end last"><a href="http://kingsdelanews.free.fr/vhorreur.php">Horreur</a></li>
  56. </ul>
  57. </li>
  58.  
  59.  
  60.  
  61. <li class="extend">
  62.  
  63. <a href="#">Vidéo perso</a>
  64. <ul>
  65. <li class="end first"><a href="http://kingsdelanews.free.fr/videoperso/trackmania.php">Trackmania</a></li>
  66. <li class="end"><a href="http://kingsdelanews.free.fr/videoperso/GTA.php">GTA/SAMP</a></li>
  67. <li class="end"><a href="http://kingsdelanews.free.fr/videoperso/pes.php">PES</a></li>
  68. <li class="end last"><a href="http://kingsdelanews.free.fr/videoperso/stepmania.php">Stepmania</a></li>
  69. </ul>
  70. </li>
  71.  
  72.  
  73.  
  74. <li class="extend">
  75.  
  76. <a href="#">Trackmania</a>
  77. <ul>
  78. <li class="end first"><a href="http://kingsdelanews.free.fr/tmhistoire.php">Histoire</a></li>
  79. <li class="end"><a href="http://kingsdelanews.free.fr/tmtuto.php">Tutoriel</a></li>
  80. <li class="end"><a href="http://kingsdelanews.free.fr/tmconseil.php">Conseil de marco</a></li>
  81. <li class="end last"><a href="http://kingsdelanews.free.fr/tmvideo.php">Vidéo</a></li>
  82. </ul>
  83. </li>
  84.  
  85. <li class="extend">
  86.  
  87. <a href="#">Stepmania</a>
  88. <ul>
  89. <li class="end first"><a href="http://kingsdelanews.free.fr/stepmania/stepmania.php">Présentation</a></li>
  90. <li class="end"><a href="http://kingsdelanews.free.fr/stepmania/sconnec.php">Multi-joueur</a></li>
  91. <li class="end"><a href="http://kingsdelanews.free.fr/stepmania/sspeed.php">Modifier la vitesse</a></li>
  92. <li class="end "><a href="http://kingsdelanews.free.fr/stepmania/stop.php">Les options</a></li>
  93. <li class="end last"><a href="http://kingsdelanews.free.fr/stepmania/slien.php">Lien/Pack</a></li>
  94. </ul>
  95. </li>
  96.  
  97. <li class="extend">
  98.  
  99. <a href="http://kingsdelanews.free.fr/predieu.php">Prédieu</a>
  100. <ul>
  101. <li class="end first"><a href="http://kingsdelanews.free.fr/visioneuse.html">BD</a></li>
  102.  
  103. <li class="end last"><a href="http://kingsdelanews.free.fr/photonormal.php">Les photos</a></li>
  104. </ul>
  105. </li>
  106.  
  107. <li class="extend">
  108.  
  109. <a href="#">Les mangas</a>
  110. <ul>
  111. <li class="end first last"><a href="http://d38gto.skyblog.com/">GTO</a></li>
  112. </ul>
  113. </li>
  114.  
  115. <li class="extend">
  116.  
  117. <a href="#">Les images</a>
  118. <ul>
  119. <li class="end first"><a href="http://kingsdelanews.free.fr/diapo/diapo/">Les images</a></li>
  120.  
  121. <li class="end last"><a href="mailto:marc38gt@hotmail.fr?subject=Une_image">Envoyez-les-moi</a></li>
  122. </ul>
  123. </li>
  124.  
  125. <li class="extend">
  126.  
  127. <a href="#">Les tutoriels</a>
  128. <ul>
  129. <li class="end first"><a href="http://kingsdelanews.free.fr/tuto/audacity.php">Audacity</a></li>
  130. <li class="end" ><a href="http://kingsdelanews.free.fr/tutovideo/tutovideo.php">Créer ses vidéos</a></li>
  131. <li class="end last"><a href="http://kingsdelanews.free.fr/tuto/emulateur.php">Emulateur</a></li>
  132. </ul>
  133. </li>
  134.  
  135. <li class="end"><a href="http://kingsdelanews.free.fr/lol1.php">Les flash</a></li>
  136. <li class="end "><a href="http://kingsdelanews.free.fr/jeux.php">Jeux perso</a></li>
  137. </ul>
  138. </div>
  139. <iframe src="http://www.i-tchat.com/shoutbox/shoutbox.php?idShoutbox=45190" width="170px" height="350px" frameborder="0"></iframe>
  140. <script src="http://kingsdelanews.free.fr/livreor/boiteJava/?n=1" type="text/javascript"></script>
  141. <br/>
  142.  
  143. <div style="background-image:url('http://kingsdelanews.free.fr/images/hautimagehasard.png');background-repeat:no-repeat;height: 35px;"></div>
  144. <div style="border-top: 0px 0;border-bottom: 0px 0;background-image: url('http://kingsdelanews.free.fr/images/fondmessage.png');margin-left:0px;">
  145.  
  146. <a href="/diapo/diapo/?img=2"><img alt="XD" src="/diapo/diapo/getimg.php?img=Les_gifs_a_Marco/XD.gif" style="border:none;max-width:170px;display:block;clear:both;margin-left:auto;margin-right:auto;paddin-top:15px;"/></a><br />
  147.  
  148. </div>
  149. <img src="http://kingsdelanews.free.fr/images/basimagehasard.png" alt="" />
  150. </div>
  151.  
  152.  
  153.  
  154. <!-- Le corps -->
  155.  
  156. <div id="corps">
  157.  
  158.  
  159.  
  160.  
  161.  
  162. <div style="margin-bottom:15px;margin-top:25px;padding-left:97px;">
  163. <div class="hautnews">
  164. <div style="background-image: url(images/hautnews.png) ;height:100px;background-repeat:no-repeat;"/></div>
  165. <div class="fondnews" style="width:660px; margin: 0px 0;">
  166.  
  167. <div style="margin-left:60px;"><strong>Juste un petit tes pour les liens rss :)</strong></div>
  168.  
  169. <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #bd6d2e;margin-left:60px;margin-right:60px;border-collapse: collapse;">Juste un petit tes pour les liens rss :). Et puis pour dire que le site va très peu avancer jusqu'aux vancances XD</div>
  170. <img src="http://kingsdelanews.free.fr/images/bordure.png" alt="" style="margin-left:60px"/>
  171. <span style="float: right;margin-right:60px;"><!-- no full story--> <a href="#" onclick="window.open('http://kingsdelanews.free.fr/cutenews/show_news.php?subaction=showcomments&template=&id=1201279162&archive=&start_from=&ucat=', '_News', 'HEIGHT=400,WIDTH=650,resizable=yes,scrollbars=yes');return false;">0 Commentaires</a></span>
  172.  
  173. <div style="margin-left:60px;"><em>Poste le 25 Jan 2008 par <a href="mailto:marc38gt@hotmail.fr">marco</a></em></div>
  174. <div><img src="http://kingsdelanews.free.fr/images/basnews.png" alt=""/></div>
  175. </div><div class="hautnews">
  176. <div style="background-image: url(images/hautnews.png) ;height:100px;background-repeat:no-repeat;"/></div>
  177. <div class="fondnews" style="width:660px; margin: 0px 0;">
  178.  
  179. <div style="margin-left:60px;"><strong>Mise a jour v0.4</strong></div>
  180.  
  181. <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #bd6d2e;margin-left:60px;margin-right:60px;border-collapse: collapse;">Mise en place du menu en flash;<br />Le lecteur mp3 reste en bas a gauche de votre écran;<br />Le bas de page est à la même hauteur, ça parait simple hein <img style="border: none;" alt="laughing" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/laughing.gif" /> mais non c'est pas simle quand on part de zéro <img style="border: none;" alt="tongue" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/tongue.gif" />;<br />A venir changement de couleur etcc si rem's se décide a finir le header <img style="border: none;" alt="smile" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/smile.gif" />;<br />enfin voila bonne nanée na tous!!!</div>
  182. <img src="http://kingsdelanews.free.fr/images/bordure.png" alt="" style="margin-left:60px"/>
  183. <span style="float: right;margin-right:60px;"><!-- no full story--> <a href="#" onclick="window.open('http://kingsdelanews.free.fr/cutenews/show_news.php?subaction=showcomments&template=&id=1199994708&archive=1199994713&start_from=&ucat=', '_News', 'HEIGHT=400,WIDTH=650,resizable=yes,scrollbars=yes');return false;">0 Commentaires</a></span>
  184.  
  185. <div style="margin-left:60px;"><em>Poste le 10 Jan 2008 par <a href="mailto:marc38gt@hotmail.fr">marco</a></em></div>
  186. <div><img src="http://kingsdelanews.free.fr/images/basnews.png" alt=""/></div>
  187. </div><div class="hautnews">
  188. <div style="background-image: url(images/hautnews.png) ;height:100px;background-repeat:no-repeat;"/></div>
  189. <div class="fondnews" style="width:660px; margin: 0px 0;">
  190.  
  191. <div style="margin-left:60px;"><strong>MaJ v0.3</strong></div>
  192.  
  193. <div style="text-align:justify; padding:3px; margin-top:3px; margin-bottom:5px; border-top:1px solid #bd6d2e;margin-left:60px;margin-right:60px;border-collapse: collapse;">Alors donc pour cette mise a jour, tous les bugs ont été supprimés.<img style="border: none;" alt="laughing" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/laughing.gif" /><br />Le menu n'est plus déroulant (en prévision pour la grande MaJ graphique <img style="border: none;" alt="wink" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/wink.gif" /> . <br />Pour les vidéos il y a du changement, uploader les sur dailymotion et contactez-moi pour les mettre dans une playlist.<br />Voila voila <img style="border: none;" alt="tongue" src="http://kingsdelanews.free.fr/cutenews/data/emoticons/tongue.gif" />!</div>
  194. <img src="http://kingsdelanews.free.fr/images/bordure.png" alt="" style="margin-left:60px"/>
  195. <span style="float: right;margin-right:60px;"><!-- no full story--> <a href="#" onclick="window.open('http://kingsdelanews.free.fr/cutenews/show_news.php?subaction=showcomments&template=&id=1198345272&archive=1199994713&start_from=&ucat=', '_News', 'HEIGHT=400,WIDTH=650,resizable=yes,scrollbars=yes');return false;">0 Commentaires</a></span>
  196.  
  197. <div style="margin-left:60px;"><em>Poste le 22 Dec 2007 par <a href="mailto:marc38gt@hotmail.fr">marco</a></em></div>
  198. <div><img src="http://kingsdelanews.free.fr/images/basnews.png" alt=""/></div>
  199. </div><div style="margin-top:15px;width:100%;text-align:center;font:9px Verdana;">Content Management Powered by <a href="http://cutephp.com/" title="CuteNews - PHP News Management System">CuteNews</a></div><!-- News Powered by CuteNews: http://cutephp.com/ -->
  200. </div>
  201.  
  202. <a title="RSS Feed" href="http://kingsdelanews.free.fr/cutenews/rss.php?number=10">
  203. <img src="http://kingsdelanews.free.fr/cutenews/skins/images/rss_icon.gif" alt="rss" style="border:0 none;" />
  204. </a>
  205. <a href="http://validator.w3.org/check?uri=referer"><img
  206. src="http://www.w3.org/Icons/valid-xhtml10"
  207. alt="Valid XHTML 1.0 Transitional" height="31" width="88" style="border:0 none;"/></a>
  208. <a title="Mettre ce site dans vos Favoris" href="javascript:window.external.addfavorite('http://kingsdelanews.free.fr/index.php', 'kingsdelanews')"><img src="images/coeur.png" alt="" style="border:0 none;"/></a>
  209. <span style="position:relative;right:0px;bottom:0px;">
  210. 0.0832 s.</span>
  211. </div>
  212. </div>
  213. <!-- Le pied de page -->
  214.  
  215. <div style="position:fixed;bottom:0px;left:0px;"><object type="application/x-shockwave-flash" data="dewplayer-multi.swf?mp3=mp3/opgap.mp3|mp3/foy.mp3|mp3/max.mp3&random=1&bgcolor=ffbd89" width="240" height="20"><param name="movie" value="dewplayer-multi.swf?mp3=mp3/opgap.mp3|mp3/foy.mp3|mp3/max.mp3&random=1&bgcolor=ffbd89" /></object><a href="dewplayer-multi.swf?mp3=mp3/max.mp3|mp3/foy.mp3|mp3/opgap.mp3&random=1&bgcolor=ffbd89" onclick="window.open(this.href, 'radio', 'width=240, height=20, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=no, status=no'); return false;"><b style="color:red;font-size:8px;text-decoration: none;">Pop-up</b></a></div>
  216.  
  217.  
  218.  
  219.  
  220.  
  221. </body>
  222.  
  223. </html>

Et voici mon code CSS

  1. body {
  2. width : 1024px;
  3. margin : auto;
  4. margin-top : 20px;
  5. margin-bottom : 20px;
  6. background-image : url(http://kingsdelanews.free.fr/images/home.png);
  7. background-repeat : repeat;
  8. background-attachment : fixed;
  9. font-family : "Trebuchet MS", serif;
  10.  
  11. border-bottom : 2px solid gray;
  12. behavior:url("http://kingsdelanews.free.fr/css/csshover.htc");
  13. }
  14. #en_tete {
  15. text-align : center;
  16. margin-top : 5px;
  17. }
  18. #barre {
  19. list-style-type : none;
  20. margin : 0;
  21. padding : 0;
  22. padding-left : 0;
  23. height : 25px;
  24. background-color : #f3a05f;
  25. border : 1px solid gray;
  26. }
  27. .barregauche {
  28. float : left;
  29. padding-left : 8px;
  30. background : url(http://kingsdelanews.free.fr/images/sepa2.png) no-repeat right 0%;
  31. padding-right : 15px;
  32. }
  33. .barredroite {
  34. float : right;
  35. padding-left : 20px;
  36. background : url(http://kingsdelanews.free.fr/images/sepa.png) no-repeat;
  37. padding-right : 8px;
  38. }
  39. #speedbarre li {
  40. height : 25px;
  41. line-height : 25px;
  42. text-align : center;
  43. padding-top : 0;
  44. }
  45. #barre a {
  46. color : white;
  47. font-style : normal;
  48. text-decoration : none;
  49. font-weight : bold;
  50. display : block;
  51. }
  52. #barre a:hover {
  53. color : #b3b3b3;
  54. }
  55. #fond {
  56. background : url(http://kingsdelanews.free.fr/images/fond.png) center 0;
  57.  
  58. overflow : auto;
  59. }
  60. dl, dt, dd, ul {
  61. list-style-type : none;
  62. }
  63. #menu {
  64. float : left;
  65. width : 170px;
  66. background-color : #ffbd89;
  67.  
  68. border-right : 1px solid gray;
  69. border-left : 2px solid gray;
  70. border-right : 2px solid gray;
  71. }
  72. #menu_dynamique li a {
  73. display : block;
  74. height : 25px;
  75. text-decoration : none;
  76. color : #696969;
  77. background-color : #ffbd89;
  78. }
  79. #menu_dynamique {
  80. width : auto;
  81. margin : 0 0;
  82. padding : 0;
  83. }
  84. #menu_dynamique ul {
  85. width : 170px;
  86. list-style : none;
  87. padding : 0;
  88. margin : 0;
  89. border-right : 1px solid silver;
  90. }
  91. #menu_dynamique ul li {
  92. width : auto;
  93. margin-left : 0;
  94. padding-left : 25px;
  95. text-indent : 5px;
  96. height : 25px;
  97. background : url("http://kingsdelanews.free.fr/menu/bordure.png") no-repeat;
  98. }
  99. #menu_dynamique ul li ul {
  100. display : none;
  101. }
  102. #menu_dynamique ul li:hover ul {
  103. display : block;
  104. position : relative;
  105. top : -25px;
  106. left : 146px;
  107. }
  108. #menu_dynamique ul li ul, #menu_dynamique ul li:hover ul li ul, #menu_dynamique ul li:hover ul li:hover ul li ul {
  109. display : none;
  110. }
  111. #menu_dynamique ul li:hover ul, #menu_dynamique ul li:hover ul li:hover ul, #menu_dynamique ul li:hover ul li:hover ul li:hover ul {
  112. display : block;
  113. position : relative;
  114. top : -25px;
  115. left : 146px;
  116. }
  117. #menu_dynamique ul li.extend a {
  118. background : #ffbd89 url("http://kingsdelanews.free.fr/menu/suite.gif") right no-repeat;
  119.  
  120. }
  121. #menu_dynamique ul li.extend:hover ul li.end a {
  122. background-image : none;
  123. }
  124. #menu_dynamique li:hover {
  125. background : url("http://kingsdelanews.free.fr/menu/fleche_survol.png") no-repeat;
  126. }
  127. #menu_dynamique li a:hover {
  128. color : black;
  129. background-color : #bbb7c7;
  130. }
  131. #menu_dynamique ul li.extend:hover a, #menu_dynamique ul li.extend:hover ul li:hover a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li:hover a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li.extend:hover ul li:hover a {
  132. background-color : #bbb7c7;
  133. }
  134. #menu_dynamique ul li.extend:hover ul li a, #menu_dynamique ul li.extend:hover ul li:hover ul li a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li:hover ul li a {
  135. background-color : #ffffff;
  136. }
  137. #menu_dynamique li.first {
  138. border-top : 1px solid silver;
  139. }
  140. #menu_dynamique li.last {
  141. border-bottom : 1px solid silver;
  142. }
  143. html > body #menu_dynamique ul li.extend:hover {
  144. overflow : visible;
  145. }
  146. #corps {
  147. margin-right : 0;
  148. border-right : 2px solid gray;
  149. border-left : 1px solid gray;
  150. padding-bottom : 5px;
  151. color : black;
  152. background-color : #ffbd89;
  153. float : right;
  154. width : 847px;
  155. margin-top : 0;
  156.  
  157. }
  158. .hautnews {
  159. margin-top : 20px;
  160. margin-bottom : 20px;
  161. }
  162. .fondnews {
  163. background-image : url(http://kingsdelanews.free.fr/images/fondnews.png);
  164. margin-right : 50px;
  165. color : black;
  166. }

Merci d'avance

Autres pages sur : probleme creation footer html

a c 232 L Programmation
11 Février 2008 12:42:22

Salut,

Tout dans ton site est positionné en absolute, donc, quand ton corps est beaucoup plus grand que prévu, ton footer se retrouve au même niveau que ton corps.
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