Pied de page html

Loic -
Loic - 7 août 2012 à 15:08

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.

Afficher la suite

A voir également:

Pied de page html
Editeur html - Télécharger - HTML
Supprimer page word - Guide
Imprimer excel sur une page - Guide
Page d'accueil - Guide
Calcul km marche à pied gratuit - Télécharger - Sport

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.

Réponse 1 / 8
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

<!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>
0
1. @lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208
  
  pour top page vous avez mi une class alors faut pas mettre un # mais un " . "
  
  0
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.
  
  0
3. @lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208
  
  ha oui c est un pied de page je suis bete...attend
  
  0
Réponse 2 / 8
mimigenie Messages postés 1180 Date d'inscription Statut Membre Dernière intervention 314

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
0
Réponse 3 / 8
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

<!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
0
1. @lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208
  
  penser a mettre resolu
  
  0
Réponse 4 / 8
Loic

Ça ne marche toujours pas maintenant le top est partit au milieu complétement a droite.
0
1. @lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208
  
  chez moi ca fonctionne, je comprend pas ya pas plus simple comme code
  
  0
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.
  
  0
3. @lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208
  
  ha mais je croi comprendre donner tout votre code et ca ira mieux
  
  0
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>
  
  0
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 8
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

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/
0
1. Loic
  
  Chez moi je n'ai aucune erreur j'ai sans doute du oublier des balises dans le copier coller.
  
  0
Réponse 6 / 8
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.
0
1. @lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208
  
  ok je te la fait attend
  
  0

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

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"

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;
}
0

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

.footer_legal_notice 
  { 
   position: absolute; 
   bottom: 0px; 
  } 
  .toppage 
  { 
   position: absolute; 
   bottom: 0px; 
   left: 100px; 
  }

@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

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; 

}

Loic

Ca ne marche toujours pas le "top" va aussi a gauche et reste coller au footer.
0
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

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?
0

Réponse 8 / 8
@lobotomix:~# rm -rf *\ Messages postés 1392 Date d'inscription Statut Membre Dernière intervention 208

j ai un petit cadeau pour vous c est rapide a lire et c est bien utile
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
0

Pied de page html

8 réponses

Discussions similaires

Newsletters