AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Code promo Nike : -25% dès 50€ d’achats sur tout le site Nike
Voir le deal

    Un "Footer" (img bas de page) sur votre Forum

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mer 2 Sep 2009 - 21:28



    La question revenant relativement souvent, j'explique ici comment placer une image de bas de page sur vos forum.

    Allez dans le panneau > Affichage > Templates > "overall_footer_end"

    Vous devez placer le code suivant (donnez à l'id le nom que vous voulez) :
    Code:
    <div id="newbottom">
    </div>

    Juste avant ce bout de code :
    Code:
    <script type="text/javascript">
    //<![CDATA[
       fa_endpage();
    //]]>
    </script>
    </body>
    </html>

    (à la fin du templates donc.)


    Une fois que vous avez cela, rien n'apparaitra sur votre forum, normal, vous avez juste signalé une division dans cet endroit, à vous de lui donner la forme voulue (taille, fond, etc...).
    Pour cela, il vous faut aller dans :
    Affichage > Image & Couleurs > Couleurs > Feuille CSS


    Puisque vous avez crée une "div" avec un "id", il vous faudra commencer votre code par "#".
    Code:
    #newbottom
    {
    clear: both;
    margin: auto;
    width: 100%;
    background-image: url(http://host.image.files.free.fr/host/4a04c4821c594back-bottom.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    }

    Explications :
    clear: both => enlève de manière sûre les mises en forme de division précédentes (surtout lorsqu'il y a des "float" (flottement) à droite ou à gauche).
    margin: auto : centre l'image si elle ne fait pas toute la largeur
    width: 100% : largeur du bloc, si l'image ne prend pas toute la largeur, vous pouvez diminuez le width en % ou mettre une largeur en px.
    background-image : c'est l'adresse de votre image de fond
    background-repeat : la répétition du fond, ici elle ne se répètera pas, si vous voulez qu'elle se répète enlevez simplement la ligne, mais pour une image de pied de page c'est assez rare...
    background-position: la position du fond, ici au centre
    height: sa hauteur en pixel, ici 500px car j'ai pris en exemple les codes de N-U pour le thème actuel


    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 16:12, édité 1 fois



    sign
    Riku Asakura
    Riku Asakura
    MasculinAge : 37Messages : 5736

    Jeu 3 Sep 2009 - 10:51

    Bien joué mon cher !
    Fallait bien que tu le files un jour ou l'autre pour alléger ta boîte MP XD
    Bises



    footer - Un "Footer" (img bas de page) sur votre Forum 090531062304944749
    Yo ho, all together
    Hoist the colours high
    Heave oh, thieves and beggars
    Never shall we die
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 3 Sep 2009 - 14:59

    Clair XD Et j'en ai pas mal d'autres à passer, mais je les donnerai au fur et à mesure, histoire de pas tout dévoiler d'un coup Razz



    sign
    Anonymous
    Invité

    Jeu 3 Sep 2009 - 17:09

    çà claque O.O Merci beaucoup Cap'tain! *a tout plein d'idées de thème en tête XD*

    J'avoue que j'me creusais la tête depuis quelques temps déjà, et donc c'est cool d'avoir l'astuce ^^

    *pars bidouiller sur son forum de test*
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 3 Sep 2009 - 18:15

    Ah! Merci PW ! Je commençais à me demander si cette astuce intéressait quelqu'un ou pas XD



    sign
    Anonymous
    Invité

    Jeu 3 Sep 2009 - 19:28

    T'inquiète pas que moi çà m'intéressait beaucoup, j'avais plein d'idée et je voyais pas comment faire, maintenant si! ^^ Nyark nyark *imagine un thème avec des trucs genre "pellicule photo" en haut et en bas* Donc encore merci ^^
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Jeu 3 Sep 2009 - 19:40

    Ravi que ça te permette d'explorer d'autres possibilités Wink



    sign
    bisow'
    bisow'
    FémininAge : 35Messages : 202

    Ven 4 Sep 2009 - 11:01

    après bidouillage, j'ai remarqué qu'on pouvait finalement adapter ta technique, au header en le fixant tout en haut, sans déformer la page et sans espace de cadre :)
    Merci pour ce tip ! ^^




    footer - Un "Footer" (img bas de page) sur votre Forum 4aad2aac9e20atrue-blood
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Ven 4 Sep 2009 - 12:34

    Oui bien sûr ! ^^ C'est de cette façon que je place mes headers de toute manière, je comptais mettre l'astuce également... avec d'autres possibilités.



    sign
    beuns34
    beuns34
    MasculinAge : 33Messages : 18

    Mar 13 Oct 2009 - 16:47

    Ca marche aussi avec la version PunBB maintenant que les templates sont modifiable??
    EN tout cas pas mal cette astuce =)
    Lucky Numb£r
    Lucky Numb£r
    MasculinAge : 31Messages : 1972

    Mar 13 Oct 2009 - 19:24

    Oui ça marche en PunBB et oui l'astuce est géniale Razz En fait le Cap'tain il aime trop mettre des tables et des div un peu partout dans les templates XD



    Yosuke
    Yosuke
    MasculinAge : 30Messages : 2665

    Mar 13 Oct 2009 - 20:14

    Sa va m'aider puor les thèmes sa, thx captain' =D



    footer - Un "Footer" (img bas de page) sur votre Forum 817834DRWHOSIGN
    Kit by Yosuke
    avatar
    fascicularia
    MasculinAge : 56Messages : 189

    Mar 27 Oct 2009 - 0:37

    N'est il pas possible d'obtenir le même effet en utilisant un script contenant la balise "position : absolute" ?
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 27 Oct 2009 - 10:34

    Si, mais c'est plus "chiant" à positionner, là ton image sera dans ton "bodyline", donc déjà légèrement centré, suffit que tu la centres complètement et enlève l'espace du bas.



    sign
    Skull-piou
    Skull-piou
    MasculinAge : 31Messages : 82

    Sam 7 Nov 2009 - 16:14

    Salut, moi, il ne ce passe RIEN ^^
    Peut-être par ce que ma CB est en bas? :/


    Edit: Ca marche, j'ai juste une iamge (celle que j'ai mise pour le fond) et c'est en bas des liens...
    Comment faire comme vous? Juste après le QEEL?


    Edit: C'est bon, mais comment faire un lien iamge dans les CSS? XD



    footer - Un "Footer" (img bas de page) sur votre Forum 136182469sans-titre-2
    kute aka stormwalker
    kute aka stormwalker
    MasculinAge : 31Messages : 52

    Dim 8 Nov 2009 - 20:08

    Donc voila j'ai mon image a ce niveau la tout va bien.. et merci :)

    Mais maintenant j'aimerai mettre mes image top site par dessus..

    comment je peut faire?



    footer - Un "Footer" (img bas de page) sur votre Forum 1439949412-test-signature
    Zaon
    Zaon
    MasculinAge : 32Messages : 17

    Mar 17 Nov 2009 - 7:03

    Bonjour moi j'ai fait ce que vous avez dit mais ca m'écrit : La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte. J'ai pas compri vous pouvez m'aidez ?
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Mar 17 Nov 2009 - 11:37

    Vérifies que tu aies bien copié tout ces symboles : { et } Ils doivent encadrer dans le css toutes les informations (instructions), sans quoi ça t'affiche une erreur.



    sign
    Sackboy
    Sackboy
    MasculinAge : 28Messages : 3009

    Sam 13 Mar 2010 - 3:19

    [remontage de topic ON]J'ai eu beau vérifier,ça me met toujours "La balise a été fermée avant d'avoir été ouverte ou la balise n'a pas été ouverte."
    Voici mon code :

    Code:
    <div id="newbottom">
    </div>
    href="/{switch_view_contact.U_CONTACT}" class="copyright" rel="nofollow">{switch_view_contact.L_CONTACT}</a>
                      <!-- END switch_view_contact -->
                      {U_ABUSE} {U_BLOG}
                  </div>
                </div>
            </div>
          </td>
      </tr>
    </table>
    <script type="text/javascript">
    //<![CDATA[
      fa_endpage();
    //]]>
    </script>
    </body>
    </html>
    #newbottom
    {
    clear: both;
    background-image: url(http://d3.e-loader.net/u3FkvLCzCK.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    }

    Merci !



    footer - Un "Footer" (img bas de page) sur votre Forum LKdEVH151o
    Raik'n
    Raik'n
    MasculinAge : 29Messages : 765

    Jeu 15 Juil 2010 - 16:11

    Il me semble que j'ai tout bien suivi. Néanmoins, à l'arrivée, le résultat attendu n'est pas là ... Je voulais laisse observer --> http://op-the-last-epic.forumactif.com/forum.htm

    Voici mes codes:

    Template :

    Spoiler:

    CSS:

    Spoiler:

    Merci à ceux qui tenteront de m'aider :S



    footer - Un "Footer" (img bas de page) sur votre Forum 789qovkj
    « Tout ce qui ne nous tue pas nous rend simplement plus .. bizarre. »
    Dodo77
    Dodo77
    MasculinAge : 30Messages : 1604

    Jeu 15 Juil 2010 - 17:10

    (Je fais le thème du forum donc j'ai accès au panneau)
    Bon j'ai essayer de rajouter une largeur dans les CSS:

    height: 500px;
    leight: 1400px;
    }

    Mais toujours rien .. :/
    J'ai aussi jouer avec les background: (top) center
    Mais sans réussite x/



    footer - Un "Footer" (img bas de page) sur votre Forum Noelcopie
    Pti' Biscuit
    Pti' Biscuit
    MasculinAge : 29Messages : 1691

    Dim 1 Aoû 2010 - 12:19

    Merci beaucoup c'est génial \o/



    footer - Un "Footer" (img bas de page) sur votre Forum 2k0uoy

    ~ Canonnier of Calypso ~
    Chamalow
    Chamalow
    FémininAge : 36Messages : 6

    Jeu 27 Jan 2011 - 17:37

    Bonjour :)

    J'ai un ptit soucis avec le tuto, parce que moi ça marche pas^^

    Je vous explique :)

    J'aurais aimé avoir un footer qui fasse la largeur de l'écran malgré les différentes résolutions, mais qui ne se répète pas puisque ça sera une image travaillée, sauf qu'en mettant les codes fournis, le footer s'arrête à quelques millimètres de l'écran de chaque côté...

    Est-ce que vous pourriez m'aider s'il vous plait ?



    footer - Un "Footer" (img bas de page) sur votre Forum 1061214049
    Undomiel
    Undomiel
    FémininAge : 40Messages : 63

    Dim 30 Jan 2011 - 15:43

    J adore vraiment ce tutoriel... maintenant je n'ai plus qu'a trouver comment mettre mon header et j'aurais presque terminer. Il ne me reste pas grand chose pour terminer mon theme.
    Le plus dur sera pour la suite :).



    footer - Un "Footer" (img bas de page) sur votre Forum Signat19
    ~ɷ̰~ Le chant du cygne est une mélodie que murmure les esprits au crepuscule de nos vies ~ɷ̰~
    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Dim 30 Jan 2011 - 15:56

    L'inconvénient de cette méthode est que le footer fait la largeur de la page (bodylinwidth) du forum... Je posterai une autre méthode permettant avec le CSS3 de mettre à la fois un header, un footer... et même un fond qui se répète dans un même code^^



    sign
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 7:35