Pied de page html

Loic -  
Bonjour a tous,

Je n'arrive pas a mettre le footer sur la même ligne:

<div class="footer_legal_notice">
<a href="http://www.test.com" target="_blank"> ©
TEXTE</a> </div>
</div>
<div class="toppage">
<a href="#top">top</a>
</div>

.footer_legal_notice {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
font-weight: normal;
color: #1A61A9;
bottom: 0;
padding-left:50px;
}

#toppage {
float: right;
text-align: right;
margin-right: 5px;
position:absolute;
bottom : 0px;
right: 240px;
}
J'aimerais qu'il soit tout les 2 sur la même ligne.
Merci.

8 réponses

Résumé de la discussion

Le problème consiste à afficher le footer et le lien top sur la même ligne en utilisant les classes .footer_legal_notice et .toppage. Pour obtenir ce résultat, il faut privilégier des sélecteurs de classe, regrouper les éléments dans le même bloc et remplacer #toppage par .toppage, puis employer des éléments inline comme span. L'exemple propose en particulier de mettre les deux éléments dans un paragraphe ou un conteneur commun et d'ajuster le CSS avec position et marges pour qu'ils restent alignés. En cas de besoin, l'utilisation de span plutôt que div peut faciliter l'alignement en ligne tout en préservant le flux du document.

Bobot (l’IA à votre service)
  1. @lobotomix:~# rm -rf *\
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>test</title>
    <style type="text/css">
    .footer_legal_notice {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    color: #1A61A9;
    position: relative;
    left: 30px;

    }
    .toppage {

    position: relative;
    bottom: 17px;
    }
    </style>
    </head>
    <body>
    <div class="footer_legal_notice">
    <a href="http://www.test.com" target="_blank"> TEXTE</a>
    </div>
    </div>
    <div class="toppage">
    <a href="#top">top</a>
    </div>
    </body>
    </html>
    1. @lobotomix:~# rm -rf *\
      pour top page vous avez mi une class alors faut pas mettre un # mais un " . "
    2. Loic
      Merci mais cela ne marche pas et pourquoi mettre bottom 17 si ils doivent être tout les 2 en bas de la page.
    3. @lobotomix:~# rm -rf *\
      ha oui c est un pied de page je suis bete...attend
  2. mimigenie
    Mets les 2 dans le même block et si tu veux ajouter un style css, utilise la balise span qui à le même effet que div sauf que c'est une balise de type in line.

    Donc ca donne :
    <p>
    <span class="footer_legal_notice">
    <a href="http://www.test.com" target="_blank"> ©
    TEXTE</a> </span>
    <span class="toppage">
    <a href="#top">top</a>
    </span>
    </p>

    J'ai rajouté des balises p car tout texte doit être dans un paragraphe.

    Attention dans ton css, tu as fais une erreur :

    #toppage {

    Le # est utilisé quand il s'agit d'un id, mais dans ton cas il faut un . comme tu l'as fait pour footer_legal_notice
    1. @lobotomix:~# rm -rf *\
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8" />
      <title>test</title>
      <style type="text/css">
      .footer_legal_notice {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11px;
      font-style: normal;
      font-weight: normal;
      color: #1A61A9;
      position: absolute;
      bottom: 2px;

      }
      .toppage {

      position: absolute;
      bottom: 0px;
      left: 50px;
      }
      </style>
      </head>
      <body>
      <div class="footer_legal_notice">
      <a href="http://www.test.com" target="_blank"> TEXTE</a>
      </div>
      </div>
      <div class="toppage">
      <a href="#top">top</a>
      </div>
      </body>
      </html>

      ou suit les conseil de mimiegenie ils sont intéressant, moi j'ai juste reprit ton code que j'ai modifier
      1. @lobotomix:~# rm -rf *\
        penser a mettre resolu
    2. Loic
      Ça ne marche toujours pas maintenant le top est partit au milieu complétement a droite.
      1. @lobotomix:~# rm -rf *\
        chez moi ca fonctionne, je comprend pas ya pas plus simple comme code
      2. Loic
        Oui c'est bizarre toujours compliquer avec moi...
        Enfaite le top il se met en bas de la fenêtre et non en bas de la page.
      3. @lobotomix:~# rm -rf *\
        ha mais je croi comprendre donner tout votre code et ca ira mieux
      4. Loic
        </head>
        <body>
        <div align="center">
        <table width="100%" cellspacing="5" cellpadding="0" border="0" class="LeftMenu" style="height: 134px; width: 940px;">

        <tr>
        <td valign="top">
        <div class="postexte">
        <h4 class="pos_top">
        <br />
        </h4>
        <h4 class="pos_top">TEXTE. </h4>
        </div>
        </td>
        </tr>
        </table>
        <div class="float"> <a href="../Version 3/test.html"><img class="image" alt="test" title="test" src="../image/phone.jpeg" /></a>
        <a href="../Version 3/test.html"><img class="image" alt="test" title=test" src="../image/haut_sartoux.jpg" /></a>
        <a href="../Version 3/test.html"><img class="image" alt="test" title="test" src="../image/antibes.jpg" /></a><br />

        <div class="sautl"> <a href="../Version 3/test.html"><img class="image" alt="testt" title="testt" src="../image/eating.jpg" /></a>
        <a href="../Version 3/test.html"><img class="image" alt="test" title="Go to Getting arround" src="../image/getaround.png" /></a>
        <a href="../Version 3/test.html"><img class="image" alt="test" title="test" src="../image/iconesecu.jpeg" /></a><br />
        </div>
        </div>
        </td>
        </tr>
        </table>
        <div class="footer_legal_notice">
        <a target="_blank" href="http://www.test.coml"> © TEXTE</a> </div>
        <div class="toppage">
        <a href="#top">top</a> </div>
        </div>
        </body>
        </html>
    4. @lobotomix:~# rm -rf *\
      Alors voila ce que je vous propose, avant de vous aidez a positionner vos element comme il faut j'ai passé votre code au validateur w3c et il a 20 erreur et un avertissement. Corriger tout et je vous aiderez

      http://validator.w3.org/
      1. Loic
        Chez moi je n'ai aucune erreur j'ai sans doute du oublier des balises dans le copier coller.
    5. Loic
      J'ai réussi en mettent margin-bottom mais je n'arrive pas a mettre le footer a gauche et le "top" a droite.
      1. @lobotomix:~# rm -rf *\
        ok je te la fait attend
    6. @lobotomix:~# rm -rf *\
      alors ne dit pas que ca fonctionne pas car chez moi c est bon 

      <!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="utf-8" /> 
  <title>test</title> 
  <style type="text/css"> 
  .footer_legal_notice 
  { 
   position: absolute; 
   bottom: 0px; 
  } 
  .toppage 
  { 
   position: absolute; 
   bottom: 0px; 
   left: 100px; 
  } 
  </style> 
 </head> 
 <body> 
  </head> 
 <body> 
  <div align="center"> 
   <table width="100%" cellspacing="5" cellpadding="0" border="0" class="LeftMenu" style="height: 134px; width: 940px;"> 
    <tr> 
     <td valign="top"> 
     <div class="postexte"> 
      <h4 class="pos_top"> 
      <br /> 
      </h4> 
      <h4 class="pos_top">TEXTE. </h4> 
     </div></td> 
    </tr> 
   </table> 
   <div class="float"> 
    <a href="../Version 3/test.html"><img class="image" alt="test" title="test" src="../image/phone.jpeg" /></a> 
    <a href="../Version 3/test.html"><img class="image" alt="test" title="test" src="../image/haut_sartoux.jpg" /></a> 
    <a href="../Version 3/test.html"><img class="image" alt="test" title="test" src="../image/antibes.jpg" /></a><br /> 

    <div class="sautl"> <a href="../Version 3/test.html"><img class="image" alt="testt" title="testt" src="../image/eating.jpg" /></a> 
    <a href="../Version 3/test.html"><img class="image" alt="test" title="Go to Getting arround" src="../image/getaround.png" /></a> 
    <a href="../Version 3/test.html"><img class="image" alt="test" title="test" src="../image/iconesecu.jpeg" /></a><br /> 
    </div> 
    </div> 
    </td> 
    </tr> 
    </table> 
    <div class="footer_legal_notice"> 
    <a target="_blank" href="http://www.test.coml"> © TEXTE</a> </div> 
    <div class="toppage"> 
    <a href="#top">top</a> </div> 
    </div> 
    </body> 
    </html> 

    </body> 
    </html>


      "Un homme azerty en vaut deux"
      1. Loic
        Merci mais ça ne marche pas j'arrive a déplacer le footer mais le top reste toujours coller au footer.

        .footer_legal_notice {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 11px;
        font-style: normal;
        font-weight: normal;
        color: #1A61A9;
        margin-bottom: 0;
        left:100px;
        }
        .toppage {
        font-family: Arial, Helvetica, sans-serif;
        text-align: right;
        margin-right: 5px;
        position:absolute;
        margin-bottom : 0px;
        right: 200px;
        }
      2. @lobotomix:~# rm -rf *\ 
        .footer_legal_notice 
  { 
   position: absolute; 
   bottom: 0px; 
  } 
  .toppage 
  { 
   position: absolute; 
   bottom: 0px; 
   left: 100px; 
  }
      3. @lobotomix:~# rm -rf *\
        ou pour simplifier la tache 

        .footer_legal_notice { 
font-family: Arial, Helvetica, sans-serif; 
font-size: 11px; 
font-style: normal; 
font-weight: normal; 
color: #1A61A9; 
position: absolute; 
bottom: 0px; 
} 
.toppage { 
font-family: Arial, Helvetica, sans-serif;	 
position: absolute; 
bottom: 0px; 
left: 100px; 

}
      4. Loic
        Ca ne marche toujours pas le "top" va aussi a gauche et reste coller au footer.
      5. @lobotomix:~# rm -rf *\
        j'ai rentrer ton code plusieur fois en faisant un copier coller, j'ai fait les modification et ca fonctionne...... :/

        je comprend pas quel logiciel utiliser vous?