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.


    Fiche de présentation - Bandeau sur la gauche.

    Partagez
    avatar
    Rozenbrez
    FémininAge : 26Messages : 1362

    le Dim 26 Fév 2017 - 15:47

    Bien le bonjour à toutes et à tous.

    Aujourd'hui, je viens vous proposer une fiche de présentation dont les informations principales du personnage se trouve dans un bandeau à gauche, ce qui permet d'alléger la structure et de faire moins gros patté à la lecture. :)

    PHPB2 ▬ CSS&HTML ▬ Aperçu (screen)
    Si vous avez le moindre problème avec ce LS, n'oubliez pas que la section Problème avec mon code est à votre disposition.

    Merci de ne pas retirer le crédit qui se trouve sur le LS. :)


    Les Codes :


    Code HTML à placer dans votre message:
    Code:
    <div class="presentation_gauche"><div class="presentation_image"><img src="http://img11.hostingpics.net/pics/736400imagrpresentation.png" /></div>
    <div class="titre_gauche">Identité</div>
    <b>Sexe -</b>
    <b>Genre -</b>
    <b>Âge -</b>
    <b>Race -</b>
    <b>Peuple - </b>
    <b>Date de naissance -</b>
    <b>Lieu de naissance -</b>

    <div class="titre_gauche">Situation actuelle</div>
    <b>Lieu d’habitation -</b>
    <b>Orientation sexuelle -</b>
    <b>Situation maritale -</b>
    <b>Métier -</b>

    <div class="titre_gauche">Magie</div>
    <div class="description_gauche">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    <div class="titre_gauche">Inventaire</div>
    <div class="description_gauche">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    <div class="titre_gauche">Petite question</div>
    <center>En cas de départ,
    que faisons-nous de votre personnage</center>[] L'ajouter aux PNJs.
    [] Le considérer disparu.
    [] Le considérer mort.
    <div class="credit_presentation">(c)Codage en LS sur <a href="http://www.never-utopia.com" target="_blank">Never Utopia</a></div></div><div class="presentation_droite">
    <div class="presentation_pseudo">Prénom P. Nom</div>
    <div class="presentation_citation">« Citation du personnage qui peut être petite, moyenne, longue, voir même très très longue. C’est au choix du joueur. »</div>
    <div class="titre_droite">Physique</div>
    <div class="description-droite">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    <div class="titre_droite">Mental</div>
    <div class="description-droite">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    <div class="titre_droite">Biographie</div>
    <div class="description-droite">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    </div>

    Code CSS, à placer dans le feuille de style de votre forum:
    Code:
    /** Fiche de présentation du personnage **/.presentation_gauche,
    .presentation_droite{
    display:inline-block;
    vertical-align:top;
    }

    .presentation_gauche {
    background: #aa8e65;
    border-top: 8px solid #266d5e;
    border-bottom: 8px solid #266d5e;
    width: 230px;
    height: 975px;
    padding: 5px; }

    .presentation_droite {
    background: #c6a97e;
    border-top: 8px solid #266d5e;
    border-bottom: 8px solid #266d5e;
    width: 445px;
    height: 975px;
    padding: 5px;
    margin-left: -4px; }

    .presentation_image img {
    width: 190px;
      height: 150px;
    margin: 5px 0px 0px 17px; }

    .titre_gauche {
    background: #266d5e;
    width: 230px;
    color: #a0ebc4;
    text-align: center;
    font-size: 20px;
    margin-left: -5px;
    margin-bottom: -15px;
    padding: 5px; }

    .description_gauche {
    width: 230px;
    height: 100px;
    overflow: auto;
    text-align: justify; }

    .presentation_pseudo {
     width: 445px;
    text-align: center ;
    font-size: 45px;
    color: #266d5e;
    font-variant: small-caps; }

    .presentation_citation {
     width: 445px;
    text-align: center ;
    font-style: italic;}

    .titre_droite {
    background: #266d5e;
    width: 230px;
    color: #a0ebc4 ;
    text-align: center ;
    font-size: 20px;
    padding: 5px; }

    .description-droite {
    background: #aa8e65;
    margin-top: -18px;
    width: 435px;
    height: 240px;
    overflow: auto;
    text-align: justify;
    padding: 5px; }

    .credit_presentation {
    text-align: center;
      font-size: 10px; }
    /**Fin fiche de présentation du personnage **/

    Explications et décorticages de la fiche :


    La partie gauche : Le bandeau.


    C'est toute cette partie sur le code HTML:
    Code:
    <div class="presentation_gauche"><div class="presentation_image"><img src="http://img11.hostingpics.net/pics/736400imagrpresentation.png" /></div>
    <div class="titre_gauche">Identité</div>
    <b>Sexe -</b>
    <b>Genre -</b>
    <b>Âge -</b>
    <b>Race -</b>
    <b>Peuple - </b>
    <b>Date de naissance -</b>
    <b>Lieu de naissance -</b>

    <div class="titre_gauche">Situation actuelle</div>
    <b>Lieu d’habitation -</b>
    <b>Orientation sexuelle -</b>
    <b>Situation maritale -</b>
    <b>Métier -</b>

    <div class="titre_gauche">Magie</div>
    <div class="description_gauche">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    <div class="titre_gauche">Inventaire</div>
    <div class="description_gauche">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    <div class="titre_gauche">Petite question</div>
    <center>En cas de départ,
    que faisons-nous de votre personnage</center>[] L'ajouter aux PNJs.
    [] Le considérer disparu.
    [] Le considérer mort.
    <div class="credit_presentation">(c)Codage en LS sur <a href="http://www.never-utopia.com" target="_blank">Never Utopia</a></div></div>
    Si vous souhaitez y faire des modifications, elle est liée au CSS suivant :
    Code:
    .presentation_gauche {
    background: #aa8e65;
    border-top: 8px solid #266d5e;
    border-bottom: 8px solid #266d5e;
    width: 230px;
    height: 975px;
    padding: 5px; }

    L'image :


    Code:
    <div class="presentation_image"><img src="http://img11.hostingpics.net/pics/736400imagrpresentation.png" /></div>
    J'ai ajouté une image d'illustration pour que cela soit plus visuel. Vous pouvez choisir de la garder ou d'enlever cette partie. Pour éviter que mes membres ne mettent des images disproportionné et déforme la fiche, j'ai mis une largeur et une hauteur.
    Code:
    .presentation_image img {
    width: 190px;
     height: 150px;
    margin: 5px 0px 0px 17px; }
    - width: 190px; C'est la largeur.
    - height: 150px; C'est la hauteur.

    A vous de jouer avec les valeurs pour donner la taille que vous souhaitez à l'image.

    Les Titres :


    Code:
    <div class="titre_gauche">Mon Titre</div>
    Ceci est la balise html du titre de la partie, elle est reliée au CSS suivant :
    Code:
    .titre_gauche {
    background: #266d5e;
    width: 230px;
    color: #a0ebc4;
    text-align: center;
    font-size: 20px;
    margin-left: -5px;
    margin-bottom: -15px;
    padding: 5px; }

    Overflow


    Pour les deux parties "Magie" et "Inventaire", j'ai mis un overflow, si vous souhaitez en ajouter à d'autres partie, c'est le morceau de code html suivant :
    Code:
    <div class="description_gauche">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    Qui est liée au CSS suivant :
    Code:
    .description_gauche {
    width: 230px;
    height: 100px;
    overflow: auto;
    text-align: justify; }

    La partie de droite : le corps de la présentation.


    C'est toute cette partie sur le code HTML:
    Code:
    <div class="presentation_droite">
    <div class="presentation_pseudo">Prénom P. Nom</div>
    <div class="presentation_citation">« Citation du personnage qui peut être petite, moyenne, longue, voir même très très longue. C’est au choix du joueur. »</div>
    <div class="titre_droite">Physique</div>
    <div class="description-droite">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    <div class="titre_droite">Mental</div>
    <div class="description-droite">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    <div class="titre_droite">Biographie</div>
    <div class="description-droite">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    </div>
    Si vous souhaitez y apporter des modification, il faudra toucher au CSS suivant :
    Code:
    .presentation_droite {
    background: #c6a97e;
    border-top: 8px solid #266d5e;
    border-bottom: 8px solid #266d5e;
    width: 445px;
    height: 975px;
    padding: 5px;
    margin-left: -4px; }

    Le Pseudo :


    Le code HTML :
    Code:
    <div class="presentation_pseudo">Prénom P. Nom</div>
    Le Css lié :
    Code:
    .presentation_pseudo {
     width: 445px;
    text-align: center ;
    font-size: 45px;
    color: #266d5e;
    font-variant: small-caps; }

    La Citation :


    Le code HTML :
    Code:
    <div class="presentation_citation">« Citation du personnage qui peut être petite, moyenne, longue, voir même très très longue. C’est au choix du joueur. »</div>
    CSS lié :
    Code:
    .presentation_citation {
     width: 445px;
    text-align: center ;
    font-style: italic;}

    Les Titres :


    Le code HTML :
    Code:
    <div class="titre_droite">Physique</div>
    CSS lié :
    Code:
    .titre_droite {
    background: #266d5e;
    width: 230px;
    color: #a0ebc4 ;
    text-align: center ;
    font-size: 20px;
    padding: 5px; }

    Les Descriptions :


    Le code HTML :
    Code:
    <div class="description-droite">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
    CSS lié :
    Code:
    .description-droite {
    background: #aa8e65;
    margin-top: -18px;
    width: 435px;
    height: 240px;
    overflow: auto;
    text-align: justify;
    padding: 5px; }



    Dernière édition par Rozenbrez le Dim 26 Fév 2017 - 18:29, édité 5 fois

    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Dim 26 Fév 2017 - 17:15

    Coucou Rozenbrez ! Je te remercie du partage de ton code, il est franchement sympathique en plus :3

    J'aimerai cependant te faire remarquer quelques petites choses afin de rendre tes codes plus court, si tu n'y vois pas d'inconvénient.

    Dans un premier temps, j'ai remarqué que tu utilisais le système de tableau pour la mise en forme de ton code afin de mettre les deux éléments de la fiche côte à côte. C'est bien, mais tu aurais pu te simplifier la vie et alléger ton CSS en utilisant un autre système de mise en page.
    Il y a une propriété CSS qui se nomme display. Il y en a une attribuée dès le départ pour toute balise HTML. Par exemple, la valeur display de la balise span est inline. Cela veut dire qu'elle ne va pas faire de retour à la ligne comme un bloc le ferait quand elle se termine, mais qu'elle va pouvoir s'aligner avec une autre balise si c'est possible.
    Ici nous pouvons, par exemple, modifier la valeur de la propriété display par défaut de tes deux div contenant les blocs à gauche et à droite pour les aligner.

    De cette manière, en enlevant tes tableaux tu peux ajouter ceci à ton CSS
    Code:
    .presentation_gauche,
    .presentation_droite{
    display:inline-block;
    vertical-align:top;
    }
    Tu noteras que grâce à une virgule, on peut attribuer le même CSS à deux classes différentes sans se répéter ! Very Happy

    Par ailleurs, j'ai noté l'utilisation de ces balises
    Code:
    <center></center>
    Tu peux l'utiliser en soit, mais je ne pense pas qu'il soit judicieux de garder comme habitude celle d'utiliser des balises obsolètes. Bien qu'elle soit généralement supportée par les navigateurs et encore très utilisée, il est préférable d'utiliser plutôt cette propriété si tu veux centrer un texte ou une image.
    Code:
    text-align:center;

    De même, si d'aventure tu veux centrer un bloc (je ne sais pas si tu le sais, auquel cas désolée même si un rappel ne fais jamais de mal), tu peux aussi utiliser cette propriété avec la valeur suivante
    Code:
    margin:auto;

    J'ai également noté le fait que, lorsqu'on installe la fiche dans un message, il y a un saut de ligne dans les blocs de gauche. Du coup il faudrait retirer le saut de ligne juste après tes blocs pour ceux qui concernent les blocs de gauche (c'est pas très clair comme explications, je l'admet xD)

    Aussi j'ai pu remarquer que sur ton screen, il y avait une police spécifique pour les titres qui n'est pas présente dans le code. Ca peut tromper les utilisateurs et ils peuvent penser que c'est un bug si jamais la police n'est pas la même sur leur forum et sur le screen. Serait-il possible de l'ajouter du coup ? :)

    En tout cas c'est génial toutes ces explications, ça va vraiment faciliter la personnalisation pour les membres ! :love:

    Voilà j'ai fini :face:

    EDIT : Comme on a vu ça par MP du coup c'est bon ! Je déplace ça en section.
    Encore merci de ton partage Wink



    avatar
    Cassisse
    FémininAge : 25Messages : 114

    le Mer 1 Mar 2017 - 1:36

    jolie merciii
    avatar
    Kelalin
    FémininAge : 25Messages : 1724

    le Mer 1 Mar 2017 - 14:49

    Merci pour le partage !
    avatar
    Deran
    MasculinAge : 23Messages : 10

    le Mer 15 Mar 2017 - 19:02

    Merci.
    avatar
    Edward Speleers
    FémininAge : 29Messages : 452

    le Dim 21 Mai 2017 - 17:45

    Merci pour ce partage



    avatar
    Mymyy
    FémininAge : 18Messages : 33

    le Dim 21 Mai 2017 - 20:46

    Merceee
    avatar
    Mymyy
    FémininAge : 18Messages : 33

    le Dim 21 Mai 2017 - 20:46

    Merceee
    avatar
    Didgeridoo
    MasculinAge : 17Messages : 19

    le Dim 21 Mai 2017 - 23:26

    M e r c i b e a u c o u p s
    Contenu sponsorisé


      La date/heure actuelle est Ven 15 Déc 2017 - 5:30