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.


    Be simple - Fiche technique

    Partagez
    avatar
    Namida
    FémininAge : 28Messages : 49

    le Jeu 10 Nov 2016 - 2:35


    Be simple - Fiche de techniques


    /!\ Cette section est présente pour vous aider avec vos problèmes de code. Je ne répondrais pas aux MPs que l'on m'enverra à ce sujet.

    Bonjour à tous,

    Voici mon deuxième CSS dans le cadre de mon projet "Be simple". Tout comme le précédant, celui-ci comporte quelques éléments nécessitant une mince connaissance en CSS pour mettre en place le message notamment concernant les titres (h1,h2,h3,h4) et les deux types de conteneurs. Utilisant ce design sur un forum RPG, j'ai pris la liberté de créer quelques classes supplémentaires pour la possibilité d'avoir deux fonds de couleurs différents ainsi que la possibilité de rendre un conteneur de texte à hauteur fixe avec défilement.

    Un petit "merci" est toujours apprécié. Je rappel aussi qu'enlever le crédit est interdit.

    Voici un aperçu de la fiche technique.

    À noter que l'image utilisée dans le CSS n'est pas disponible dans le code.


    HTML simplifié (avec class)


    Code:
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Advent+Pro|Megrim" rel="stylesheet" /><div class="besimplenamida_containerp"><center><a href="http://www.never-utopia.com/">Crédits: Namida - Never-Utopia</a></center><img class="besimplenamida_containerp_img" src="IMAGE_ICI_LA_TAILLE_CHANGE_EN_FONCTION_DU_CONTENEUR" />
    <div class="besimplenamida_ft_ctitre"><h1>TITRE DE LA FICHE</h1>
    <h2 style="margin-left:125px;">SOUS_TITRE</h2></div>

    <div class="besimplenamida_ft_cinventaires">
    <div class="besimplenamida_ft_cp_left"><div class="besimplenamida_ft_lt">TITRE ZONE A</div>
    TEXTE ZONE A</div><div class="besimplenamida_ft_cp_left besimplenamida_right"><div class="besimplenamida_ft_lt">TITRE ZONE B</div>
    TEXTE ZONE B</div></div>

    <h3>TITRE NORMAL</h3><div class="besimplenamida_ft_texte2">ZONE DE TEXTE A</div>
    <h3>TITRE NORMAL 2</h3>
    <h4>JE SUIS UN H4 CENTRÉ</h4><div class="besimplenamida_ft_texte">TEXTE CENTRER</div>
    <h4>JE SUIS UN H4 CENTRÉ</h4><div class="besimplenamida_ft_texte">TEXTE CENTRER</div>
    <h3>TITRE NORMAL</h3><div class="besimplenamida_ft_texte2 besimplenamida_overflow besimplenamida_ft_bg2">ZONE DE TEXTE AVEC UN DÉFILEMENT ET UN FOND DE COULEUR DIFFÉRENT.</div>
    </div></div>

    Il existe 2 types de titres, deux conteneurs et 2 variantes à ce code.

    Premièrement, les titres. Le h3 représente le titre avec le fond de couleur. Le h4 représente le titre vert centré.

    Deuxièmement, les deux conteneurs. Le premier possédant la class "besimplenamida_ft_texte2" représente celui sur fond vert de pleine longueur. Tandis que le second conteneur "besimplenamida_ft_texte" représente celui avec des bordures dont la longueur est plus petite que la fiche technique.

    Pour finir, si vous désirez prendre le deuxième fond de couleurs pour un conteneur de texte, utiliser la class "besimplenamida_ft_bg2" après "besimplenamida_ft_texte" ou "besimplenamida_ft_texte2".

    Pour mettre une hauteur fixe (texte trop long par exemple), simple ajouter la class "besimplenamida_overflow" à votre div ("besimplenamida_ft_texte" ou "besimplenamida_ft_texte2")


    CSS relatif à ce post


    Code:
    /*Be simple - fiche technique */
    .besimplenamida_containerp {
      padding: 10px 0px;
      width: 95%;
      max-width:640px;
      font-family: 'Josefin Sans', sans-serif;
      margin:auto;
      background-color: #eaeaea;
      border-left: 7px solid #619994;
      border-right: 7px solid #619994;
      box-shadow: 1px 1px 7px #7F7F7F;
    }
    /*Liens*/
    .besimplenamida_containerp a {
      text-align:center;
      color:#619994;
      text-decoration: none;
      font-size: 12px;
    }
    /*Liens survolés*/
    .besimplenamida_containerp a:hover {
      font-weight: bold;
      text-decoration: none;
    }

    /*Image du haut*/
    .besimplenamida_containerp_img {
      width:100%;
      height:auto;
      border-top: 2px solid #619994;
      border-bottom: 2px solid #619994;
      opacity:0.8;
    }
    /*Bloc titre haut*/
    .besimplenamida_ft_ctitre {
      max-height:50px;
      width:95%;
      margin-top:-80px;
      color:#5c3520; 
    }
    /*Titre haut*/
    .besimplenamida_ft_ctitre h1 {
      font-family: 'Megrim', cursive;
      font-size:50px;
      position:relative;
      text-shadow:1px 1px 0px #27413d;
      top:-25px;
      margin-left:60px;
      color:#71b3a9;
      font-weight:normal;
    }
    /*Sous-titre*/
    .besimplenamida_ft_ctitre h2 {
      padding-left:25px;
      font-size: 16px;
      text-shadow: 0px 0px 5px #fff;
      line-height: 2px;
      color: #5c3520;
      letter-spacing:3px;
      font-variant: small-caps;
      font-family: 'Advent Pro', sans-serif;
      font-weight:normal;
      margin-top: -52px;
      text-transform:initial;
      text-align:left;
    }

    /*2 blocs collés*/
    .besimplenamida_ft_cinventaires {
      height: 180px;
      width: 100%;
    }
    /*Chaque bloc collé*/
    .besimplenamida_ft_cp_left {
      width: 45%;
      height: 140px;
      background-color: #fff;
      overflow: auto;
      text-align: justify;
      font-size: 11px;
      line-height: 11px;
      padding: 6px;
      float: left;
      border-left: 7px solid #619994;
      border-right: 7px solid #619994;
      border-top: 1px solid #619994;
      border-bottom: 1px solid #619994;
      margin-left: 5%;
      box-sizing: border-box;
    }
    /*Bloc collé de droite*/
    .besimplenamida_right {
      margin-left: 0%;
    }
    /*Titre des 2 blocs collés*/
    .besimplenamida_ft_lt {
      font-size: 11px;
      color: #4a9288;
      text-align: left;
      font-variant: small-caps;
      font-weight:bold;
    }

    /*Titre simple*/
    .besimplenamida_containerp h3 {
      padding: 10px 5px;
      font-size: 20px;
      font-family: 'Megrim', cursive;
      color:#fff;
      letter-spacing: 5px;
      background-color: #67bdaf;
      font-weight:normal;
      margin: 0px;
    }
    /*Bloc de texte normal*/
    .besimplenamida_ft_texte2 {
      background-color: #94DBD1;
      text-align: justify;
      padding:10px;
    }

    /*Titre h4 centré*/
    .besimplenamida_containerp h4 {
      font-size:16px;
      font-family: 'Advent Pro', sans-serif;
      color:#4a9288;
      letter-spacing: 5px;
      font-weight:bold;
      text-transform:uppercase;
      font-size:16px;
      font-weight:800;
      text-align:center;
      margin: 0px;
    }
    /*Blocs avec une bordure à droite et à gauche*/
    .besimplenamida_ft_texte {
      margin: 10px 10px 0px 10px;
      background-color: #94DBD1;
      text-align: justify;
      padding: 10px;
      border-left: 7px solid #619994;
      border-right: 7px solid #619994;
    }

    /*Bloc de texte avec une hauteur fixe*/
    .besimplenamida_overflow {
      height:150px;
      overflow:auto;
    }
    /*Couleur de fond du bloc de texte avec hauteur fixe*/
    .besimplenamida_ft_bg2 {
      background-color:#BED4D1;
    }

    /!\ Si vous utilisez plusieurs éléments (Fiche de liens, fiche technique ou contenu de RP) assurez-vous de ne pas répéter une class lorsque vous allez insérer le code CSS sur votre site.


    Voilà! C'est tout pour ce code CSS
    avatar
    Invité

    le Jeu 19 Jan 2017 - 9:48

    Bonjour à toi @Namida !

    Tout d'abord merci pour ce LS et pardon pour ce temps d'attente relativement long.

    Je vais m'occuper de la validation de ta fiche mais il y a plusieurs points à corriger :

    - Tout d'abord tu peux simplifier les liens sur Google Fonts pour n'avoir qu'un seul "link" à mettre. Ce n'est pas grand chose mais ça simplifie un peu. Il te suffit pour cela de sélectionner les différentes polices qui t'intéresse directement puis de copier le lien.
    - Ensuite il y a une erreur que tu fais dans ton CSS pour tes class : ON NE MET AUCUNE MAJUSCULE. C'est une erreur courante surtout pour ceux ayant fait de la programmation, mais les majuscules sont mal supportées en CSS.
    - Je te conseille aussi de simplifier le nom de tes class, les LS sont souvent utilisés par des personnes ayant des difficultés avec les codes ou ne s'y connaissant presque pas, donc mettre des class compliquées et longues leur complique la tâche !
    - As-tu essayer ton code sur un ForumActif ? Je l'ai testé et je n'ai pas du tout le même affichage que toi ^^' Je te conseille de l'essayer sur un forum test ou en répondant à un message sans l'envoyer. En plus je crois qu'il y a une erreur dans ton HTML (sûrement une div mal fermée) parce que ton code a entraîné des problèmes sur la structure du forum quand je l'ai essayé.

    Le reste est bon, ton code est propre est le rendu est agréable. Encore merci pour ce LS !

    Corrige les points soulignés et je valide ton LS !
    avatar
    Mark-Delfino
    MasculinAge : 18Messages : 52

    le Lun 5 Juin 2017 - 17:52

    merci
    avatar
    Eerie Ange's
    FémininAge : 17Messages : 166

    le Lun 19 Juin 2017 - 8:37

    Merci ♥
    avatar
    Bunikkk
    MasculinAge : 23Messages : 41

    le Ven 23 Juin 2017 - 18:01

    Super, merci
    avatar
    Rêveuse
    FémininAge : 15Messages : 44

    le Mar 4 Juil 2017 - 12:14

    Magnifique, encore! Merci. ♥
    avatar
    Illeanëlia
    FémininAge : 32Messages : 88

    le Mar 4 Juil 2017 - 20:02

    merci très belle fiche
    avatar
    xAmy02
    FémininAge : 22Messages : 33

    le Jeu 6 Juil 2017 - 14:51

    Merci, très folie fiche
    avatar
    Velvetim
    MasculinAge : 19Messages : 11

    le Ven 13 Avr 2018 - 20:45

    merci
    avatar
    William Crosvà
    MasculinAge : 22Messages : 13

    le Sam 2 Juin 2018 - 17:36

    Hey merci beaucoup pour le partage !
    avatar
    Kaguyanis
    MasculinAge : 96Messages : 18

    le Dim 3 Juin 2018 - 17:12

    Merci !!!
    avatar
    Cacahuète blanche
    MasculinAge : 19Messages : 3

    le Sam 23 Juin 2018 - 7:11

    merci!
    avatar
    Kelalin
    FémininAge : 25Messages : 1945

    le Sam 23 Juin 2018 - 16:44

    Merci pour le partage :)
    avatar
    Néantise
    FémininAge : 21Messages : 5

    le Sam 7 Juil 2018 - 21:36

    Merci pour le partage ! Elle est juste trop belle
    Contenu sponsorisé


      La date/heure actuelle est Jeu 16 Aoû 2018 - 8:32