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.


    Fiche de présentation - Bandeau sur la gauche.

    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    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 CSS, à placer dans le feuille de style de votre forum:

    Explications et décorticages de la fiche :


    La partie gauche : Le bandeau.


    C'est toute cette partie sur le code HTML:
    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:
    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
    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 975

    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
    Cassisse
    Cassisse
    FémininAge : 31Messages : 128

    Mer 1 Mar 2017 - 1:36

    jolie merciii
    Anonymous
    Invité

    Mer 1 Mar 2017 - 14:49

    Merci pour le partage !
    Deran
    Deran
    MasculinAge : 29Messages : 10

    Mer 15 Mar 2017 - 19:02

    Merci.
    Edward Speleers
    Edward Speleers
    MasculinAge : 35Messages : 460

    Dim 21 Mai 2017 - 17:45

    Merci pour ce partage



    Fiche de présentation - Bandeau sur la gauche. Edkidd11
    Mymyy
    Mymyy
    FémininAge : 24Messages : 55

    Dim 21 Mai 2017 - 20:46

    Merceee
    Mymyy
    Mymyy
    FémininAge : 24Messages : 55

    Dim 21 Mai 2017 - 20:46

    Merceee
    Didgeridoo
    Didgeridoo
    MasculinAge : 23Messages : 32

    Dim 21 Mai 2017 - 23:26

    M e r c i b e a u c o u p s
    PrimeHuntress
    PrimeHuntress
    FémininAge : 33Messages : 47

    Ven 18 Déc 2020 - 23:21

    Très beau travail Very Happy
    Merci de le partager avec nous :)



    Je recherche un scénario important pour mon personnage que vous trouverez juste ici
    by wiise
    PrimeHuntress
    PrimeHuntress
    FémininAge : 33Messages : 47

    Ven 18 Déc 2020 - 23:24

    Très beau travail Very Happy
    Merci de le partager avec nous :)



    Je recherche un scénario important pour mon personnage que vous trouverez juste ici
    by wiise
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:46