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

8 réponses

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