Bienvenue
sur
Never-Utopia

Tu es déconnecté.

Never-Utopia

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.


    Barre de navigation en footer façon sites

    Partagez
    FémininAge : 22Message(s) : 9733

    Les Guildes
    Guilde des Conteurs:
    4/10  (4/10)
    Guilde des Illusionnistes:
    2/10  (2/10)
    Guilde des Architectes:
    10/20  (10/20)
    Halloween
    le Dim 19 Mai 2013 - 8:20
    Rappel du premier message :

    TAGS
    Langage : #css #html
    Éléments : #navigation #footer
    Auteur : #auteur_Halloween
    Version : #toutes_les_versions


      Plop,

      Un petit tuto pour mettre en forme votre navigation de manière un peu plus originale, en bas de page.

      Aperçu :



      Pour commencer, le code brut. Dans le template overall_footer_end, repérez cette partie :
      Code:
      <!-- END html_validation -->
       </div>
       </div>
       <!-- BEGIN switch_footer_links -->
       <div align="center">
       <div class="gen">
       <!-- BEGIN footer_link -->
       <!-- BEGIN switch_separator --> |&nbsp;<!-- END switch_separator -->
       <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
       <!-- END footer_link -->
       </div>
       </div>
       <!-- END switch_footer_links -->
       </div>

      Que vous remplacez par :
      Code:
      <!-- END html_validation -->
       </div>
                                </div> <div style="width: 88%; height: 250px; margin: 0px 0px -10px -10px; padding: 51px; font-size: arial; font-size: 12px; color: #C0C0C0; background-image: url('http://i71.servimg.com/u/f71/17/97/89/15/sans_t14.png');"><center><br /><br /><table width="99%" border="0" cellspacing="2">
        <tr>
          <td width="33%"><div style="height: 200px; padding: 10px;"><div style="font-size: 25px; font-family: georgia; font-style: italic; color: #E1E1E1;">Nom forum</div>
            <br /><br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/">☽ Accueil</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/faq">☽ Foire aux questions</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/search?tt=1">☽ Rechercher</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/memberlist?tt=1">☽ Nos membres</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/groups?tt=1">☽ Nos Groupes</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/contact?tt=1">☽ Contactez-nous</a>
            <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/statistics?tt=1">☽ Nos statistiques</a></div></td>
          <td width="33%"><div style="height: 200px; padding: 10px;"><div style="font-size: 25px; font-family: georgia; font-style: italic; color: #E1E1E1;">Votre compte</div>
            <br /><br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/profile?mode=editprofile">☽ Votre profil</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/privmsg?folder=inbox">☽ Votre messagerie</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/login">☽ Vous connecter</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org//login?logout">☽ Vous déconnecter</a>
            <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/register">☽ Nous rejoindre ?</a></div></td>
          <td width="33%"><div style="height: 200px; padding: 10px;"><div style="font-size: 25px; font-family: georgia; font-style: italic; color: #E1E1E1;">Autre</div>
            <br /><br /> <a style="color: #C0C0C0 !important;" href="http://www.forumactif.com/forum-gratuit">☽ Créer un forum</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://forum.forumactif.com/">☽ Le forum des forum</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://halloweens-test.forumactif.org/abuse?page=%2F%3Ftt%3D1&report=1&tt=1">☽ Signaler un abus</a></div></td>
        </tr>
                                </table></center><center><a style="color: #E1E1E1 !important; font-size: 10px; font-family: arial narrow; letter-spacing: 2px;" href="http://www.never-utopia.com">© By Halloween de Never-Utopia</a></center></div>
       
      </div>


      Votre "barre" de navigation est maintenant installée (pensez à valider le template), il ne reste plus qu'à enlever celle prédéfinie par forumactif. Pour cela, dans le template overall_header, repérez cette partie :
      Code:
      <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
       <tr>
       <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
       </tr>
       </table>

      Que vous supprimez. Enregistrez, et la barre a disparue.


      Personnalisation.


      C'est bien beau, mais comment personnaliser sa nouvelle navigation ? Rien de plus simple, il suffit de suivre les étapes.


      Le bloc de navigation en lui-même.


      Le code qui suit vous permet de décrypter chaque élément. Les "margin" permettent de position le bloc, qui peut varier selon vos forum. Pour vous donner un coup de patte, dans l'ordre "0px 0 px -10px -10px" donne "marge du haut, marge de droite, marge du bas, marge de gauche".
      Code:
      <!-- END html_validation -->
       </div>
                                </div> <div style="width: LONGUEUR DE LA NAVIGATION EN FONCTION DE VOTRE FORUM; height: LARGEUR DE LA NAVIGATION EN FONCTION DE VOTRE FORUM; margin: 0px 0px -10px -10px; padding: ESPACE ENTRE LE CONTENU ET LE BORD DU CADREpx; font-size: POLICE; font-size: TAILLE EN px; color: CODE COULEUR; background-image: url('LIEN DE L'IMAGE');">CONTENU</div>
       
      </div>


      Pour remplacer l'image de fond par une couleur, remplacez :
      Code:
      background-image: url('LIEN DE L'IMAGE');

      Par :
      Code:
      background-color: code couleur;


      Le contenu.

      Code:
      <center><br /><br /><table width="LONGUEUR DU TABLEAU DU CONTENU" border="0" cellspacing="2">
        <tr>
          <td width="33%"><div style="height: HAUTEUR DE LA COLONNE ; padding: ESPACE ENTRE LE BORD ET LE TEXTEpx;"><div style="font-size: TAILLE DE LA POLICE px; font-family: POLICE; font-style: italic; color: CODE COULEUR;">NOM COLONNE 1</div>
            <br /><br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DE VOTRE FORUM/">☽ Accueil</a>
      <br />  <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/faq">☽ Foire aux questions</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/search?tt=1">☽ Rechercher</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/memberlist?tt=1">☽ Nos membres</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/groups?tt=1">☽ Nos Groupes</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/contact?tt=1">☽ Contactez-nous</a>
            <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/statistics?tt=1">☽ Nos statistiques</a></div></td>
         <td width="33%"><div style="height: HAUTEUR DE LA COLONNE ; padding: ESPACE ENTRE LE BORD ET LE TEXTEpx;"><div style="font-size: TAILLE DE LA POLICE px; font-family: POLICE; font-style: italic; color: CODE COULEUR;">NOM COLONNE 2</div>
            <br /><br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/profile?mode=editprofile">☽ Votre profil</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/privmsg?folder=inbox">☽ Votre messagerie</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/login">☽ Vous connecter</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM//login?logout">☽ Vous déconnecter</a>
            <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/register">☽ Nous rejoindre ?</a></div></td>
             <td width="33%"><div style="height: HAUTEUR DE LA COLONNE ; padding: ESPACE ENTRE LE BORD ET LE TEXTEpx;"><div style="font-size: TAILLE DE LA POLICE px; font-family: POLICE; font-style: italic; color: CODE COULEUR;">NOM COLONNE 3</div>
            <br /><br /> <a style="color: #C0C0C0 !important;" href="http://www.forumactif.com/forum-gratuit">☽ Créer un forum</a>
      <br /> <a style="color: #C0C0C0 !important;" href="http://forum.forumactif.com/">☽ Le forum des forum</a>
      <br /> <a style="color: CODE COULEUR DU LIEN !important;" href="http://ADRESSE DU FORUM/abuse?page=%2F%3Ftt%3D1&report=1&tt=1">☽ Signaler un abus</a></div></td>
        </tr>
                                </table></center>

      Vous pouvez bien sûr remplacer ou ajouter d'autres liens. Le "ADRESSE DU FORUM" est à compléter par un bout de votre adresse, celle de la page d'accueil (exemple : http://halloweens-test.forumactif.org/groups?tt=1).


      Amusez-vous bien \o/


    Dernière édition par Halloween le Mar 20 Aoû 2013 - 7:25, édité 1 fois


    Je mets les voiles, que le vent te soit favorable matelot !
    FémininAge : 96Message(s) : 14
    Patapey
    le Mar 10 Déc 2013 - 11:11
    C'est franchement sympa comme type de navigation ! J'adore, merci.
    FémininAge : 25Message(s) : 12
    Seiten
    le Ven 13 Déc 2013 - 11:23
    Merci bien !
    MasculinAge : 24Message(s) : 71
    Akito
    le Sam 14 Déc 2013 - 22:28
    Merci beaucoup  Very Happy 
    FémininAge : 28Message(s) : 205
    Grande
    le Mer 18 Déc 2013 - 16:10
    Merci


    MasculinAge : 21Message(s) : 25

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    rhino
    le Jeu 19 Déc 2013 - 9:31
    Merci beaucoup !
    FémininAge : 27Message(s) : 52
    Doupi
    le Sam 21 Déc 2013 - 10:42
    Super idée merci !!
    MasculinAge : 20Message(s) : 109
    Eques
    le Jeu 26 Déc 2013 - 20:05
    Merci beaucoup!
    FémininAge : 22Message(s) : 53
    tenderness
    le Jeu 26 Déc 2013 - 23:30
    Merci pour le tuto!
    FémininAge : 23Message(s) : 89
    Sakira
    le Sam 4 Jan 2014 - 12:15
    Merci pour ce tuto =3


    Bientôt peut être o/
    Dépendra de ma motiv'
    MasculinAge : 34Message(s) : 57
    John Parker
    le Jeu 9 Jan 2014 - 13:28
    Merci pour ce tutoriel ^^


    FémininAge : 25Message(s) : 97

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Schnappi
    le Mar 14 Jan 2014 - 12:08
    Merci ♥
    MasculinAge : 25Message(s) : 102
    Valhalla
    le Dim 19 Jan 2014 - 8:15
    Merci, je cherchais depuis longtemps a faire un truc comme sa
    FémininAge : 21Message(s) : 181
    Ab0utxMe
    le Mar 21 Jan 2014 - 10:24
    Je trouve ça très joli ! x3
    Merci ^^


    MasculinAge : 24Message(s) : 6
    Malekith
    le Sam 25 Jan 2014 - 16:05
    Merci  Very Happy 
    FémininAge : 21Message(s) : 34
    MlleNamiya
    le Mar 28 Jan 2014 - 9:13
    Merci o/
    FémininAge : 16Message(s) : 46

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Oce.
    le Mer 29 Jan 2014 - 7:22
    Merci Beaucoup *-*


    FémininAge : 19Message(s) : 59
    Kira de Shola
    le Jeu 6 Fév 2014 - 4:39
    Merci ! Very Happy
    FémininAge : 20Message(s) : 53
    mathou_inu
    le Dim 9 Fév 2014 - 12:36
    Merci !


    FémininAge : 24Message(s) : 200

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Inamio
    le Lun 10 Fév 2014 - 10:31
    Merci pour cette atuce


    FémininAge : 25Message(s) : 35
    Aeeklez
    le Mer 19 Fév 2014 - 17:50
    Très sympathique ! Merci
    FémininAge : 23Message(s) : 107

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Xelha
    le Sam 22 Fév 2014 - 6:28
    Merci pour ce tuto ^^



    ¤Kit by me¤
    FémininAge : 25Message(s) : 37
    Zee
    le Dim 23 Fév 2014 - 17:40
    C'est superbe ! J'adore tes codes décidément. Merci !
    MasculinAge : 22Message(s) : 129

    Les Guildes
    Guilde des Conteurs:
    0/0  (0/0)
    Guilde des Illusionnistes:
    0/0  (0/0)
    Guilde des Architectes:
    0/0  (0/0)
    Noob's
    le Dim 23 Fév 2014 - 17:59
    Ca m'a l'air très jolie tous ça, merci Hal' :3
    FémininAge : 29Message(s) : 76
    bubulle
    le Mar 4 Mar 2014 - 5:15
    merci
    MasculinAge : 24Message(s) : 6
    S4C
    le Mer 5 Mar 2014 - 13:38
    Merci
    Contenu sponsorisé
    Aujourd'hui à 0:55

      La date/heure actuelle est Ven 30 Sep 2016 - 0:55