CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur: Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus! |
| [RESOLU] Problèmes de footer | |
| Akya
{ Membre }
Messages : 207
| Bonsoir à tous, Je travaille activement sur un site internet qui trainait déjà depuis un petit moment. Je rencontre deux soucis avec le footer que j'aimerai finir au plus vite pour me lancer dans la suite. - Impossible de mettre une couleur de fond… Je comprends absolument pas pourquoi, j'ai essayé avec le background-color et le background seul, ça ne fonctionne pas… Je n'ai rien fait de plus que sur ma page d'accueil, où la couleur de fond par exemple est bien présente… - J'aimerai (et je cherche par tout les moyens), à ce que mon footer ne traine pas en plein milieu de ma page, et se colle en bas, et y reste. Y'a pas moyen non plus. Voici les codes : CSS - Code:
-
.footer { background-color:#FFF; height:200px; width:100%; padding: 0; margin: 0; z-index:auto; vertical-align: initial; display: inline; } .facebook { position: relative; font-size: 20px; height: 2em; width: 2em; background: #CCC; display: block; border-radius: 0.3em; opacity: 0.8; -webkit-transition: opacity 0.5s ease-in-out;/*chrome*/ -moz-transition: opacity 0.5s ease-in-out;/*mozilla*/ transition: opacity 0.5s ease-in-out;/*autre navigateur*/ } .facebook:hover { opacity: 1; }
.facebook::before { left: 0.85em; top: 0.7em; position: absolute; display: block; content: ""; height: 0.3em; width: 0.85em; background: #EDEEE8; } .facebook::after { left: 1.1em; top: 0.1em; position: absolute; display: block; content: ""; height: 1.5em; width: 0.3em; border-radius: 0.4em 0 0 0; border: 0.3em solid #EDEEE8; border-right: 0; border-bottom: 0; } .titre { display:inline-block; color:#f3f3f3; text-decoration:none; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; } .texte { color:#f3f3f3; font-family:Arial, Helvetica, sans-serif; } HTML - Code:
-
<div style"footer"><table width="800" border="0" align="center"> <tr> <th width="200" scope="col"><div class="titre">Récemment...</div></th> <th width="200" scope="col"><div class="titre">Nos Projets</div></th> <th width="200" scope="col"><div class="titre">A Propos</div></th> <th width="200" scope="col"></th> </tr> <tr> <td><div class="texte">Récemment il y a...</div></td> <td><div class="texte">Aucun projet en cours.</div></td> <td><div class="texte">Qui sommes nous ?<br /> Nous contacter</div></td> <td><center><div class="facebook"></div></center></td> </tr> </table></div> Merci d'avance pour l'aide qui sera apportée ! :3 |
Dernière édition par Akya le Mer 29 Jan 2014, 16:02, édité 1 fois | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Serait il possible d'avoir un lien pour voir directement ? Dans ton HTML, tu as un problème pour ta div avec la class "footer". Je pense que tu as eu une petite inattention ^^, c'est pas style"footer" mais class="footer". Après ce changement, normalement mettre une couleur de fond devrait marcher - Code:
-
<div style"footer"> Pour que le footer se colle en bas, il y a pleins de manières différentes, je te conseille de chercher sur Google "sticky footer". Pour ma part en général je ne me casse pas la tête, je fais en sorte que le contenu de la page (au dessus) soit dans une div qui englobe tout, et que cette div ai une hauteur minimum (min-height) pour coller le footer en bas. | | |
| | | Akya
{ Membre }
Messages : 207
| Coucou merci pour ta réponse ! :3
Pour le lien, j'aimerais que personne n'accède au site pour l'instant, mais si c'est vraiment nécessaire, je peux te l'envoyer par MP. A toi de me dire. Que suis-je bête ! En effet, une parfaite faute d'inattention que je viens de corriger. Cependant, ça ne change en rien nos soucis… Bizarre. | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Tu peux mettre le lien sous la balise hide tout simplement sinon. ^^ Par ce que je viens de tester, moi je peux bien changer la couleur de fond maintenant. - Code:
-
[hide]TON LIEN[/hide] | | |
| | | Akya
{ Membre }
Messages : 207
| Voici :
C'est bizarre ça. :/ En tout cas pour la position du footer, dans le pire des cas c'est ce que je ferai, mais dans ce cas j'aimerai au moins supprimer avec certitude les marge entre le bas du footer et la fenêtre, de sorte à ce qu'il soit collé. | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Tiens c'est marrant quand j'avais essayé ça marchait, mais là le BG fonctionne plus o_O. Pour la class footer, enlève le "display:inline" ^^ et le fond se remettra (si ça ça marche pas, alors je vois pas XD). - Citation :
- supprimer avec certitude les marge entre le bas du footer et la fenêtre, de sorte à ce qu'il soit collé.
Est ce que tu pourrais me faire une screen de ces marges ? Car chez moi, le footer est simplement juste après la barre du haut. | | |
| | | Akya
{ Membre }
Messages : 207
| Ok nickel ! la couleur est bien apparue. Alors j'ai pas compris précisément ce que tu voulais, mais voilà un screen de ce que moi, je recherche. Je pensais que - Code:
-
padding: 0; margin: 0; suffiraient, mais visiblement, non. Screen : https://i.servimg.com/u/f55/12/03/49/16/captur11.jpg | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Ok ok, le footer se place ici justement par ce qu'il n'y a pas encore de contenu dans ta page As tu regardé sur Google les différents tutoriels pour faire un "sticky footer" (il y en a en Français au cas où tu n'es pas super à l'aise en anglais) ? | | |
| | | Akya
{ Membre }
Messages : 207
| Oui, j'ai trouvé ceci : http://www.cssstickyfooter.com/fr/comment-faire.html Je viens d'essayer mais ça ne fonctionne pas… Voici ma page : - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Document sans titre</title> <style type="text/css"> html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer */
#basfooter {position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both;} .footer { background-color:#CCC; height:200px; width:100%; padding: 0; margin: 0; z-index:auto; vertical-align: initial; } .facebook { position: relative; font-size: 20px; height: 2em; width: 2em; background: #CCC; display: block; border-radius: 0.3em; opacity: 0.8; -webkit-transition: opacity 0.5s ease-in-out;/*chrome*/ -moz-transition: opacity 0.5s ease-in-out;/*mozilla*/ transition: opacity 0.5s ease-in-out;/*autre navigateur*/ } .facebook:hover { opacity: 1; }
.facebook::before { left: 0.85em; top: 0.7em; position: absolute; display: block; content: ""; height: 0.3em; width: 0.85em; background: #EDEEE8; } .facebook::after { left: 1.1em; top: 0.1em; position: absolute; display: block; content: ""; height: 1.5em; width: 0.3em; border-radius: 0.4em 0 0 0; border: 0.3em solid #EDEEE8; border-right: 0; border-bottom: 0; }
.googleplus { position: relative; font-size: 20px; height: 2em; width: 2em; background: #CCC; display: block; border-radius: 0.3em; overflow: hidden; opacity: 0.8; -webkit-transition: opacity 0.5s ease-in-out;/*chrome*/ -moz-transition: opacity 0.5s ease-in-out;/*mozilla*/ transition: opacity 0.5s ease-in-out;/*autre navigateur*/ } .googleplus:hover { opacity: 1; } .googleplus::before { left: -0.1em; font-size: 2.9em; top: -0.36em; position: absolute; display: block; content: "g"; color: #EDEEE8; font-family: georgia; } .googleplus::after { left: 0.9em; top: -0.3em; position: absolute; display: block; content: "+"; font-size: 1.25em; font-weight: bold; color: #EDEEE8; font-family: georgia; }
.titre { display:inline-block; color:#f3f3f3; text-decoration:none; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; } .texte { color:#f3f3f3; font-family:Arial, Helvetica, sans-serif; } </style> </head>
<body> <div id="wrap">
<div id="main" class="clearfix"> <div class="footer"><table width="800" border="0" align="center"> <tr> <th width="200" scope="col"><div class="titre">Récemment...</div></th> <th width="200" scope="col"><div class="titre">Nos Projets</div></th> <th width="200" scope="col"><div class="titre">A Propos</div></th> <th width="200" scope="col"></th> </tr> <tr> <td><div class="texte">Récemment il y a...</div></td> <td><div class="texte">Aucun projet en cours.</div></td> <td><div class="texte">Qui sommes nous ?<br /> Nous contacter</div></td> <td><center><p><div class="facebook"></div><div class="googleplus"></div></p> </center></td> </tr> </table></div> </div>
</div>
<div id="basfooter">
</div> </body> </html> | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Attention, je pense tu as sauté quelques étapes du tutoriel ^^ J'ai corrigé ton code en suivant le tutoriel, chez moi cela fonctionne : - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Document sans titre</title> <style type="text/css"> html, body, #wrap {height: 100%; margin:0}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 200px;} /* must be same height as the footer */ .footer { background-color:#CCC; width:100%; padding: 0; z-index:auto; vertical-align: initial; position: relative; margin-top: -200px; /* negative value of footer height */ height: 200px; clear:both; } .facebook { position: relative; font-size: 20px; height: 2em; width: 2em; background: #CCC; display: block; border-radius: 0.3em; opacity: 0.8; -webkit-transition: opacity 0.5s ease-in-out;/*chrome*/ -moz-transition: opacity 0.5s ease-in-out;/*mozilla*/ transition: opacity 0.5s ease-in-out;/*autre navigateur*/ } .facebook:hover { opacity: 1; }
.facebook::before { left: 0.85em; top: 0.7em; position: absolute; display: block; content: ""; height: 0.3em; width: 0.85em; background: #EDEEE8; } .facebook::after { left: 1.1em; top: 0.1em; position: absolute; display: block; content: ""; height: 1.5em; width: 0.3em; border-radius: 0.4em 0 0 0; border: 0.3em solid #EDEEE8; border-right: 0; border-bottom: 0; }
.googleplus { position: relative; font-size: 20px; height: 2em; width: 2em; background: #CCC; display: block; border-radius: 0.3em; overflow: hidden; opacity: 0.8; -webkit-transition: opacity 0.5s ease-in-out;/*chrome*/ -moz-transition: opacity 0.5s ease-in-out;/*mozilla*/ transition: opacity 0.5s ease-in-out;/*autre navigateur*/ } .googleplus:hover { opacity: 1; } .googleplus::before { left: -0.1em; font-size: 2.9em; top: -0.36em; position: absolute; display: block; content: "g"; color: #EDEEE8; font-family: georgia; } .googleplus::after { left: 0.9em; top: -0.3em; position: absolute; display: block; content: "+"; font-size: 1.25em; font-weight: bold; color: #EDEEE8; font-family: georgia; }
.titre { display:inline-block; color:#f3f3f3; text-decoration:none; text-transform:uppercase; font-family:Arial, Helvetica, sans-serif; } .texte { color:#f3f3f3; font-family:Arial, Helvetica, sans-serif; } </style> </head>
<body> <div id="wrap"> CONTENU DE LA PAGE <div id="main" class="clearfix"></div> </div> <div class="footer"><table width="800" border="0" align="center"> <tr> <th width="200" scope="col"><div class="titre">Récemment...</div></th> <th width="200" scope="col"><div class="titre">Nos Projets</div></th> <th width="200" scope="col"><div class="titre">A Propos</div></th> <th width="200" scope="col"></th> </tr> <tr> <td><div class="texte">Récemment il y a...</div></td> <td><div class="texte">Aucun projet en cours.</div></td> <td><div class="texte">Qui sommes nous ?<br /> Nous contacter</div></td> <td><center><p><div class="facebook"></div><div class="googleplus"></div></p> </center></td> </tr> </table></div>
</body> </html> | | |
| | | Akya
{ Membre }
Messages : 207
| Ah oui en effet, j'ai du louper quelque chose… Merci bien en tout cas, ça fonctionne maintenant. En revanche, j'ai encore deux micros soucis, ça devrait aller beaucoup mieux une fois ceux ci résolu. - Depuis que j'ai mis ce système en place, avec ce tutoriel, ma page c'est allongée de quelques pixels sur la largeurs, du coup ça me créé un ascenseur horizontal, qui ne devrait pas être là. J'ignore si quand toi tu visualises la page ça le fait, mais chez moi en tout ce c'est ça qui a déclenché cet espace inexpliqué. - Concernant le tableau même présent dans mon footer, les logos facebook et google + se mettent l'un au dessus de l'autres, au lieu d'être côte à côte… Comment gérer cela ? Merci infiniment pour ton aide en tout cas ! | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| J'ai l'impression que le problème vient du bouton "power". Essaye de commenter cette partie là dans le HTML, pour vérifier. Je crois que cela vient d'un margin-left que tu as mis à plus de 1200px, un truc comme ça. Pour les boutons FB et Google+, dans le CSS tu leur as chacun mis "display: block", essaye en remplaçant par "display: inline-block" ^^ Dis moi si tout cela fonctionne ! | | |
| | | Akya
{ Membre }
Messages : 207
| Waouh on peut dire que t'es franchement calée. Ces deux soucis sont résolus sans soucis, merci bien ! J'en arrive avec un troisième. /PAS TAPEY/ J'espère vraiment que tu m'en voudras pas… J'suis désolée d'abuser de ta gentillesse. ^^" J'ai pensé le site de sorte à en faire quelque chose de dynamique et facile à modifier. Par conséquent, j'ai une page concernant le header (entre autre la barre de navigation et le logo), et le footer, comme tu as pu le voir. Du coup, dans mes pages, j'inclue ces deux "pièces" sous la forme suivante : - Code:
-
<?php include_once("header.php") ?> Jusque là ça fonctionne très bien. Oui, mais en regardant de plus près le code du footer, il y a bien la ligne - Code:
-
<div id="wrap">CONTENU DE LA PAGE </div> Du coup, on tourne en rond sans rien pouvoir faire… Car mon footer est censé être un "module" à ajouter, mais qui ne doit pas recevoir. Et du coup, par conséquent, tu constateras par toi même sur le lien suivant que dès que j'intègre du contenu avec le système expliqué ci-dessus, j'ai un grand espace entre le contenu et le footer… | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Hum, j'dois être un peu fatiguée après ma journée de cours XD, tu pourrais me copier / coller ton code en mettant un commentaire là où ça pose problème pour que je comprenne mieux le problème (oui, j'ai répété 2 fois le mot problème, 3 fois maintenant, je n'ai officiellement plus toute ma tête \ o /) ? Edit : rajoute aussi le contenu des fichiers php à inclure pendant que tu es lancée sur le Copier / coller xD | | |
| | | Akya
{ Membre }
Messages : 207
| Ahahah ! Y'a aucun soucis, ça se comprends. Je vais essayé de ré-expliquer tranquillement. MDR Alors. Là, dans l'immédiat, j'ai trois pages qui m'intéressent. header.php, footer.php et essai.php (le lien que je t'ai fournie plus haut) Le header et le footer sont tout les deux intégrés dans les pages du site internet par le biais de : - Code:
-
<?php include_once("header.php") ?> - Code:
-
<?php include_once("footer.php") ?> Ce qui donnerait donc pour une page parfaitement simpliste : - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Le luxe pour ce félin du quotidien | KITTYPAWS.FR | Mon chat & moi</title> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.vegas.min.js"></script> <link rel="stylesheet" type="text/css" href="/js/jquery.vegas.min.css" /> <style type="text/css">
</style> </head>
<body bgcolor="#e9e7e6"> <?php include_once("analyticstracking.php") ?> <?php include_once("header.php") ?> <SCRIPT type="text/javascript"> $( function() { $.vegas('slideshow', { delay:5000, backgrounds:[ { src:'/img/slide01.jpg', fade:1000 }, { src:'/img/slide02.jpg', fade:1000 }, { src:'/img/slide03.jpg', fade:1000 } ] })('overlay', { src:'/vegas/overlays/11.png' }); }); </SCRIPT> <?php include_once("article.php") ?> <?php include_once("footer.php") ?> </body> </html> La partie suivante : - Code:
-
<?php include_once("article.php") ?> est en fait l'espèce de fiche de présentation que tu peux voir sur le lien suivant : Je l'ai en fait isolé dans une autre page php afin que ça soit plus simple au niveau de la gestion. (Car je prévoie de lier le tout à une base de données et donc de gérer mes futurs articles par cette base de données) Le soucis est : A cause du code du footer, et plus précisément la partie suivante : - Code:
-
<div id="wrap">CONTENU DE LA PAGE </div> J'ai en premier lieu un grand espace qui se créé entre ma fiche et mon footer, En deuxième lieu, cela m'oblige à gérer mon contenu via ma page footer.php, or je ne veux plus avoir à toucher à cette page, je souhaite gérer mon contenu dans des pages à part, pour la suite. Je me doute bien que ça doit pas être simple de me déchiffrer, donc j'te souhaite bon courage. | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Ok je comprends maintenant En fait, le truc c'est que en fait tu devrais plutôt avoir quelque chose comme ceci : - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Le luxe pour ce félin du quotidien | KITTYPAWS.FR | Mon chat & moi</title> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.vegas.min.js"></script> <link rel="stylesheet" type="text/css" href="/js/jquery.vegas.min.css" /> <style type="text/css">
</style> </head>
<body bgcolor="#e9e7e6"> <?php include_once("analyticstracking.php") ?> <div id="wrap"> <?php include_once("header.php") ?>
<div id="main" class="clearfix"> <?php include_once("article.php") ?> </div> </div> <?php include_once("footer.php") ?>
<script type="text/javascript"> $( function() { $.vegas('slideshow', { delay:5000, backgrounds:[ { src:'/img/slide01.jpg', fade:1000 }, { src:'/img/slide02.jpg', fade:1000 }, { src:'/img/slide03.jpg', fade:1000 } ] })('overlay', { src:'/vegas/overlays/11.png' }); }); </script> </body> </html> D'après ce que j'ai compris dans les explications, le contenu autre que le footer doit etre dans le #wrap. | | |
| | | Akya
{ Membre }
Messages : 207
| Je teste ça ce soir, là je suis sur la tablette donc j'ai pas ce qu'il faut. Mais en observant le code, en effet, ça ressemblerait sans doute a quelquel chose comme cela. Et donc du coup, j'aurais plus qu'à remplacer - Code:
-
<?php include_once('article.php') ?> Par la page de contenu concernée puisque ça ne sera pas toujours des articles. Je te tiens au courant ce soir, si jamais ça fonctionne ou pas. | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Oui normalement c'est ça | | |
| | | Akya
{ Membre }
Messages : 207
| OK donc ça fonctionne bien, par contre ! J'ai du laisser le code suivant : - Code:
-
<div id="main" class="clearfix"></div> car sinon ma fiche de collait avec le footer. Du coup, il faudrait que je gère la hauteur du clearfix, pour baisser un peu la hauteur. Je fais ça en css ? Ou alors, peut être que ça correspond à - Code:
-
clear:both; dans ma class ".footer" ? | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| - Akya a écrit:
- OK donc ça fonctionne bien, par contre ! J'ai du laisser le code suivant :
- Code:
-
<div id="main" class="clearfix"></div> car sinon ma fiche de collait avec le footer. J'ai pas compris pourquoi tu mets "j'ai du laisser". En effet, c'est normal de le laisser, cela fait parti du tuto ^^ | | |
| | | Akya
{ Membre }
Messages : 207
| Je voulais te faire une capture d'écran pour te montrer ce que ça faisait sans le clearfixe, mais en effet, maintenant ça fonctionne. C'est à rien y comprendre. xD En tout cas, ce topic touche à sa fin. Je voulais juste savoir si niveau JS tu t'y connaissais bien ? J'ai un autre soucis qui concerne l'espèce de diaporama de fond que tu as certainement pu voir, donc si tu penses pouvoir m'aider j'ouvrirai un autre sujet. 3
Merci infiniment pour ton aide sur le footer en tout cas, c'est clairement appréciable, tu as de très bonnes compétences ! Et au fait Mamzelle, j'suis Cali93110 sur le FdF, et tu m'es déjà venu en aide dernièrement pour d'autres choses. ^_^ Je tenais simplement à te le dire, t'as pas du faire le rapprochement à mon avis, vu que je n'ai pas le même pseudo.
Merci encore ! | | |
| | | Nihil
{ Modérateur }
Messages : 1216
| Ah oui je n'avais pas fait le rapprochement . Je ne passe plus trop sur FdF depuis 2 semaines, car j'ai un peu plus de boulot au niveau des cours ^^ Oui je suis à l'aise en JS, donc n'hésite pas à ouvrir un nouveau topic (: | | |
| | | Akya
{ Membre }
Messages : 207
| Oui, c'est bien pour ça que je te l'ai mentionné. Ah nickel ! Je fonce ouvrir le topic dans ce cas. Merci encore ! | | |
| | | Contenu sponsorisé
| | | | | [RESOLU] Problèmes de footer | |
|
Sujets similaires | |
|
| Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
| Partenaires Or
|