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

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:)

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.



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 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 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

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 ^^

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"

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).

Merci pour toutes vos précisions les filles 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.

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

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 ^^

Merci ^^

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! ^^

Merci !

Merci pour le partage ! ٩(-̮̮̃•̃)۶

Merci, un code plutôt utile je trouve

Merci pour le partage !

MERCI MERCI MERCI MERCI. Ça fait tellement de temps que je veux mettre un footer comme ça et j'y arrivais jamais ! MY HEROS.

Merci du partage ♥

Super, je cherchais comment on faisait !

merci !

Merci ! c:

Merci beaucoup ^^

Genial ! merci beaucoup !

Merci énormément pour le code! C'est génial!

Super code ! Merci !

merci

Merci

Merci beaucoup de ce partage