AccueilFAQRechercherMembresGroupesS'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.


    Astuce ▬ Mettre en place les logos de partenariat dans le footer.

    Partagez
    avatar
    Rozenbrez
    FémininAge : 26Messages : 1349

    le Jeu 29 Jan 2015 - 12:10



    Bonjour, bonsoir:D

    Ceci est mon premier tutoriel. Après la demande de Lisou pour afficher ces partenaires dans le footer, je me suis dit que j'allais le proposer.

    Dans ce tuto je vais vous montrer comment placer ces partenaires en footer de deux manières différentes. Vous avez effectivement le choix de placer vos partenaires de sorte à ce qu'ils soient visible sur toutes les pages de votre forum ou uniquement sur l'index de celui-ci.

    Alors commençons:)

    /!\ Je rappelle que cette section existe en cas de problème!./!\


    I. Visible uniquement sur l'Index du Forum.


    ✘ Mise en page avec scrollbare.

    Aperçus d'un potentiel rendu.

    Comme vous pouvez le voir sur le screen, sur la droite de votre box il y a une scrollbare. Et aussi, la box se trouve entre votre QEEL (Qui Est En Ligne) et votre légende des nouveaux messages, pas de nouveaux messages et forum verrouillé. Ainsi votre boxe et vos partenaires ne sont visibles uniquement que su votre index.

    Le HTML :
    Code:
    <center><div class="titre_footer">Nos Partenaires Footer.</div><div class="partenaire_footer">
      <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div></center>

    Voici donc le bout de code qu'il vous faut. Il est à placer dans le template « index_body » après la « {CHATBOX_BOTTOM} »

    Le CSS :
    Code:

    /** PARTENAIRE Footer**/
    .partenaire_footer {
    background-color:#fff;
    width: 620px;
    height: 50px;
    border: 2px solid red;
    overflow: auto;
    }

    .titre_footer {
    width: 620px;
    height: 25px;
    background-color:#000;
    border: 2px solid red;
    color: #209CC9 !important;
    display: block;
    font-family: Times New Roman !important;
    font-size: 20px;
    text-align: center;}

    /** FIN PARTENAIRE FOOTER **/

    Et en fin le bout de CSS associé. Il est à mettre dans la feuille de style. Vous pouvez tout changer, améliorer, mettre des effets en plus, en moins.

    /!\ Ce qui met en place la scrollbare est « overflow:auto; », donc n'y touchez pas ! /!\

    ✘ Mise en page avec défilement.


    La mise en page consiste à faire défiler les logos de la droite vers la gauche. Pour cela dans votre code HTML vous devez entourer vos logos avec la balise suivante :
    Code:
    <nobr><marquee> ...</marquee></nobr>

    Ce qui donne :


    Et dans votre CSS vous n'avez qu'à régler la hauteur de votre boxe comme bon vous semble et de retirer l'overflow.

    ✘✘ Variante du défilement.

    Comme vue précédemment le défilement se fait de la droite vers la gauche, mais que diriez-vous de varier le défilement, de faire en sorte que lorsqu'on passe sa souris sur un logo le défilement se stop – ce qui est fort appréciable pour une clikeuse de logo partenaire comme moi xD

    ✘✘✘ Variante simple.

    Les variantes simples seront juste de changer le sens du défilement. Au lieu d'aller de droite à gauche, pourquoi ne pas aller de gauche à droite, de bas en haut et de haut en bas. Pour cela il faut mettre un attribut à votre balise. Celui-ci sera « DIRECTION », puis vous ajouterez la direction souhaité :

    Vers la gauche :


    Vers la droite :


    Vers le haut :


    Vers le bas :


    Pour définir le sens de défilement vous avez le choix entre les quatre valeurs suivantes :
    - left.
    - right.
    - up.
    - down.

    ✘✘✘ Variante « aller-retour ».

    «Ce que j’appelle un « aller-retour » c'est le fait que sa aille à gauche puis reviens à droite et ceci à l'infini. Pour définir une variante de défilement il faut ajouter un attribut à la balise marquee qui sera « behavior ». ce qui donnera
    Code:
    <marquee behavior="..."></marquee>
    , ce qui donne :



    Pour obtenir cet effet nous allons ajouter à notre balise l'attribut « alternate » :
    Code:
    <marquee behavior="alternate">...</marquee>
    Personnellement je conseille cette variante lorsque vous avez un petit nombre de logo à faire défiler.

    ✘✘ Stop Souris.

    Le stop souris consiste à faire stopper le défilement au passage de votre souris.

    Néanmoins ! J'ai rencontré un soucis avec le Stop souris. Et en ayant discuter avec Nihil, elle m'a fait découvert que le Stop Souris ne fonctionne pas chez tout le monde et sur tous les navigateurs. Ayant fais le test moi-même, le stop souris fonctionne parfaitement bien sous le navigateur Google Chrome, mais pas sous le navigateur Mozilla Firefox. Alors que chez Samhain cela fonction très bien sous les deux navigateurs.


    La aussi il faut ajouter, non pas un, mais deux attributs qui se suivent : « onmouseover="this.stop();" » « onmouseout="this.start();" », ce qui donne :
    Code:
    <marquee onmouseover="this.stop();" onmouseout="this.start();"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></marquee>

    ✘✘ Le temps de défilement.

    Vous pouvez choisir de faire défiler vos partenaires lentement, ou au contraire rapidement. La aussi on ajout un attribut à notre balise de départ : « scrollamount ». Vous définissez une valeur numérique compris en 1 et 100. A 1 vos logos défilerons très lentement et plus vous vous rapprocherez de 100 vos logos défilerons vite.

    Valeur numérique de 5 :


    Valeur numérique de 30 :



    II. Visible sur toutes les pages du Forum (phpBB2).

    Comme promis, voici comment mettre en place votre footer partenaire de sorte à ce qu'il soit visible sur toutes les pages de votre forum. Vous devez aller dans le template « overall_footer_begin ».

    Prenez le code qui suit et changé intégralement le template avec.
    Le HTML :
    Code:
    <!-- BEGIN html_validation -->
    <div>
       <div>
          <table>
             <tbody>
                <tr>
                   <td>
    <!-- END html_validation -->
                   </td>
                   <td valign="top" width="{C3SIZE}">
                   <div id="{ID_RIGHT}">
                      <!-- BEGIN giefmod_index2 -->
                      {giefmod_index2.MODVAR}
                      <!-- BEGIN saut -->
                      <div style="height: {SPACE_ROW}px"></div>
                      <!-- END saut -->
                      <!-- END giefmod_index2 -->
                   </div>
                   </td>
                </tr>
             </tbody>
          </table>
       </div>
    </div>
    <!-- close div id="page-body" -->
    <div id="page-footer">
       <div align="center">
          <div class="gen"><div class="titre_footer2">Nos Partenaires Footer.</div><div class="partenaire_footer2">
      <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div>
    <!-- BEGIN html_validation -->
          </div>
       </div>
    </div>
    <!-- END html_validation -->

    Votre morceau de code reste inchangé à la première partie :
    Code:
    <div class="titre_footer2">Nos Partenaires Footer.</div><div class="partenaire_footer2">
      <a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a><a href="http://www.never-utopia.com"><img src="http://img11.hostingpics.net/pics/885266logo4.jpg" /></a></div>

    Le CSS :
    Code:

    /** PARTENAIRE Footer**/
    .partenaire_footer2 {
    background-color:#fff;
    width: 620px;
    height: 100px;
    border: 2px solid red;
    overflow: auto;
    }

    .titre_footer2 {
    width: 620px;
    height: 25px;
    background-color:#000;
    border: 2px solid red;
    color: #209CC9 !important;
    display: block;
    font-family: Times New Roman !important;
    font-size: 20px;
    text-align: center;}

    /** FIN PARTENAIRE FOOTER **/

    La encore vous pouvez personnaliser le footer comme bon vous semble, en utilisant toutes les variantes cité plus haut.

    II. Mise en page avec une image de fond.

    Vous pouvez personnaliser à volonté votre footer et donc lui donner une image de fond. J'ai fait du basique pour vous montrer : Screen ou en Live.

    Pour cela rien de plus simple pour les codeurs en herbe que vous êtes Very Happy Dans votre CSS vous allez changer le :
    Code:
    background-color : #fff;

    en
    Code:
    background : url('METTRE ICI L'URL DE VOTRE IMAGE');

    Et voilà, vous avez une image en fond ! Ah j’allai oublier ! Si vous définissez une image de fond vous devez changer la hauteur et la largeur en fonction de la taille de votre image.

    Ensuite vous allez voir que vos logos sont mal positionné. Pas de problème nous allons remédier à cela. Vous allez ajouter une div dans votre code, comme ceci :
    Code:
    <div class="partenaire_footer2"><div class="logo_partenaires">...</div></div>

    Puis dans votre CSS, vous ajoutez :
    Code:
    .logo_partenaires { padding : 35px ; }

    Vous réglez la valeur du padding comme bon vous semble en fonction de votre image :)

    Et voilà, le tuto est terminé \o/

    /!\ Je rappelle que cette section existe en cas de problème!./!\

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^





    Merci au lutin anonyme de cette année. <3

    avatar
    Nihil Scar Winspeare
    Messages : 4748

    le Jeu 29 Jan 2015 - 13:57

    Je poste juste pour préciser par rapport à ce que j'ai dit :) :

    Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
    Source : https://developer.mozilla.org/fr/docs/Web/HTML/Element/marquee

    Cela signifie que sur les différents navigateurs, et chaque versions de navigateurs l'affichage peut varier : certains feront les directions d'une autre manière, d'autre ne stopperont pas les animations, etc... Il faut donc en être conscient avant de l'utiliser, rien ne vous garantit que vos membres auront le même affichage que vous.

    Récemment sur forumactif il y a eu des retours de membres, la balise marquee créant un problème d'élargissement sur Chrome sur certaines pages. Si cela arrive, on peut regarder cette solution sur le FdF : Régler le problème des pages élargies à cause d'un défilement sous Google Chrome

    EDIT : d'ailleurs, pour pallier à ce problème, le FdF a sorti un nouveau petit tuto Créer une bannière défilante: image ou texte


    Dernière édition par Nihil Scar Winspeare le Ven 6 Fév 2015 - 11:21, édité 1 fois (Raison : Ajout d'une ressource du FdF)



    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Jeu 29 Jan 2015 - 14:31

    Le problème est surtout que marquee est une balise dépréciée, et bien que la plupart des navigateurs l’implémentent tout de même, il faudrait optimalement utiliser les keyframes pour simuler l'effet d'une marquee. Le problème? C'est long, c'est chiant, et au final c'est plus simple d'écrire marquee x) Donc je pense qu'au final on verra marquee encore longtemps, tant qu'il n'y aura pas une manière plus simple de faire le défilement ^^



    avatar
    Nihil Scar Winspeare
    Messages : 4748

    le Jeu 29 Jan 2015 - 14:59

    Oui oui, je précisais ce que j'avais dis sur la CB, pour que les personnes puissent être au courant que la balise n'est pas correcte, et qu'on peut ne pas obtenir ce qu'on espérait :)
    Les gens peuvent bien entendu l'utiliser s'ils veulent, car c'est vraiment plus rapide quand on a la flemme, mais en sachant que ça peut "casser" :toto:

    Pour ceux qui veulent être un peu plus sûr d'avoir le même rendu sur tous les navigateurs, sans s'embêter à faire les animations, on peut s'en sortir avec un petit plugin jquery, si ça intéresse du monde je peux en faire un petit tuto quand j'aurai le temps (exemple de plugin : http://aamirafridi.com/jquery/jquery-marquee-plugin).



    avatar
    Rozenbrez
    FémininAge : 26Messages : 1349

    le Jeu 29 Jan 2015 - 15:16

    Merci pour toutes vos précisions les filles Very Happy N'étant pas une excellente codeuse comme vous, je me suis basée sur ce que je connais et sur ce que je sais utiliser xD Comme je l'ai dis dans la demande de Lisou "Si des codeurs plus expérimenté ont une manière plus simple je suis preneuse aussi." Mais vue que les codeurs ne se sont nullement penché sur la question pour vérifier si ce que j'avais proposé était bon, Lisou a prit ce que j'ai mis et je me suis par la suite permise d'en faire un tuto pour celles et ceux qui souhaitent en faire de même.





    Merci au lutin anonyme de cette année. <3

    avatar
    Nihil Scar Winspeare
    Messages : 4748

    le Jeu 29 Jan 2015 - 15:55

    Y aucun problème Roz hein, personne ne sait tout, ce n'est pas une question "d'excellents codeurs". On est sur un forum d'aide, autant en profiter pour apprendre et partager, on peut tous contribuer en apportant notre petite pierre :)

    D'ailleurs j'ai vu que tu avais utilisé une balise nobr :)
    Au même titre que "marquee", elle est maintenant dépréciée. Si tu le souhaites, tout est expliqué ici : https://developer.mozilla.org/fr/docs/Web/HTML/Element/nobr



    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Jeu 29 Jan 2015 - 16:12

    Roz comme je l'ai expliqué, la manière du marquee est encore le plus simple, vu que ça ne demande que du HTML. Donc ton tuto est tout à fait correcte ne t'inquiète pas ^^ Je réagissais juste à ce que disait Nihil ^^



    avatar
    Hana Evali
    FémininAge : 27Messages : 164

    le Mer 11 Fév 2015 - 21:29

    Merci ^^



    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Mar 3 Mar 2015 - 11:24

    Hey Roz!
    Je vais envoyer ça à Alice dans les LS, car ce n'est selon moi pas assez expliqué. Tu expliques certes les marquee, mais toute la partie sur les logos de partenaires (qui au final est le but de ce LS quand même x) ) n'a pas d’explication et juste un code à copier/coller! Du coup, je déplace! ^^



    avatar
    Yuna Azalé
    FémininAge : 20Messages : 80

    le Sam 3 Oct 2015 - 18:17

    Merci !
    avatar
    Kelalin
    FémininAge : 25Messages : 1676

    le Lun 5 Oct 2015 - 19:02

    Merci pour le partage ! ٩(-̮̮̃•̃)۶
    avatar
    LiitleLiion
    FémininAge : 21Messages : 10

    le Lun 21 Déc 2015 - 21:42

    Merci, un code plutôt utile je trouve :bave:
    avatar
    KamiCams
    FémininAge : 21Messages : 37

    le Ven 22 Avr 2016 - 23:49

    Merci pour le partage !
    avatar
    Skitty
    FémininAge : 21Messages : 50

    le Dim 29 Mai 2016 - 5:19

    MERCI MERCI MERCI MERCI. Ça fait tellement de temps que je veux mettre un footer comme ça et j'y arrivais jamais ! MY HEROS.
    avatar
    Suisen
    FémininAge : 23Messages : 52

    le Mer 8 Juin 2016 - 12:29

    Merci du partage ♥
    avatar
    Mystigri
    FémininAge : 14Messages : 97

    le Sam 18 Juin 2016 - 12:45

    Super, je cherchais comment on faisait !



    avatar
    Amaliiah
    FémininAge : 18Messages : 47

    le Mer 22 Juin 2016 - 18:33

    merci !
    avatar
    Shiwaii
    MasculinAge : 28Messages : 94

    le Ven 2 Sep 2016 - 23:01

    Merci ! c:
    avatar
    Ookami Shiroi
    FémininAge : 25Messages : 68

    le Sam 1 Oct 2016 - 9:48

    Merci beaucoup ^^
    avatar
    Adiboo
    MasculinAge : 28Messages : 17

    le Mar 24 Jan 2017 - 22:50

    Genial ! merci beaucoup !
    avatar
    Zayshin
    FémininAge : 26Messages : 36

    le Mar 21 Fév 2017 - 20:47

    Merci énormément pour le code! C'est génial!
    avatar
    allen walker
    FémininAge : 20Messages : 22

    le Jeu 23 Fév 2017 - 14:30

    Super code ! Merci ! :hug:
    avatar
    kaguya venusity
    FémininAge : 22Messages : 87

    le Mar 30 Mai 2017 - 1:25

    merci
    avatar
    Deamyx
    MasculinAge : 21Messages : 197

    le Lun 3 Juil 2017 - 12:45

    Merci
    avatar
    Frozen
    FémininAge : 17Messages : 16

    le Mar 29 Aoû 2017 - 18:21

    Merci beaucoup de ce partage Razz
    Contenu sponsorisé


      La date/heure actuelle est Ven 20 Oct 2017 - 3:22