Se connecter avec
S'enregistrer | Connectez-vous

[Résolu]Footer en bas

Dernière réponse : dans Programmation

Salut,

Voilà mon problème : je suis en train de réaliser un site web et c'est assez classique quoi (Header en haut, menu à gauche, footer en bas, corps au milieu/droite) mais voilà quand je met dans le corps un contenu qui est plus petit que le menu qui est à droite, le footer reste en-dessous du corps et cela fait que le menu est décalé par rapport au footer et moi je veux qu'il s'aligne soit avec le corps/contenu quand c'est lui le plus long soit avec le menu si c'est lui le plus long. Vous m'avez compris ? J'espère :lol:  J'ai essayé le hr, clear: both; ... mais rien n'y fait alors j'espère que cela est possible à faire et que vous savez et vous m'aiderais ^^

Un petit screenshot pour mieux voir : ICI

P.S.: Si vous voulez le code de ma page (XHTML et CSS), faites le moi savoir bien que je ne pense pas que cela soit utile mais on sait jamais

Autres pages sur : resolu footer bas

Lassé par la pub ? Créez un compte

Ok voici mon code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
  2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
  3. <head>
  4.    <title>Streaming & DDL : Contact</title>   
  5.    <link rel="stylesheet" type="text/css" href="style.css" />  
  6. </head>    
  7. <body>
  8.    <div id="wrapper">
  9.       <div id="menu">
  10.          <ul>
  11.             <li><a href="index.php" title="Accueil">Accueil</a></li>
  12.             <li><a href="#" title="Mangas">Mangas</a></li>
  13.             <li><a href="#" title="Séries">Séries</a></li>
  14.             <li><a href="#" title="Films">Films</a></li>
  15.             <li><a href="#" title="Scans Mangas">Scans Mangas</a></li>
  16.  
  17.          </ul>
  18.       </div>
  19.  
  20.       <div id="date"><?php echo 'Nous sommes le : ' . date('d/m/Y') . ' et il est : ' . date('H:i'); ?></div>
  21.  
  22.       <div id="header">         
  23.          <img src="images/header.png" alt="Header" />
  24.       </div>
  25.  
  26.       <div id="content">
  27.          <div id="menuleft">
  28.  
  29.             <h1>Espace Membre</h1>
  30. 			<div style="margin-left:15px;">
  31.                <form method="post" action="#">
  32. 			      <p>
  33. 			      Votre Pseudo <br />
  34. 			      <input type="text" name="pseudo" />
  35. 			      </p>
  36.  
  37. 				  <p>
  38. 				  Votre Mot de Passe <br />
  39. 				  <input type="password" name="mdp" />
  40. 				  </p><br />
  41.  
  42. 			      <p>
  43. 				  Se souvenir de moi ? <br />
  44. 				  <input type="checkbox" name="enregistrer_pseudo_mdp" />
  45. 				  </p><br />
  46.  
  47. 				  <p>
  48. 				  <input type="submit" value="Se connecter" />
  49. 				  </p>
  50. 			    </form>
  51.              </div>	
  52.  
  53.          <br />
  54.  
  55.             <h1>Menu</h1>
  56.                <ul>
  57.                   <li><a href="#" title="News">News</a></li>
  58.                   <li><a href="#" title="Ajouter une vidéo">Ajouter une Vidéo</a></li>
  59.                   <li><a href="#" title="Staff">Staff</a></li>
  60.                   <li><a href="#" title="Recrutement">Recrutement</a></li>
  61.                   <li><a href="livredor/index.php" title="Livre d'or">Livre d'or</a></li>
  62.                   <li><a href="#" title="Tchat">ShoutBox (Chat)</a></li>
  63.                   <li><a href="contact.php" title="Contact">Nous Contacter</a></li>
  64.                   <li><a href="#" title="Affiliations">Affiliations</a></li>				  
  65.                </ul>
  66.  
  67.          <br />  
  68.  
  69.             <h1>Newsletter</h1>
  70. 			<div style="margin-left:15px;">
  71.                <form method="post" action="#">
  72. 			      <p>
  73. 			      Votre E-Mail <br />
  74. 			      <input type="text" name="email" />
  75. 			      </p><br />
  76.  
  77. 				  <p>
  78. 				     <select name="pays" id="pays">
  79.                         <option value="inscription">Inscription</option>
  80.                         <option value="desincription">Désincription</option>
  81.                      </select>
  82. 			      </p><br />
  83.  
  84.                   <p>
  85.                   <input type="submit" value="Valider" />			
  86.                   </p>	
  87.                 </form>
  88.             </div>	
  89.  
  90.          <br />
  91.  
  92.             <h1>Top Sites</h1>
  93.                <ul>
  94.                   <li><a href="#" title="Streaming-Top">Streaming-Top</a></li>
  95.                   <li><a href="#" title="Weborama">Weborama</a></li>
  96.                   <li><a href="#" title="Root-Top">Root-Top</a></li>
  97.                   <li><a href="#" title="LeBest">LeBest</a></li>
  98.                </ul>
  99.  
  100.          <br />
  101.  
  102.             <h1>Stats</h1>
  103.                <ul>
  104.                   <li><?php
  105.  
  106.  
  107. $retour = mysql_query('SELECT COUNT(*) AS nbre_entrees FROM stats WHERE ip=\'' . $_SERVER['REMOTE_ADDR'] . '\'');
  108. $donnees = mysql_fetch_array($retour);
  109.  
  110. if ($donnees['nbre_entrees'] == 0) 
  111. {
  112.     mysql_query('INSERT INTO stats VALUES(\'' . $_SERVER['REMOTE_ADDR'] . '\', ' . time() . ')');
  113. }
  114. else
  115. {
  116.     mysql_query('UPDATE stats SET timestamp=' . time() . ' WHERE ip=\'' . $_SERVER['REMOTE_ADDR'] . '\'');
  117. }
  118.  
  119. $timestamp_5min = time() - (60 * 5); 
  120. mysql_query('DELETE FROM stats WHERE timestamp < ' . $timestamp_5min);
  121.  
  122.  
  123. $retour = mysql_query('SELECT COUNT(*) AS nbre_entrees FROM stats');
  124. $donnees = mysql_fetch_array($retour);
  125.  
  126.  
  127.  
  128. echo '<p>' . $donnees['nbre_entrees'] . ' En ligne</p>';
  129. ?></li>
  130. <li><?php
  131.  
  132.  
  133.  
  134. $retour = mysql_query('SELECT COUNT(*) AS nbre_entrees FROM stats WHERE ip=\'' . $_SERVER['REMOTE_ADDR'] . '\'');
  135. $donnees = mysql_fetch_array($retour);
  136.  
  137. if ($donnees['nbre_entrees'] == 0) 
  138. {
  139.     mysql_query('INSERT INTO stats VALUES(\'' . $_SERVER['REMOTE_ADDR'] . '\', ' . time() . ')');
  140. }
  141.  
  142. $retour = mysql_query('SELECT COUNT(*) AS nbre_entrees FROM stats');
  143. $donnees = mysql_fetch_array($retour);
  144.  
  145.  
  146. echo '<p>' . $donnees['nbre_entrees'] . ' Visiteurs<br />Depuis le 08/09/2008</p>';
  147. ?></li>
  148.                </ul>
  149.          </div>
  150.  
  151.          <div id="text">
  152.  
  153. <form method="post" action="mail.php">
  154.  
  155. <h2 class="titre_corps">Nous contacter</h2>
  156.  
  157. <p>
  158. Votre Email <br /><br />
  159. <input type="text" name="votremail" />
  160. </p>
  161. <br />
  162. <p>
  163. Objet <br /><br />
  164. <input type="text" name="objet" />
  165. </p>
  166. <br />
  167. <p>
  168. Votre message <br /><br />
  169. <textarea cols="66" rows="6" name="message"></textarea>
  170. </p>
  171. <br />
  172. <p>
  173. <input type="submit" value="Envoyer" />
  174. </p>
  175. </form>
  176.  
  177.       </div>
  178.  
  179.       <div id="footer">
  180.          <p>© 2008 Tous droits Reservés - <a href="#">Streaming-DDL.com</a> - Design by <a href="<a href="http://www.xneoz.eu" target="_blank">http://www.xneoz.eu</a>">XnEoZ</a> - Website By Straight Shooter<br /><br />
  181.             Partenaires : | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> |<br />
  182.             | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | <a href="#" title="">votresite.com</a> | | <a href="#" title="">votresite.com</a> |</p>
  183.       </div>
  184. 	</div>
  185. 	<p></p><br />
  186.    <p></p><br />
  187.    <p></p><br />
  188.    <p></p><br />
  189. </body>
  190. </html>


Et le CSS : 
  1. /* ===========================================================
  2. Elements de Page =========================================== */
  3.  
  4. * {
  5. 	margin:0;
  6. 	border:1;
  7. 	padding:0;
  8. }
  9.  
  10. html, body {
  11. 	background-image:url(images/bg.png);
  12. 	font-family:Verdana, Arial, sans-serif;
  13. 	font-size:11px;
  14. 	color:#000000;
  15. }
  16.  
  17. ul, li {
  18. 	list-style-type:none;
  19. }
  20.  
  21. a {
  22. 	text-decoration:none; 
  23. 	cursor:pointer;
  24. 	color:#000000;
  25. }
  26.  
  27. a:hover {
  28. 	text-decoration:underline;
  29. }
  30.  
  31. /* ===========================================================
  32. Structure ================================================== */
  33.  
  34. #wrapper {
  35. 	position:relative;
  36. 	margin:8px auto;
  37. 	width:855px;
  38. }
  39.  
  40. #menu li {
  41. 	background:url(images/menu_bg.png) no-repeat 0 0;
  42. 	text-align:center;
  43. 	margin-left:18px;
  44. 	font-weight:bold;
  45. 	padding-top:5px;
  46. 	width:129px;
  47. 	height:19px;
  48. 	float:left;
  49. }
  50.  
  51. #menu li:hover {
  52. 	background:url(images/menu_bg_actif.png) no-repeat 0 0;
  53. }
  54.  
  55. #menu .actif {
  56. 	background:url(images/menu_bg_actif.png) no-repeat 0 0;
  57. }
  58.  
  59. #menu a {
  60. 	color:#ffffff;
  61. }
  62.  
  63. #header {
  64. 	height:162px;
  65. 	width:100%;
  66. }
  67.  
  68. #date{
  69. 	position:absolute;
  70. 	font-weight:bold;
  71. 	color:#ffffff;
  72. 	right:7px;
  73. 	top:28px;
  74. }
  75.  
  76. #content {
  77. 	background:url(images/top_bg.png) no-repeat top;
  78. 	background-color:#ffffff;
  79. 	margin-top:30px;
  80. 	padding:13px;
  81. 	width:829px;
  82. }
  83.  
  84. #nouveau {
  85. 	background:url(images/nouveau.png) no-repeat 0 0;
  86. 	margin-bottom:-15px;
  87. 	text-align:center;
  88. 	padding-top:40px;
  89. 	height:229px;
  90. 	width:189px;
  91. }
  92.  
  93. #menuleft {
  94. 	float:left;
  95. 	font-weight: bold;
  96. }
  97.  
  98. #menuleft h1{
  99. 	background:url(images/title_menu_bg.png) no-repeat 0 0;
  100. 	margin-bottom:5px;
  101. 	text-align:center;
  102. 	padding-top:5px;
  103. 	margin-left:4px;
  104. 	font-size:12px;
  105. 	color:#ffffff;
  106. 	width:176px;
  107. 	height:21px;
  108. }
  109.  
  110. #menuleft ul {
  111. 	margin-left:12px;
  112. }
  113.  
  114. #menuleft li {
  115. 	background:url(images/puce.png) no-repeat 0 0;
  116. 	padding-left:25px;
  117. 	margin-top:7px;
  118. }
  119.  
  120. #text {
  121. 	margin-left:200px;
  122. }
  123.  
  124. #text h2.titre_corps {
  125. 	background:url(images/title_bg.png) no-repeat 0 0;
  126. 	margin-bottom:8px;
  127. 	text-align:center;
  128. 	padding-top:5px;
  129. 	font-size:12px;
  130. 	color:#ffffff;
  131. 	width:625px;
  132. 	height:21px;
  133. }
  134.  
  135. #footer {
  136.     clear: left;
  137. 	background:url(images/footer.png) no-repeat 0 0;
  138. 	text-align:center;
  139. 	padding-top:15px;
  140. 	font-weight:bold;
  141. 	color:#ffffff;
  142. 	height:100px;
  143. 	width: 100%;
  144. 	bottom:10px;
  145. }
  146.  
  147. #footer a {
  148. 	color:#ffffff;
  149. }
  150.  
  151. .image_ajouts {
  152.    float: left;
  153.    width: 125px;
  154.    height: 152px;
  155.    margin-right: 10px;
  156.    border: 0;
  157. }
  158.  
  159. .populaires {
  160.    width: 100%;
  161. }
  162.  
  163. .titre_tableau {
  164.    font-weight: bold;
  165.    text-align: center;
  166.    font-family: "Times New Roman", Arial, sans-serif;
  167.    color: #000000;
  168.    font-size:15px;
  169.    padding-bottom: 10px;
  170. }
  171.  
  172. .titre_tableau a:hover {
  173.    text-decoration: none;
  174. }   
  175.  
  176. .msfsm_tableau {
  177.    text-align: center;
  178.    font-family: Arial, sans-serif;
  179.    color: #000000;
  180.    padding-bottom: 2px;
  181. }
  182.  
  183. .msfsm_tableau a:hover {
  184.    text-decoration: none;
  185. }  
  186.  
  187. .titre_da {
  188.    text-align: center;
  189.    color: #000000;
  190.    font-family: "Times New Roman", "Comic Sans MS", Arial, sans-serif;
  191. }
Lassé par la pub ? Créez un compte

Répondre Créer un nouveau sujet

Tom's guide dans le monde