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.


    (Nihil) Image en bg et tableaux pour post RP♥(code HTML)

    Partagez
    avatar
    Estrée
    FémininAge : 26Messages : 113

    le Sam 18 Mar 2017 - 14:25

    Ma demande



    Bonjour à tous =)
    Je tiens à remercier la où les personnes qui m'aideront à faire cette... chose x')
    Cela fait quelques jours que je me penche sur une solution mais je m'embête avec les dimensions et les scrollbars, à chaque fois que je trouve une bonne dimension, le reste part en vrille --".


    Schéma(s) et Eléments


    Schémas : http://img4.hostingpics.net/pics/545940problemearsoudre.png
    Comme le dessin le montre, il faudrait qu'il y ait les mentions :"Texte ici" au-dessus de chaque barres.
    Puis faire deux tableaux de la même longueur que les contours noirs où je pourrais écrire du texte.
    Tailles des éléments : Tout doit être à la même échelle que le dessin car le dessin choisit sera également l'élément du background. Cependant le BG sera largement modifié et amélioré graphiquement. =)
    Effets voulus : J'aimerai que les tableaux utilisés pour la description des textes soit transparents ^^
    Version de votre forum : PHPBB2. Cependant il me faudrait ce code juste en HTML, puisqu'il servira à l'usage d'un post RP particulier ^^


    Ressources


    Voici l'image à utiliser pour les essais: http://img4.hostingpics.net/pics/149650Sanstitre3.png =)
    La véritable image sera retravaillée graphiquement aux tons du forum. En attendant, sachez que la source de cette image est inspiré du jeu World Of warcraft.


    Autres précisions ?


    Encore merci pour l'aide que vous m'apporterez <3 sachez que vous m'enlevez une véritable épine du pied♥

    avatar
    Nihil Scar Winspeare
    Messages : 4505

    le Dim 19 Mar 2017 - 17:56

    Coucou !

    Je ne prends pas officiellement la demande (j'en ai déjà en cours), mais j'ai commencé un petit quelque chose (en gros, n'importe quel membre peut continuer la demande s'il veut ♥︎)

    Voici mon début : http://codepen.io/nigul/full/zZpeOK/
    N'hésite pas à préciser ce qu'il faut changer

    @Estrée a écrit:Cependant il me faudrait ce code juste en HTML, puisqu'il servira à l'usage d'un post RP particulier ^^
    Ca ne sera pas posté sur ton forum du coup, c'est bien ça ? Il faut donc que ça fonctionne dans "n'importe quel message"

    avatar
    Estrée
    FémininAge : 26Messages : 113

    le Lun 20 Mar 2017 - 1:00

    Bonsoir =)
    C'est exactement ce dont j'avais besoin merci beaucoup♥
    => du coups avec ton autorisation je te pique les deux codes?♥
    Et si, cela sera un post d'usage pour les règlements des expériences et combats, cependant il ne ser aposté que dans un seul sujet.
    Encore merci pour ton aide♥
    avatar
    Nihil Scar Winspeare
    Messages : 4505

    le Dim 26 Mar 2017 - 23:00

    Oups, j'avais pas vu ta question :panic:

    Du coup, si tu n'as pas encore repris le code, voici le HTML à mettre dans un message :
    Code:
    <div class="msg-progression">
    <div class="msg-p-titre">Texte ici</div>
    <div class="msg-p-sous-titre">Texte ici</div>
    <div class="msg-p-barre" data-placement="haut-gauche">Texte ici</div>
    <div class="msg-p-barre" data-placement="haut-droite">Texte ici</div>
    <div class="msg-p-barre" data-placement="bas-gauche">Texte ici</div>
    <div class="msg-p-barre" data-placement="bas-droite">Texte ici</div>
    <div class="msg-p-texte-gauche">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure nihil sed ipsum totam aspernatur dolores corporis, deserunt animi ipsam fugiat porro delectus saepe fugit nisi adipisci ullam quisquam hic. ipsum dolor sit amet, consectetur adipisicing
    elit. Aliquid, alias perferendis ab magnam qui assumenda, atque reiciendis fugit illo impedit, sit earum mollitia quas modi distinctio omnis praesentium error laudantium.</div>
    <div class="msg-p-texte-principal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At hic ut ab quaerat tempore dicta delectus laboriosam, laborum fugiat officiis possimus dolor libero ipsum est assumenda minima molestias et. Similique. ipsum dolor sit amet, consectetur adipisicing
    elit. Totam quos, quod ab maxime modi iure minus, porro earum vitae quaerat! Impedit vel quia, aspernatur quae iste porro eveniet delectus quidem. ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus quia aut eaque minima ipsa. Quasi
    nulla, harum error doloremque, debitis, vero, nemo laudantium numquam provident qui quam perspiciatis! Itaque, facere.</div>
    </div>

    Et voici le CSS à rajouter sur ton forum :
    Code:
    .msg-progression {
      background-image: url('http://img4.hostingpics.net/pics/149650Sanstitre3.png');
      width: 533px;
      height: 378px;
      margin: auto;
      position: relative;
      font-size: 14px;
      color: black;
    }

    .msg-progression > div {
      position: absolute;
    }

    .msg-p-texte-gauche {
      top: 90px;
      left: 30px;
      width: 105px;
      height: 270px;
      overflow: auto;
    }

    .msg-p-texte-principal {
      top: 153px;
      left: 163px;
      width: 347px;
      height: 200px;
      overflow: auto;
    }

    .msg-p-titre {
      color: white;
      text-align: center;
      left: 225px;
      top: 10px;
      width: 115px;
    }

    .msg-p-sous-titre {
      color: white;
      top: 26px;
      left: 244px;
      font-size: 12px;
      width: 78px;
      text-align: center;
    }

    .msg-p-barre {
      width: 160px;
      text-align: center;
      font-size: 12px;
    }

    .msg-p-barre[data-placement*="haut"] {
      top: 88px;
    }

    .msg-p-barre[data-placement*="bas"] {
      top: 115px;
    }

    .msg-p-barre[data-placement*="gauche"] {
      left: 165px;
    }

    .msg-p-barre[data-placement*="droite"] {
      left: 342px;
    }


    Le résultat :



    Texte ici

    Texte ici

    Texte ici

    Texte ici

    Texte ici

    Texte ici

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure nihil sed ipsum totam aspernatur dolores corporis, deserunt animi ipsam fugiat porro delectus saepe fugit nisi adipisci ullam quisquam hic. ipsum dolor sit amet, consectetur adipisicing
    elit. Aliquid, alias perferendis ab magnam qui assumenda, atque reiciendis fugit illo impedit, sit earum mollitia quas modi distinctio omnis praesentium error laudantium.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. At hic ut ab quaerat tempore dicta delectus laboriosam, laborum fugiat officiis possimus dolor libero ipsum est assumenda minima molestias et. Similique. ipsum dolor sit amet, consectetur adipisicing
    elit. Totam quos, quod ab maxime modi iure minus, porro earum vitae quaerat! Impedit vel quia, aspernatur quae iste porro eveniet delectus quidem. ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus quia aut eaque minima ipsa. Quasi
    nulla, harum error doloremque, debitis, vero, nemo laudantium numquam provident qui quam perspiciatis! Itaque, facere.


    avatar
    Onyx
    FémininAge : 23Messages : 2910

    le Jeu 6 Avr 2017 - 14:32

    Salut Estrée, tu as vu le code de Nihil, est-ce que ça fonctionne?

    N'oublies pas de mettre l'icône terminé () si tout est bon ^^



    avatar
    Praecursator
    MasculinAge : 14Messages : 77

    le Ven 14 Avr 2017 - 23:06

    Hello !
    J'ai fais moi aussi un petit essai :

    http://codepen.io/Praecursator/pen/JNdPwZ

    Bye !
    avatar
    Onyx
    FémininAge : 23Messages : 2910

    le Ven 21 Avr 2017 - 19:11

    Hellow!

    Estrée, tu as vu les codes? Dernier rappel avant archivage.



    Contenu sponsorisé


      La date/heure actuelle est Sam 27 Mai 2017 - 13:57