- Kaerin
- Informations : Présente du vendredi au dimanche seulement.
Pseudo Discord : Kaerin
Messages : 168
[Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Lun 16 Mar 2020 - 4:45
Coucou :3 Voilà, je bosse sur les différentes fiches d'Apple Cove (du LS comme j'ai aucun codeur/graphiste attitré au forum ^^) mais j'ai un gros soucis avec la taille de la fiche. Elle prends 100% de la largeur du forum et ça rends super moche ._. du coup j'aimerais savoir comment faire pour que la fiche soit moins grosse en largeur, j'aimerais idéalement du 600px de large :3. Je vous fournis le css et le html ci-dessous que vous puissiez vous aussi voir Il faut savoir que mon forum fait 1307px de large XD
CSS
HTML
Merci d'avance '-'
CSS
- Code:
.bp_adcb{
--un: #212121; /*gris-noir*/
--deux: #8C8C8C; /*gris moyen*/
--trois: #BEBEBE; /*gris clair*/
--quatre: #AF3232; /*rouge clair*/
--cinq: #782828; /*rouge foncé*/
--f-nb1: grayscale(100%) contrast(60%) brightness(80%); /*filtre n&b fort*/
--f-nb2: grayscale(100%) contrast(80%) brightness(90%); /*fitre n&b faible*/
/*mise en forme du texte principal, supprimer pour ajuster à la police initiale du forum*/
color: var(--un);
font-family: Verdana;
font-size: 12px;
line-height: 15px;
text-align: left;
}
/*soulignement des <u>, supprimer selon besoin*/
u{
text-decoration: none;
border-bottom: 2px solid;
}
ttt{
display: block;
/*mise en forme du titre, vous pouvez le reprende pour d'autres parties de votre forum*/
color: var(--quatre);
font-family: Dorsa;
font-size: 60px;
font-weight: bold;
letter-spacing: 10px;
line-height: 55px;
text-transform: uppercase;
}
/*mise en forme des lignes du titre paires*/
ttt:nth-of-type(even){
color: var(--trois);
font-size: 50px;
}
/*mise en forme du texte mis en évidence*/
st{
color: var(--cinq);
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
}
/*couleur du texte dans l'intitulé*/
.intitule_adcb{
color: var(--trois);
}
/*----- GÉNERAL GÉNERAL GÉNERAL -----*/
.bp_adcb{
background: var(--un);
margin: auto;
position: relative;
padding: 400px 0px var(--marge);
--hauteur: 350px; /*hauteur de la grande image; si modifiée, changer également le 400px juste au-dessus (hauteur-image + 50px)*/
width: 500px; /*largeur totale de la présentation*/
--marge-haut: 50px; /*marges de séparation entre plusieurs blocs*/
--marge: 50px; /*marges gauches des blocs de droite*/
--largeur: 450px; /*largeur des blocs*/
/*si vous modifiez la largeur totale de la présentation, veillez à ce que la somme de la marge (gauche) et la largeur des blocs lui soient toujours égale*/
--large: 245px; /*hauteur du large bloc*/
}
/*créditer ailleurs dans le forum si vous enlevez cette partie de la présentation, merci*/
.bp_adcb::after{
content: "(c) ANESIDORA";
position: absolute;
bottom: 10px;
left: 60px;
color: var(--cinq);
font-size: 10px;
letter-spacing: 24px;
}
.bp_adcb, .bp_adcb div{
box-sizing: border-box;
}
scroll{
display: block;
flex: 1 1;
width: 100%;
height: 100%;
padding-right: 30px;
overflow: auto;
}
scroll::-webkit-scrollbar{
opacity: 0;
width: 4px;
height: auto;
}
scroll::-webkit-scrollbar-thumb{
border-radius: 2px;
background: var(--un);
}
.bp_adcb table{
width: 100%;
height: 100%;
border-collapse: collapse;
}
/*----- ENTÊTE ENTÊTE ENTÊTE -----*/
[class*=img_adcb]{
width: var(--largeur);
height: var(--hauteur);
position: absolute;
top: 0px;
right: 0px;
border-radius: 0px 0px 0px 85%;
filter: var(--f-nb1);
z-index: 2
}
.over_img_adcb{
z-index: 4;
}
.over_img_adcb:hover ~ .img_adcb{
filter: var(--f-nb2);
}
.titre_adcb{
width: var(--largeur);
height: var(--hauteur);
position: absolute;
top: 0px;
right: 0px;
}
.titre_adcb table{
height: 0px;
position: absolute;
bottom: 0px;
z-index: 2;
}
.bordure_adcb{
width: 100%;
height: 15px;
background: var(--trois);
}
/*----- BLOCS BLOCS BLOCS -----*/
[class*=b_adcb]{
display: flex;
width: var(--largeur);
height: 245px;
background: var(--deux);
margin-top: var(--marge-haut);
}
.droite_b_adcb{
margin-left: var(--marge);
}
.petit_b_adcb{
height: 130px;
}
.colonne_adcb{
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 0 0 130px;
background: var(--cinq);
padding: 15px;
}
.ic_adcb{
flex: 0 0 100px;
width: 100px;
height: 100px;
filter: var(--f-nb2);
}
.ic_adcb:hover{
filter: var(--f-nb1);
}
.texte_adcb{
display: flex;
flex-direction: column;
flex: 1;
padding: 30px;
}
.intitule_adcb{
width: 100%;
background: var(--cinq);
padding: 5px;
margin-bottom: 15px;
text-align: center;
}
.large_adcb{
display: flex;
flex-direction: column;
width: 100%;
height: var(--large);
background: var(--deux);
margin-top: var(--marge-haut);
padding: 30px;
}
HTML
- Code:
<div class="bp_adcb"> <div class="over_img_adcb"></div> <div class="img_adcb" style="background: /*
URL GRANDE IMAGE*/url(https://images2.imgbox.com/be/a5/zhwW4GRn_o.jpg) 50% 50% / cover;"></div> <div class="titre_adcb"> <table><tr><td><!--
--><ttt>prénom</ttt> <ttt>second prénom</ttt> <ttt>nom de famille</ttt><!--
--></td></tr></table> </div> <div class="bordure_adcb"></div> <div class="gauche_b_adcb"> <div class="texte_adcb"> <st><div class="intitule_adcb"><!--
-->ft. avatar </div></st> <scroll><!--
--><st>prénom & nom :</st> écrire ici. <st>▲ âge, date et lieux de naissance :</st> écrire ici. <st>▲ nationalité et origines :</st> écrire ici. <st>▲ métier, études :</st> écrire ici. <st>▲ orientation sexuelle :</st> écrire ici. <st>▲ statut civil :</st> écrire ici. <st>▲ traits de caractère :</st> écrire ici, une dizaine. <st>▲ groupe :</st> écrire ici. <st>▲ crédits :</st> écrire ici. </scroll> </div> <div class="colonne_adcb"> <div class="ic_adcb" style="background: /*
URL ICONE*/url(https://78.media.tumblr.com/5fa01f473cad6da981033232d9235c10/tumblr_ozs8spfopK1wcpipoo7_100.png) 50% 50% / cover;"></div> <div class="ic_adcb" style="background: /*
URL ICONE*/url(https://78.media.tumblr.com/e3f038fd7fde950e3dcdb9c990fb2179/tumblr_ozs8spfopK1wcpipoo5_100.png) 50% 50% / cover;"></div> </div> </div> <div class="droite_b_adcb"> <div class="colonne_adcb"> <div class="ic_adcb" style="background: /*
URL ICONE*/url(https://78.media.tumblr.com/5fa01f473cad6da981033232d9235c10/tumblr_ozs8spfopK1wcpipoo7_100.png) 50% 50% / cover;"></div> <div class="ic_adcb" style="background: /*
URL ICONE*/url(https://78.media.tumblr.com/e3f038fd7fde950e3dcdb9c990fb2179/tumblr_ozs8spfopK1wcpipoo5_100.png) 50% 50% / cover;"></div> </div> <div class="texte_adcb"> <st><div class="intitule_adcb"><!--
-->feel free not to talk </div></st> <scroll><!--
-->récapitulatif, faits et anecdotes sur le personnage, questions propres au forum, bucketlist, secrets inavouables, playlist, <u>ce que vous voulez</u>. récapitulatif, faits et anecdotes sur le personnage, questions propres au forum, bucketlist, secrets inavouables, playlist, ce que vous voulez. récapitulatif, faits et anecdotes sur le personnage, questions propres au forum, bucketlist, secrets inavouables, playlist, ce que vous voulez. récapitulatif, faits et anecdotes sur le personnage, questions propres au forum, bucketlist, secrets inavouables, playlist, ce que vous voulez. récapitulatif, faits et anecdotes sur le personnage, questions propres au forum, bucketlist, secrets inavouables, playlist, ce que vous voulez. </scroll> </div> </div> <div class="large_adcb"> <scroll><!--
-->l'histoire ici, sous la forme souhaitée, en points, en liste, en journal, en prose, en poésie, en lettre ouverte, en avion, en retard, emballée, endive, encens, ambiance, amphibien, amphithéâtre. l'histoire ici, sous la forme souhaitée, en points, en liste, en journal, en prose, en poésie, en lettre ouverte, en avion, en retard, emballée, endive, encens, ambiance, amphibien, amphithéâtre. l'histoire ici, sous la forme souhaitée, en points, en liste, en journal, en prose, en poésie, en lettre ouverte, en avion, en retard, emballée, endive, encens, ambiance, amphibien, amphithéâtre. l'histoire ici, sous la forme souhaitée, en points, en liste, en journal, en prose, en poésie, en lettre ouverte, en avion, en retard, emballée, endive, encens, ambiance, amphibien, amphithéâtre.</scroll> </div> <div class="petit_b_adcb"> <div class="texte_adcb"> <scroll><!--
--><st>prénom, pseudo :</st> écrire ici. <st>▲ âge, pays :</st> écrire ici. <st>▲ pré-lien, scénario ? :</st> écrire ici. si oui, taguer le créateur dudit pl/scénar. <st>▲ avis sur le forum :</st> écrire ici. <st>▲ mot de la fin :</st> écrire ici. fais-toi plaisir, c'est ton heure de gloire. </scroll> </div> <div class="colonne_adcb"> <div class="ic_adcb" style="background: /*
URL ICONE*/url(https://78.media.tumblr.com/5fa01f473cad6da981033232d9235c10/tumblr_ozs8spfopK1wcpipoo7_100.png) 50% 50% / cover;"></div> </div> </div> </div>
Merci d'avance '-'
Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Lun 16 Mar 2020 - 11:25
Hello
J'ai testé ton code. Alors déjà il n'est pas super simple à comprendre ^^. Mais je vois qu'il y a bien une largeur déjà qui est fixe à 500px. Ca ne fonctionne pas sur ton forum ?
J'ai testé ton code. Alors déjà il n'est pas super simple à comprendre ^^. Mais je vois qu'il y a bien une largeur déjà qui est fixe à 500px. Ca ne fonctionne pas sur ton forum ?
- Kaerin
- Informations : Présente du vendredi au dimanche seulement.
Pseudo Discord : Kaerin
Messages : 168
Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Lun 16 Mar 2020 - 14:36
Hello :3 non pas du tout ça me fait un truc hyper chelou x_x attends je te donne le lien du résultat XD
https://applecove.forumactif.com/t24-formulaire-de-presentation-obligatoire
https://applecove.forumactif.com/t24-formulaire-de-presentation-obligatoire
Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Lun 16 Mar 2020 - 14:50
Je vois qu'il y a cette class css qui empêche la bonne execution du code :
Je ne sais pas si ce code est utile, mais il faut mieux le cibler parce que ça casse tout
- Code:
.ASjt_text-cadre div {
width: 100%;
min-height: 505px;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
background: #fff;
font-family: calibri;
font-size: 12px;
}
Je ne sais pas si ce code est utile, mais il faut mieux le cibler parce que ça casse tout
- Kaerin
- Informations : Présente du vendredi au dimanche seulement.
Pseudo Discord : Kaerin
Messages : 168
Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Lun 16 Mar 2020 - 14:53
Oui c'est ce qui donne la largeur à mes messages et profils, sans ça justement ça casse aussi ce code-ci. Je sais plus quoi faire là xD
Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Lun 16 Mar 2020 - 14:56
Alors rajout juste le symbole ">" avant le div, comme ça :
- Code:
.ASjt_text-cadre > div
- Kaerin
- Informations : Présente du vendredi au dimanche seulement.
Pseudo Discord : Kaerin
Messages : 168
Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Lun 16 Mar 2020 - 15:03
Oh ça fonctionne merci beaucoup '-' Dis, juste par curiosité, tu peux m'expliquer ce que ça fait ?
Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Lun 16 Mar 2020 - 15:13
En gros, comme c’était fait avant, le css s’appliquait à toutes les div à l’intérieur du coup c’était compliqué. Alors que le > cible uniquement l’enfant direct, et non pas toutes les div
- Kaerin
- Informations : Présente du vendredi au dimanche seulement.
Pseudo Discord : Kaerin
Messages : 168
Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Lun 16 Mar 2020 - 15:22
Aaaaaah ok je vois, c'est plus clair pour moi comme ça '-' Merci encore une fois Nevyin
Demande terminée :3
Demande terminée :3
Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Lun 16 Mar 2020 - 15:26
Je t'en prie, avec plaisir
- MävenRâleuse (Admin)
- Informations : Très peu présente en ce moment
----
Viens papoter avec nous sur le discord
Messages : 4053
Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]
Mar 17 Mar 2020 - 9:16
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|