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 du moment :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

    [résolu]Footer avec image en BG et cadre en bloc

    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Dim 24 Juil 2016 - 16:56

    Ma demande



    Bonjour tout le monde ! Je cherche à coder un footer pour mon forum... J'ai bien tenté les tuto trouvé sur NU, mais il ne rendent pas ce que je cherchent ><
    J'aimerais simplement mettre une image en footer, image qui serait un backgroung pour insérer deux bloc l'un à côté de l'autre, un pour les crédit et l'autre pour les logo des annuaire. En dessous de ses deux bloc, toujours sur fond de l'image, j'aimerais qu'apparaissent les liens obligatoire de forum actif. J'espère que le schéma sera plus claire XD


    Schéma(s) et Eléments
    Schémas :
    Spoiler:
    Tailles des éléments : Alors, pour la largeur, normalement, c'est 800px, mais je ne suis pas à 100% sure de mon coup.
    Pour la hauteur, entre 300 et 400 px pour ne pas faire trop grand.
    Effets voulus : Aucun en particulier, je saurais adapter je pene
    Version de votre forum : PHPBB2


    Ressources

    J'aimerais que l'image de background soit faite à partir de cette image-ci :
    image dans le même style que la bannière faite par @Nimarel qui a fait un excellent travail.
    Au niveau des couleurs, on tourne entre du noir-gris blanc


    Autres précisions ?
    Rien que ne me vienne de suite à l'esprit >< Juste un grand merci à ceux qui pourront m'aider ^^


    Dernière édition par Eil'liathan Tyan'Lirulin le Dim 28 Aoû 2016 - 13:05, édité 3 fois
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Mar 26 Juil 2016 - 22:14

    Un petit up s'il vous plaît !
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Sam 30 Juil 2016 - 16:23

    Un please !
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 30 Juil 2016 - 16:42

    Coucou o/

    Eil'liathan Tyan'Lirulin a écrit:J'aimerais que l'image de background soit faite à partir de cette image-ci :
    image dans le même style que la bannière faite par @Nimarel qui a fait un excellent travail.
    Au niveau des couleurs, on tourne entre du noir-gris blanc

    Du coup, tu cherches à la fois une commande code / graph en même temps, c'est ça ?

    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Sam 30 Juil 2016 - 17:04

    Hello ^^

    Dans l'idée, oui, après, pour le graph, je peux éventuellement bidouiller quelque chose, sans grande conviction.
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Dim 31 Juil 2016 - 23:39

    Bonsoir, en desespoir de cause, je tente seule, de mon côté de faire quelque chose.
    Je touche au but, mais je séche réellement rapport au résultat voulu au niveau du codage.
    Puis-je partager mes recherches en espérant que quelqu'un s'intéresse à mon problème ou dois-je attendre que la commande soit prise en compte ?
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Mar 2 Aoû 2016 - 21:51

    Bonsoir,
    Après moult tentative de codage, pas moyen d'arriver au résultat voulu, donc, je me permet de upper ma commande... S'il vous plait T.T
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mar 2 Aoû 2016 - 22:25

    Coucou

    Je n'ai pas le temps pour l'instant de prendre la demande en charge, mais je vérifie que j'ai bien compris

    Tu cherches à faire quelque chose comme ça ? (en adaptant la hauteur et en rajoutant un fond)
    [résolu]Footer avec image en BG et cadre en bloc CFdB5Af

    J'ai fait ça un peu "rapidement" en utilisant l'inspecteur d'élément, je n'ai pas gardé le code, mais si c'est bien ça je peux laisser des pistes sur comment faire pour toi ou bien le futur codeur Wink

    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Mar 2 Aoû 2016 - 22:40

    Coucou ^^

    J'suis désolé, mais j'suis une grosse quiche pour les schéma, du coup, j'arrive pas vraiment à en faire un bien parlant XD
    Dans l'idée, se serait ça oui, mais avec les cadre un peu plus petits et effectivement, une image en fond (des deux cadre et des liens de crédit en bas du forum).

    Dans l'idée, les pistes que j'ai exploré s'approche du rendu voulu... Mais je soupçonne mon code déguelasse, pour parler vulgairement et le rendu finale n'est pas tout à fait ce que je voudrais.
    Le must serait que l'image en fond touche le cadre gris du forum et cloture la page... qu'il n'y est rien dessous, tu vois ce que je veux dire ?

    Ca fait plusieurs jours que je tente de faire un schéma parlant, mais c'est pas trop trop ça XD J'essaie encore ><

    Edit : ceci étant ce que j'ai réussit à faire de plus parlant ><:
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Ven 5 Aoû 2016 - 13:13

    Up please.
    kevin300
    kevin300
    MasculinAge : 26Messages : 1

    Dim 7 Aoû 2016 - 16:49

    mci beaucoup!!!
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Mer 17 Aoû 2016 - 10:10

    Hello

    Kevin300, merci de ne pas poster ce genre de messages dans les demandes des autres, on n'est pas dans les Libres Services Wink (on dirait limite un bot)
    J'en profite pour te demander si la demande est encore d'actualité Eil'liathan ? ♡

    Bonne journée :hudada:

    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Jeu 18 Aoû 2016 - 4:48

    Bonsoir Nihil.

    Oui toujours d'actualité. J'attend d'ailleurs une réponse à mon dernier message.

    Merci ^^
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 21 Aoû 2016 - 21:50

    Je comprends bien ce que tu veux dire :hudada:

    Comme personne ne prend la demande, je vais me mettre dessus mais je vais peut-être avancée à vitesse scarabée et te demander de travailler un peu ^^

    Voici une première piste en CSS :
    Code:
    #page-footer {
      height: 400px;
      background: #f6e289; /* fond */
      margin-left: 4px; /* décalage par rapport à la bordure à gauche */
      position: relative;
      z-index: 1;
    }

    /* on enleve la bordure en bas du forum */
    table.bodylinewidth {
      border-bottom: 0px!important;
    }

    J'ai mis une hauteur au bloc et une couleur bien flashy pour qu'on le voit comme là il y a peu de contenu, mais cela pourra être changé ensuite.
    https://2img.net/image.noelshack.com/fichiers/2016/33/1471809157-capture-d-ecran-2016-08-21-a-21-52-13.png :siffle:

    Ensuite, pour placer le contenu dans les templates, le mieux c'est dans overall_footer_begin.
    On repère cette partie là :
    Code:
    <div id="page-footer">
     <div align="center">
     <div class="gen">
    <!-- BEGIN html_validation -->

    Je te conseille de placer ton contenu juste au debut de la div avec l'id page-footer

    Est ce qu'on pourrait voir ce que tu avais codé ? Ca se trouve il y a juste de petites modifications à faire et voilà <3

    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Lun 22 Aoû 2016 - 12:22

    Merci Nihil, pour l'instant, le résultat est parfait !
    Je te donnerais bien ce que j'ai codé, mais comme ça fonctionnais pas, de colère, je l'ai bazardé XD
    En revanche, je vais tenter de te soulager un peu en codant le contenu et si vraiment j'y arriverais pas, je reviendrais vers toi ^^

    Edit : bah, ça aura été rapide XD
    J'ai réussis à donner la mise en page que je voulais... en soit, c'était pas bien compliqué une fois le code en place là où il fallait... Va vraiment falloir que je me penche sur le fonctionnement des templates.

    Bref, deux détails cependant que j'arrive pas à régler :

    le premier : serait-il possible de faire descendre les liens de FA en bas du footer sans rajouter des br /> partout dans ma template ?
    le second : je n'arrive plus à retrouver le truc pour changer la couleur des liens en passant par le CSS et là en l'occurence, je voudrais changer ceux de forum actif et ceux qui seront dans les bloc (au passage, si tu as une astuce pour changer la couleur des liens vers les différentes page d'un même topic, je suis preneuse aussi XD)

    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Jeu 25 Aoû 2016 - 13:54

    Je me permet un petit up, une réponse devrait me permettre de clore le sujet ^^
    J'ai juste besoin de savoir comment descendre les liens en bas du footer, pour le reste, je devrais me débrouiller ^^
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 25 Aoû 2016 - 21:34

    Coucou !

    Je passe en vitesse :)

    Dans le template on repère ça :
    Code:
    <div align="center">
     <div class="gen">
    <!-- BEGIN html_validation -->

    On ajoute dedans une classe CSS
    Code:
    <div class="lien_fa_footer" align="center">
     <div class="gen">
    <!-- BEGIN html_validation -->

    Et ensuite dans le CSS, on le positionne :
    Code:
    .lien_fa_footer {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
    }

    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Jeu 25 Aoû 2016 - 21:47

    C'est parfait !!! Merci Nihil !
    Du coup, c'est tout bon pour moi, la demande peut-être close ^^
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Ven 26 Aoû 2016 - 8:45

    Je suis désolé pour le double poste, mais comme on peut pas supprimer pour reposter et que mon soucis concerne ton astuce Nihil, je me permet.

    Je viens de me rendre compte que, depuis que j'ai installé le footer, les bordure du corps du forum déconne. En faite, j'avais déjà ça dans mon CSS :

    Code:
    .bodylinewidth
    {
      width: 800px;
      border-left :3px solid black !important;
      border-right :3px solid black !important;
      background: rgba(0, 0, 0, 0.6); /* couleur de fond interieure */
    }

    qui à mon humble avis à du se corrompre avec cette partie de ton code :

    Code:
    /* on enleve la bordure en bas du forum */
    table.bodylinewidth {
      border-bottom: 0px!important;
    }

    J'ai tenté d'enlever mon code pour rajouter les bordure par le tiens et l'inverse, mais l'effet voulu n'est jamais le même. A la base, j'avais une joli bordure noir de 3px à droite et à gauche du corps du forum et là, j'ai juste une bordure qui doit faire le double (deux bordures qui se chevauchent j'ai l'impression) et je n'arrive pas à retrouver mon rendu initiale.

    Help please, avant que je balance mon ordi et que mon forum me sorte déjà par les yeux avant même son ouverture XD
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Ven 26 Aoû 2016 - 13:18

    Quand tu enlèves mon code, est ce que tu retrouves l'effet que tu veux ?

    Normalement ce code ne touche que la bordure du bas :hum:

    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Ven 26 Aoû 2016 - 14:28

    Non ><
    Je te remet le lien du forum, pour que tu puisse te rendre compte. Je sais pas quoi te donner de plus, je vois pas d'où peut venir le problème...

    Peut être le CSS qui touche le corps du forum ?
    Code:
    body
    {
      background-image: url(http://image.noelshack.com/fichiers/2012/25/1340016950-wallpaper-867845.jpg); background-repeat: no-repeat fixed;
      background-size: cover;
      margin: 0;
      letter-spacing: 1px;
    }
    .bodylinewidth
    {
      width: 800px;
      border-left :3px solid black !important;
      border-right :3px solid black !important;
      background: rgba(0, 0, 0, 0.6); /* couleur de fond interieure */
    }
    .bodyline
    {
      padding: 0px;
    }
    a:link, a:hover
    {
      text-decoration: none !important;
      font-weight: normal !important;
    }

    table#msg_et, table#msg_et td{
      background-color:none !important;
      }

    .bloc-postbody{
      background-color: rgba(0, 0, 0, 0.6);
      border-bottom: 2px inset white !important;
      border-left: 2px inset white !important;
      border-right: 2px inset white !important;
    }
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Dim 28 Aoû 2016 - 12:07

    Petit up, mon problème est certes mineurs, mais il n'est pas très esthétique ><
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 28 Aoû 2016 - 12:36

    Le problème ne vient pas du CSS je crois, je viens de voir que tu avais 2 .bodylinewith sur ton forum, le soucis vient de là :han:

    Screen : https://2img.net/image.noelshack.com/fichiers/2016/34/1472380490-ooo.png

    Je te conseille de chercher dans le template overall_header si la classe "bodylinewidth" n'est pas présente 2 fois.
    Si oui, essaye d'enlever la classe à l'un des endroits (je pense qu'il faut enlever la seconde occurence), et regarde si c'est mieux ^^

    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 33Messages : 315

    Dim 28 Aoû 2016 - 13:04

    MERCI Nihil, c'était bien ça ^^
    Du coup et cette fois, pour de bon, le problème est bel et bien résolu !
    Contenu sponsorisé


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