AccueilRechercherS'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 à ne pas rater :
Vacances Camping : code promo 30€ + annulation offerte
Voir le deal

    Fiche de Partenariat - Bataille médiévale, tons marrons

    Argenty
    Argenty
    FémininAge : 18Messages : 36

    le Sam 2 Mai 2020 - 22:22

    Fiche de Partenariat - Bataille médiévale, tons marrons



    Bonsoir ! Je propose mon premier (il me semble) code en LS sur NU. J'espère qu'il ne comporte pas trop des fautes :)
    C'est, comme le titre l'indique, une fiche de partenariat. C'est une fiche qui comporte du CSS, il faut donc soit avoir accès à la fiche de CSS du site où vous souhaitez l'héberger, soit avoir un forum où héberger la fiche en entier.
    Vous pouvez voir ici le rendu de la fiche, des animations sont présentes sur les cases "Liens" et les cases "Pseudo".
    > https://dame-nature-revenge.1fr1.net/h13-epic
    Images :

    Fiche de Partenariat - Bataille médiévale, tons marrons Fiche_12
    Au passage de la souris sur les "Liens" :
    Fiche de Partenariat - Bataille médiévale, tons marrons Fiche_10
    Sur les "Pseudos" :
    Fiche de Partenariat - Bataille médiévale, tons marrons Fiche_11

    Les couleurs, images, typographies, etc sont évidemment modifiables. L'image du haut fait 450px de large et les images du staff sont en 100x100 pixels. Et bien sûr, ne retirez pas mon copyright, merci. Voilà le code :

    Code:
    .a {
        color:#F4F3F3;
        text-decoration : none;
        }
       
        .fond_fiche{
        position : relative;
      height: 625px;
        width: 450px;
        background-color: #929180;
        }
       
        .banniere_nomdufo {
        position : absolute;
        top: -5px;
        height: auto;
        width: 450px;
        background-color:#A9A794 ;
        }
       
        .nomdufo{
        font-family: 'Cinzel', serif;
        color: #F4F3F3;
        font-size: 25px;
        padding-top:3px;
        font-weight : bold;
        text-align: center;
        letter-spacing : 1px;
        }
       
        .bloc_contexte{
        position : absolute;
        top : 45px;
        left: 10px;
        height:235px;
        width:260px;
        border-right: 1px solid #A9A794;
        }
       
        .contenu_contexte{
        position : absolute;
        top: 5px;
        left: 0px;
        height:  225px;
        width: 250px;
        overflow : auto;
        }
       
        .texte{
        font-family: 'Red Hat Display', sans-serif;
        font-size: 11px;
      color: #000000;
        text-align: justify;
        }
       
        .bloc_liens{
        position : absolute;
        right : 10px;
        width :150px;
        height: 25px;
        background-color:#A9A794;
        transition-duration : 1.5s;
        }
       
        .bloc_liens:hover{
        width : 135px;
        transition-duration : 1;5s;
        }
       
        .liensdufo{
        font-family: 'Cizel', serif;
        color: #F4F3F3;
        font-size: 20px;
        text-align :center;
        font-variant : small-caps;
        letter-spacing : 2px;
        transition-duration : 2s;
        }
       
        .liensdufo:hover{
        letter-spacing : 0px;
        transition-duration : 2s;
        }
       
        .banniere_messages_membres {
      position : absolute;
        top : 295px;
        height: auto;
        width: 450px;
        background-color:#A9A794 ;
        text-align: center;
        }
       
        .messages_membres{
        font-family: 'Red Hat Display', sans-serif;
        color: #F4F3F3;
        font-size: 20px;
        font-variant:small-caps;
       
        }
       
        .soustitre_staff {
        position : absolute;
        left : 90px;
        top : 332px;
        color: #F4F3F3;
        font-family :'Cinzel', serif;
        font-size : 23px;
        font-weight : bold;
        }
       
        .image_staff{
        position :absolute;
        left : 20px;
        border : 3px solid #F4F3F3;
        border-radius : 60px;
        }
       
        .pseudostaff{
        position: absolute;
        left : 75px;
        height: 25px;
        width: 140px;
        background-color:#A9A794;
        transition-duration : 1s ;
        }
       
        .pseudostaff:hover{
        width:130px;
      transition-duration : 1s ;
        }
       
        .texte_pseudostaff{
        color: #F4F3F3;
        font-size: 18px;
        font-family :'Cinzel', serif;
        text-align: right;
        padding-right:4px;
        font-variant : small-caps;
        font-weight : bold;
        letter-spacing : 0.5px;
        }
       
        .texte_rangstaff{
        position :absolute;
        right: 250px;
        width : 95px;
        height : 50px;
        font-style :italic;
        font-weight : bold;
        font-size : 12px;
        font-family : 'Red Hat Display', sans-serif;
        color : #F4F3F3;
        text-align : right;
        padding-right : 3px;
        overflow : auto ;
        }
       
        .soustitre_infos{
        position : absolute;
        right: 75px;
        top:332px;
        color: #F4F3F3;
        font-family :'Cinzel', serif;
        font-size : 23px;
        font-weight : bold;
        }
       
        .bloc_infos{
        position : absolute;
        right : 10px;
        top : 364px;
        width : 205px;
        height : 235px;
        border-left: 1px solid #A9A794;
        }
       
        .contenu_infos{
        position : absolute;
        top: 5px;
        left: 10px;
        height:  225px;
        width: 190px;
        overflow : auto;
        }
       
        .credits{
        position : absolute;
        bottom: 5px;
        left :210px ;
        font-family: 'Calibri', sans-serif;
        font-size : 8px;
      color : #000000;
        }


    Code:
    <img src="https://pre00.deviantart.net/5c26/th/pre/f/2017/112/9/8/the_last_one_by_88grzes-db6preo.jpg"
              style="height:auto;width:450px;" />
           
            <div class="fond_fiche">
             
            <div class="banniere_nomdufo">
              <div class="nomdufo">
                <a class="a" href="#" target="_blank">
                  NOM DU FORUM </a>
              </div>
            </div>
              <div class="bloc_contexte">
                <div class="contenu_contexte">
              <div class="texte">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
               
              </div>
                </div>
              </div>
             
              <div class="bloc_liens" style="top:45px;"><div class="liensdufo">
                <a class="a" href="#" target="_blank">incipit</a> </div></div>
              <div class="bloc_liens" style="top:80px;"><div class="liensdufo">
                <a class="a" href="#" target="_blank">effectifs </a></div></div>
              <div class="bloc_liens" style="top:115px;"><div class="liensdufo">
                <a class="a" href="#" target="_blank">partenariats </a></div></div>
              <div class="bloc_liens" style="top:150px;"><div class="liensdufo">
                <a class="a" href="#" target="_blank">règlement </a></div></div>
              <div class="bloc_liens" style="top:185px;"><div class="liensdufo">
                <a class="a" href="#" target="_blank">autre </a></div></div>
                <div class="bloc_liens" style="top:220px;"><div class="liensdufo">
                <a class="a" href="#" target="_blank">autre </a></div></div>
                <div class="bloc_liens" style="top:255px;"><div class="liensdufo">
                <a class="a" href="#" target="_blank">autre </a></div></div>
             
                <div class="banniere_messages_membres">
              <span class="messages_membres">
                xx membres - xx messages
                  </span></div>
           
              <div class="soustitre_staff"> Staff </div>
                 
                          <div class="pseudostaff" style="top: 372px;" >
                            <div class="texte_pseudostaff">
                              <a class="a" href="#" target="_blank">Pseudo </a>
                            </div>
                    </div>
             
              <div class="texte_rangstaff" style="top : 398px;"> fondateur
               
              </div>
             
      <div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/cheval10.jpg');
        height:70px; width:70px;top : 364px;"></div>
     
                <div class="pseudostaff" style="top: 452px;" >
                            <div class="texte_pseudostaff">
                              <a class="a" href="#" target="_blank">Pseudolong </a>
                        </div>
                    </div>

              <div class="texte_rangstaff" style="top : 478px;"> administrateur & codeur
              </div>
             
      <div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/arbre_10.jpg');
        height:70px; width:70px;top : 444px;"></div>
             
                <div class="pseudostaff" style="top: 532px;" >
                            <div class="texte_pseudostaff">
                              <a class="a" href="#" target="_blank">Pseudo </a>
                        </div>
                    </div>
             
              <div class="texte_rangstaff" style="top : 558px;"> moderateur
              </div>

    <div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/lance_10.jpg');
        height:70px; width:70px;top : 524px;"></div>
             
             
              <div class="soustitre_infos" style=" margin : 0px; "> Infos </div>
             
              <div class="bloc_infos">
                <div class="contenu_infos">
                <div class="texte">
                  :arrow_forward: une première information importante sur ton forum : sa date de création ? une particularité ?
                  un évent en cours ? une description de l'ambiance ? quelque chose à venir ? une mise à jour
                  récente ? <br /><br />
                  :arrow_forward: une deuxième information importante sur ton forum : sa date de création ? une particularité ?
                  un évent en cours ? une description de l'ambiance ? quelque chose à venir ? une mise à jour
                  récente ? <br /><br />
          :arrow_forward: autre chose ?
                 
                  </div>
                </div>
                </div>
             
              <div class="credits">@Clém20</div>
             
              </div>
    Et les deux typographies utilisées :
    Code:
    <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Red+Hat+Display&display=swap" rel="stylesheet">

    Je vais apporter quelques précisions pour ceux qui seraient novices en codage et/ou ceux que cela intéresse :
    Précisions:

    - l'image en haut de la fiche a actuellement une largeur de 450 pixels et une hauteur définie en auto. Si vous regardez le code elle n'est pas "à l'intérieur" de la fiche, elle est au dessus, c'est pour éviter tout déréglage de la fiche si la hauteur de votre image était différente de celle de la mienne (car imaginons que votre image soit 50 pixels plus haute, tout le contenu de la fiche se retrouverait décalé de 50 pixels vers le bas et donc hors du fond de la fiche). Vous remarquez que sur le rendu il n'y a pas d'espace entre le bas de l'image et le haut de la fiche, ce qui arrive normalement si vous placez deux éléments indépendants à la suite. Si vous voulez que cela reste comme cela il vous faire attention à la ligne
    Code:
    top : -5px;
    de la fonction
    Code:
    .banniere_nomdufo{
    }
    dans le CSS. Il ne faudra pas la supprimer, si vous la modifiez vous pourrez au choix créer un espace entre l'image et la fiche ou faire remonter le bandeau sur votre image.

    - de manière générale si vous modifiez les balises
    Code:
    height : Xpx;
    width : Xpx;
    dans les fonctions du CSS les éléments de la fiche se retrouveront décalés d'une quelconque façon. Je vous le déconseille donc, sauf si vous avez le temps et l'envie de redimensionner tous les espacements de la fiche via les balises
    Code:
    top : Xpx;
    bottom : Xpx;
    left : Xpx;
    right : Xpx;
    des fonctions du CSS.

    - le "nom du forum", les "liens" et les "pseudos" peuvent être des liens vers des sujets de votre forum, il faudra pour cela placer l'url du sujet en question à la place du # entre les guillemets ici :
    Code:
     <a class="a" href="#" target="_blank"></a>
    Pour que votre fiche soit agréable à ceux qui la verront ne supprimez pas le
    Code:
    target="_blank"
    c'est la partie du code qui permet d'ouvrir un nouvel onglet avec le lien sélectionné. Pratique pour éviter les retours en arrière sur une unique page active Wink
    Pour terminer sur les liens, vous pouvez voir que dans ce code ils ont une class associée, c'est la première fonction du CSS. Vous pouvez bien sûr modifier la couleur des liens, pour ce qui est du
    Code:
    text-decoration : none;
    il permet d'empêcher que votre lien ne soit souligné, ce qui est nettement plus esthétique, faites attention à ne pas le supprimer.

    -enfin, s'il s'avère que le nom du forum, du lien ou le pseudo que vous voulez écrire est un peu trop long, vous pouvez réduire l'espacement entre les lettres, respectivement de 1px, 0.5px et 2px via cette balise
    Code:
    letter-spacing : Xpx;
    dans les fonctions associées au trois éléments précédemment cités. Si ce que vous voulez écrire est vraiment trop long il faudra modifier la taille de la div dans laquelle vous écrivez et par conséquent gérer sa disposition dans la fiche. Si jamais vous n'y arrivez pas n'hésitez pas à me demander par MP ou dans cette section du forum !


    Dernière édition par Argenty le Ven 8 Mai 2020 - 20:36, édité 3 fois
    Shaneliae
    Shaneliae
    FémininAge : 23Messages : 232

    le Dim 3 Mai 2020 - 1:24

    Déplacé !

    Un autre membre du staff ou moi-même passerons plus tard pour vérifier ton LS 😄



    Argenty
    Argenty
    FémininAge : 18Messages : 36

    le Dim 3 Mai 2020 - 14:21

    Merci beaucoup à toi ! Very Happy
    Shaneliae
    Shaneliae
    FémininAge : 23Messages : 232

    le Ven 8 Mai 2020 - 19:34

    Hello Argenty !

    Cette fois je viens pour la validation 😉 Alors d'abord un merci pour ton LS, pour un premier ici le rendu est intéressant. En plus de cela tu as laissé des explications 👌

    Malheureusement, avant de valider j'aurai besoin que tu fasses quelques corrections :
    • Ne pas utiliser de caractères avec accent dans le CSS et les class CSS : c'est une règle importante, même si en ajouter peut fonctionner sur des navigateurs récents, certains ne le supportent pas. Seuls sont supporter les lettres simples (en minuscules et majuscules), les chiffres et les tirets/undescores. Donc tes class contenant "bannière" ne sont pas valides.
    • Modifier le titre de ton LS : comme il est expliqué dans les règles de la section il faut mettre un titre décrivant ton LS. Donc il est inutile de préciser LS (puisque la fiche sera dans une section LS) et ton pseudo (on utilise un système de tags/mots-clé que l'on ajoute à la validation où l'on ajoute le nom de l'auteur). Nous préférons des titres décrivant la fiche comme la façon dont sont positionnés les éléments, le style ou les couleurs utilisées. Si tu souhaites avoir un autre pseudo pour les tags tu peux le demander dans ta réponse à ce message, sinon tu peux aussi dépenser des Peanut's pour faire changer ton pseudo et nous mettrons automatiquement ce dernier dans les tags 😉


    Une fois ces points corrigés, je peux valider et déplacer ton LS !



    Argenty
    Argenty
    FémininAge : 18Messages : 36

    le Ven 8 Mai 2020 - 20:39

    Bonsoir Shaneliae!
    Merci à toi Very Happy. J'ai modifié le nom de mes balises dans le CSS pour être dans les règles, tout comme le nom de mon sujet. Je ne sais pas s'il est suffisamment détaillé, je peux toujours rajouter qu'il y a quelques hover dedans si jamais :hum: .

    Voilà, s'il y a quoi que ce soit d'autres je le modifierais avec plaisir Very Happy
    Shaneliae
    Shaneliae
    FémininAge : 23Messages : 232

    le Sam 23 Mai 2020 - 15:51

    Ce LS est validé !Tout est bon pour nous. Le sujet va maintenant être déplacé dans la section appropriée. Des tags seront ajoutés au début du sujet et ce LS sera aussi ajouté à l'index correspondant.

    @Argenty merci pour ta contribution ! N'oublie pas d'ajouter 5XP Architecte dans ton profil pour ce LS.



    Kelalin
    Kelalin
    FémininAge : 27Messages : 2200

    le Sam 23 Mai 2020 - 23:36

    Très joli, j'aime beaucoup ! Merci pour le partage ! :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mai 2020 - 15:09