Se connecter avec
S'enregistrer | Connectez-vous

Footer

Dernière réponse : dans Programmation

Bonjour,
j'aimerais créer un footer en bas de mon site qui soi assez discret et en harmonie avec mon site, mais je ne sais aps comment le programmer dans mon css :( 

voici ce que j'ai trouver dans mon css en ce qui concerne le footer :

  1. /* Footer */
    

  2.  
  3. #footer {
    

  4. 	height: 50px;
    

  5. 	margin: 0 auto;
    

  6. 	padding: 0px 0 15px 0;
    

  7. 	background: #ECECEC;
    

  8. 	border-top: 1px solid #DEDEDE;
    

  9. 	font-family: Arial, Helvetica, sans-serif;
    

  10. }
    

  11.  
  12. #footer p {
    

  13. 	margin: 0;
    

  14. 	padding-top: 20px;
    

  15. 	line-height: normal;
    

  16. 	font-size: 9px;
    

  17. 	text-transform: uppercase;
    

  18. 	text-align: center;
    

  19. 	color: #A0A0A0;
    

  20. }
    

  21.  
  22. #footer a {
    

  23. 	color: #8A8A8A;
    

  24. }


Comment le modifier pour donner un résultat alliant le style de mon site (http://megloc.fr) et la disposition comme sur le SDZ, le bas de IDN ou sigid.fr ?

Merci d'avance
AUrélien

Autres pages sur : footer

Lassé par la pub ? Créez un compte
Expert Programmation

Bah qu'est ce qui t'en empèche?

  1. <div style="float: left">
    

  2.    <ul>
    

  3.         <li><a href="">Lien</a></li>
    

  4.         <li><a href="">Lien</a></li>
    

  5.    </ul>
    

  6. </div>
    

  7. <div style="float: left">
    

  8.    <ul>
    

  9.         <li><a href="">Lien</a></li>
    

  10.         <li><a href="">Lien</a></li>
    

  11.    </ul>
    

  12. </div>


Enleve le height du footer dans ton css...

PS: C'est un code d'exemple, il ne s'adaptera peut être pas à ton site!

Ok, sa donnerait un truc comme sa :
CSS :
  1. /* Footer */
    

  2. #footer {
    

  3.     margin: 0 auto;
    

  4.     padding: 0px 0 15px 0;
    

  5.     background: #ECECEC;
    

  6.     border-top: 1px solid #DEDEDE;
    

  7.     font-family: Arial, Helvetica, sans-serif;
    

  8. }
    

  9. #footer p {
    

  10.     margin: 0;
    

  11.     padding-top: 20px;
    

  12.     line-height: normal;
    

  13.     font-size: 9px;
    

  14.     text-transform: uppercase;
    

  15.     text-align: center;
    

  16.     color: #A0A0A0;
    

  17. }
    

  18. #footer a {
    

  19.     color: #8A8A8A;


Et pour le code de la page : 
  1. /* contenu de la page */
    

  2.  
  3. <div id="footer">
    

  4. 	<p>Sur le site</p>
    

  5. 			<div style="float: left">
    

  6.   <ul>
    

  7.         <li><a href="acceuil"><a href="http://megloc.fr&lt" target="_blank">http://megloc.fr&lt</a>;/a></li>
    

  8.         <li><a href="appartement"><a href="http://megloc.fr/appart.html&lt" target="_blank">http://megloc.fr/appart.html&lt</a>;/a></li>
    

  9. 		 /* la suite des pages */
    

  10.   </ul>
    

  11. </div>
    

  12. <div style="float: left">
    

  13. 		<p>Autres</p>
    

  14.  <ul>
    

  15.         <li><a href="mention légales"><a href="http://megoc.fr/jesaitplus^^.html&lt" target="_blank">http://megoc.fr/jesaitplus^^.html&lt</a>;/a></li>
    

  16.         <li><a href="conditions générales de vente"><a href="http://megloc.fr/autre/cgdv.html&lt" target="_blank">http://megloc.fr/autre/cgdv.html&lt</a>;/a></li>
    

  17.   </ul>
    

  18. </div>
    

  19. 		<p>Copyright © 2011 megloc.fr Tous droits réservé.</p>
    

  20. 	</div>
Expert Programmation 

  1. #footer {
  2.     width: 100%;
  3.     padding: 10px;
  4.     background: #ECECEC;
  5.     border-top: 1px solid #DEDEDE;
  6.     font-family: Arial, Helvetica, sans-serif;
  7. }
  8. #footer li {
  9.     list-style-type: none;
  10.     color: #A0A0A0;
  11. }
  12. #footer div {
  13.     margin: 0 20px 0 0;
  14.     float: left;
  15.     width: 33%;
  16. }
  17. #footer a {
  18.     color: #8A8A8A;
  19. }



  1. <div id="footer">
  2.     <h3>Sur le site</h3>
  3.             <div>
  4.   <ul>
  5.         <li><a href="acceuil"><a href="http://megloc.fr&lt" target="_blank">http://megloc.fr&lt</a>;/a></li>
  6.         <li><a href="appartement"><a href="http://megloc.fr/appart.html&lt" target="_blank">http://megloc.fr/appart.html&lt</a>;/a></li>
  7.          /* la suite des pages */
  8.   </ul>
  9. </div>
  10. <div>
  11.         <h3>Autres</h3>
  12. <ul>
  13.         <li><a href="mention légales"><a href="http://megoc.fr/jesaitplus^^.html&lt" target="_blank">http://megoc.fr/jesaitplus^^.html&lt</a>;/a></li>
  14.         <li><a href="conditions générales de vente"><a href="http://megloc.fr/autre/cgdv.html&lt" target="_blank">http://megloc.fr/autre/cgdv.html&lt</a>;/a></li>
  15.   </ul>
  16. </div>
  17.         <p>Copyright © 2011 megloc.fr Tous droits réservé.</p>
  18.     </div>



Essaye ces modifs, c'est difficile de faire un code quand on pas la structure sous les yeux...
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde