Ajout d'une catégorie

Coucou Awful ! Déjà bon retour et félicitations pour ta MAJ !  Nous étions NOMBREUX à attendre ton retour !

Du coup je viens déjà t'embêter, toutes mes excuses  

Code concerné par le problème : Lien

Décrivez votre problème : En soit ce n'est ABSOLUMENT PAS un problème mais plutôt une question, parce que j'adore ce petit code il est PARFAIT.

Je voudrais savoir si c'était possible de rajouter une seconde section comme la section "histoire" dans le hide, juste en dessous de celle-ci. En gros un c/c de ce morceau de code à ajouter en dessous. Cela serait pour ajouter une description de pouvoirs ou une description physique !

Voilàààààà j'espère que ce n'est pas grand chose pour toi ou que ça ne te dérange pas   Evidemment je ne te demande pas de changer ton code initial ! Mais si tu pouvais m'expliquer comment ajouter une seconde section ça me sauverait la vie ! (Et encore une fois je comprendrais parfaitement si tu devais refuser !)

Un grand merci pour avoir pris le temps de lire ce message et bonne continuation !

Bonjour Icyhot !
Et merci beaucoup


J'avais oublié l'existence de ce code, haha, du coup j'ai remarqué que les liens des images étaient morts, j'en ai profité pour les remplacer, merci du coup xD
Et sinon, si je comprends bien, tu voudrais pouvoir ajouter un titre + un paragraphe sous "Histoire" ? Parce qu'il me semble que je m'étais arrangé pour tout caser dans la hauteur de 400 pixels, donc avec une section en plus, ça dépassera et il faudra un overflow, ça n'est pas grave ? (Parce qu'il y a déjà l'overflow de la section "histoire", ça va peut-être faire beaucoup ?)

Du coup si c'est bien le cas, ce qui correspond à la section que tu souhaites ajouter, c'est ce morceau de code :

Code:

<h4>Histoire</h4><!--
--><div class="hist">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>

Donc il te suffirait de l'ajouter à la suite, comme ça :

Code:

<div class="wrap-pred"><!--
--><img src="https://via.placeholder.com/250x400" class="avatar-pred"><div class="infos-pred name"><!--
--><img src="https://via.placeholder.com/100x100" class="icon"><div class="nm"><!--
--><h2><b>Name</b> surname</h2><!--
--><h3>Group name</h3></div><!--
--><div class="statut libre">Libre</div><div class="hover-pred"><!--
--><div>Âge</div><!--
--><div>Métier</div><!--
--></div></div><div class="infos-pred"><h4>Caractère</h4><div class="cara"><ul><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li></ul></div><!--
--><h4>Histoire</h4><!--
--><div class="hist">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div><!--
--><h4>Nouvelle section</h4><!--
--><div class="hist">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div></div><div class="pred-credit"><a href="https://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Pour éviter que ton contenu ne dépasse, on ajoute un overflow à .infos-pred

Code:

.infos-pred {
    ...
    overflow: auto;
}

Et pour éviter que le contenu ne colle en bas, un petit margin à .hist :

Code:

.hist {
    ...
    margin-bottom: 15px;
}

Comme la section d'à côté qui affiche le nom et prénom utilise la même class, on va aussi ajouter un petit bout de code pour éviter d'avoir un overflow dessus :

Code:

.name {
    ...
    overflow: initial;
}

Et en résumé, ça donne ça :



Le HTML complet :

Code:

<div class="wrap-pred"><!--
--><img src="https://via.placeholder.com/250x400" class="avatar-pred"><div class="infos-pred name"><!--
--><img src="https://via.placeholder.com/100x100" class="icon"><div class="nm"><!--
--><h2><b>Name</b> surname</h2><!--
--><h3>Group name</h3></div><!--
--><div class="statut libre">Libre</div><div class="hover-pred"><!--
--><div>Âge</div><!--
--><div>Métier</div><!--
--></div></div><div class="infos-pred"><h4>Caractère</h4><div class="cara"><ul><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li><!--
--><li>Trait de caractère</li></ul></div><!--
--><h4>Histoire</h4><!--
--><div class="hist">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div><!--
--><h4>Nouvelle section</h4><!--
--><div class="hist">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div></div><div class="pred-credit"><a href="https://terrible.forumactif.org/" target="_blank">Awful</a></div></div>

Le CSS complet :

Code:

@import url('https://fonts.googleapis.com/css?family=Hind+Siliguri:400,700|Raleway:400,900');
.wrap-pred {
   width: 500px;
   height: 400px;
   overflow: hidden;
   margin: auto;
   position: relative;
   font-family: 'Hind Siliguri', sans-serif;
   color: #000;
}

.avatar-pred {
   position: absolute;
   width: 250px;
   height: 400px;
}

.infos-pred {
   width: 250px;
   height: 400px;
   background-color: #f3f3f3;
   position: absolute;
   top: -400px;
   transition: all 0.3s;
   overflow: auto;
}

.wrap-pred:hover .infos-pred {
   top: 0;
}

.name {
   position: absolute;
   left: 250px;
   top: 0;
   overflow: initial;
}

.infos-pred h2 {
   color: #000;
   font-size: 24px;
   font-family: 'Raleway', sans-serif;
   font-weight: 400;
   text-transform: uppercase;
   text-align: center;
   margin: 150px 0 0;
}

.infos-pred h3 {
   border: 0;
   color: #000;
   font: 200 11px 'Raleway', sans-serif;
   text-transform: lowercase;
   text-align: center;
   margin: 0 0 15px 0;
}

.infos-pred h4 {
   font: 900 15px 'Raleway', sans-serif;
   text-transform: uppercase;
   margin: 0;
   padding: 10px 10px 0;
   letter-spacing: 1px;
}

.icon {
   position: absolute;
   margin-left: 75px;
   transform: translate(0, -100%);
   transition: all 0.4s;
   width: 100px;
   height: 100px;
}

.wrap-pred:hover .icon {
   transform: translate(0, 0);
}

.nm {
   transform: translate(0, 0);
   transition: all 0.4s;
}

.wrap-pred:hover .nm {
   transform: translate(0, -40px);
}

.statut {
   font: 25px 'Raleway', sans-serif;
   text-transform: uppercase;
   text-align: center;
   border: 1px solid #000;
   width: 70%;
   margin: auto;
   transform: translate(0, 0);
   transition: all 0.4s;
}

.libre {
   color: #70E669;
   border-color: #70E669;
}

.reserve {
   color: #FFB279;
   border-color: #FFB279;
}

.pris {
   color: #F35454;
   border-color: #F35454;
}

.wrap-pred:hover .statut {
   transform: translate(0, -300px);
}

.hover-pred {
   width: 80%;
   margin: auto;
   line-height: 140%;
   text-transform: uppercase;
   font-size: 10px;
   letter-spacing: 1px;
   transform: translate(0, 200px);
   transition: all 0.4s;
}

.wrap-pred:hover .hover-pred {
   transform: translate(0, -50px);
}

.cara {
   height: 170px;
   overflow: auto;
}

.hist {
   height: 140px;
   width: 90%;
   line-height: 130%;
   font-size: 11px;
   text-align: justify;
   overflow: auto;
   margin: auto;
   padding: 5px;
   margin-bottom: 15px;
}

.cara ul {
   padding: 0;
   margin: 0
}

.cara ul li {
   list-style-type: none;
   background-color: #e3e3e3;
   margin: 2px 0;
   font-size: 10px;
   padding: 0 5px;
}

.cara ul li:nth-child(even) {
   text-align: right;
}

.pred-credit {
   position: absolute;
   right: 5px;
   bottom: 5px;
}

.pred-credit a {
   text-decoration: none !important;
   font-size: 8px;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #bababa !important;
}

Voilà j'espère que ça répond à ta question ! c:

Tu es d'une rapidité !

Franchement je l'adore ce code

MERCI BEAUCOUP ! C'est carrément ça du coup ! C'est juste qu'effectivement j'avais essayé de l'ajouter par moi même mais je suis vraiment NOVICE dans le codage, et du coup ça foirait ! (la catégorie se mettait sur l'image ) mais franchement comme ça c'est nickel !

Et merci d'avoir pris le temps de me faire un petit tuto comme ça je peux apprendre en même temps !

ça fait beaucoup de merci mais tu mérites ! DES BISOUUUUS et à bientôt !

De rien !
Ravi que ça te convienne et content d'avoir pu aider