Tom's Guide > Forum > Programmation > [Résolu]Footer en bas

[Résolu]Footer en bas

Forum Programmation : [Résolu]Footer en bas

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
StraightShooter   08-09-2008 à 17:59:05

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


Message édité par StraightShooter le 09-09-2008 à 12:43:34
Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
ideal23   08-09-2008 à 20:06:35
- 0 +

bonsoir
as-tu réussi.sinon avec le code c'est mieux bien sûr.

Répondre à ideal23
StraightShooter   08-09-2008 à 21:50:22
- 0 +

Ok voici mon code :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  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>
  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 />
  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 />
  84.                   <p>
  85.                   <input type="submit" value="Valider" />
  86.                   </p>
  87.                 </form>
  88.             </div>
  89.              
  90.         <br />
  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>
  100.         <br />
  102.             <h1>Stats</h1>
  103.               <ul>
  104.                   <li><?php
  107. $retour = mysql_query('SELECT COUNT(*) AS nbre_entrees FROM stats WHERE ip=\'' . $_SERVER['REMOTE_ADDR'] . '\'');
  108. $donnees = mysql_fetch_array($retour);
  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. }
  119. $timestamp_5min = time() - (60 * 5);
  120. mysql_query('DELETE FROM stats WHERE timestamp < ' . $timestamp_5min);
  123. $retour = mysql_query('SELECT COUNT(*) AS nbre_entrees FROM stats');
  124. $donnees = mysql_fetch_array($retour);
  128. echo '<p>' . $donnees['nbre_entrees'] . ' En ligne</p>';
  129. ?></li>
  130. <li><?php
  134. $retour = mysql_query('SELECT COUNT(*) AS nbre_entrees FROM stats WHERE ip=\'' . $_SERVER['REMOTE_ADDR'] . '\'');
  135. $donnees = mysql_fetch_array($retour);
  137. if ($donnees['nbre_entrees'] == 0)
  138. {
  139.     mysql_query('INSERT INTO stats VALUES(\'' . $_SERVER['REMOTE_ADDR'] . '\', ' . time() . ')');
  140. }
  142. $retour = mysql_query('SELECT COUNT(*) AS nbre_entrees FROM stats');
  143. $donnees = mysql_fetch_array($retour);
  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">
  155. <h2 class="titre_corps">Nous contacter</h2>
  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>
  177.       </div>
  178.      
  179.       <div id="footer">
  180.         <p>© 2008 Tous droits Reservés - <a href="#">Streaming-DDL.com</a> - Design by <a href="http://www.xneoz.eu">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 :

Code :
  1. /* ===========================================================
  2. Elements de Page =========================================== */
  4. * {
  5.     margin:0;
  6.     border:1;
  7.     padding:0;
  8. }
  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. }
  17. ul, li {
  18.     list-style-type:none;
  19. }
  21. a {
  22.     text-decoration:none;
  23.     cursor:pointer;
  24.     color:#000000;
  25. }
  27. a:hover {
  28.     text-decoration:underline;
  29. }
  31. /* ===========================================================
  32. Structure ================================================== */
  34. #wrapper {
  35.     position:relative;
  36.     margin:8px auto;
  37.     width:855px;
  38. }
  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. }
  51. #menu li:hover {
  52.     background:url(images/menu_bg_actif.png) no-repeat 0 0;
  53. }
  55. #menu .actif {
  56.     background:url(images/menu_bg_actif.png) no-repeat 0 0;
  57. }
  59. #menu a {
  60.     color:#ffffff;
  61. }
  63. #header {
  64.     height:162px;
  65.     width:100%;
  66. }
  68. #date{
  69.     position:absolute;
  70.     font-weight:bold;
  71.     color:#ffffff;
  72.     right:7px;
  73.     top:28px;
  74. }
  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. }
  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. }
  93. #menuleft {
  94.     float:left;
  95.     font-weight: bold;
  96. }
  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. }
  110. #menuleft ul {
  111.     margin-left:12px;
  112. }
  114. #menuleft li {
  115.     background:url(images/puce.png) no-repeat 0 0;
  116.     padding-left:25px;
  117.     margin-top:7px;
  118. }
  120. #text {
  121.     margin-left:200px;
  122. }
  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. }
  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. }
  147. #footer a {
  148.     color:#ffffff;
  149. }
  151. .image_ajouts {
  152.   float: left;
  153.   width: 125px;
  154.   height: 152px;
  155.   margin-right: 10px;
  156.   border: 0;
  157. }
  159. .populaires {
  160.   width: 100%;
  161. }
  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. }
  172. .titre_tableau a:hover {
  173.   text-decoration: none;
  174. } 
  176. .msfsm_tableau {
  177.   text-align: center;
  178.   font-family: Arial, sans-serif;
  179.   color: #000000;
  180.   padding-bottom: 2px;
  181. }
  183. .msfsm_tableau a:hover {
  184.   text-decoration: none;
  185. } 
  187. .titre_da {
  188.   text-align: center;
  189.   color: #000000;
  190.   font-family: "Times New Roman", "Comic Sans MS", Arial, sans-serif;
  191. }

Répondre à StraightShooter
tracks@idn   09-09-2008 à 10:58:49
- 1 +

salut,
Je ne sais pas si ton clear:left est efficace, essai de mettre un <div style="clear:both"></div> juste au dessus de ton footer

 

un tres bon tutorial : http://css.alsacreations.com/Model [...] age-en-CSS


Message édité par tracks@idn le 09-09-2008 à 10:59:42
Répondre à tracks@idn
StraightShooter   09-09-2008 à 12:42:21
- 0 +

Voilà merci beaucoup cela fonctionne ! Résolu !

Répondre à StraightShooter
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > [Résolu]Footer en bas
Aller à :

Il y a 2164 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,420 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens