La tambouille des râleuses
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment :
Google Pixel 7 5G – Smartphone 6,3″ OLED ...
Voir le deal
316 €

Aller en bas
Kaerin
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é] Empty [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 Smile Il faut savoir que mon forum fait 1307px de large XD

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 '-'


Dernière édition par Kaerin le Lun 16 Mar 2020 - 15:22, édité 1 fois
Nevyin
Nevyin
Pseudo Discord : nevyin_
Messages : 95
https://www.xoogge.fr

[Aide Codage] Besoin d'aide pour une fiche de présentation [terminé] Empty Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]

Lun 16 Mar 2020 - 11:25
Hello Smile

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
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é] Empty 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
Nevyin
Nevyin
Pseudo Discord : nevyin_
Messages : 95
https://www.xoogge.fr

[Aide Codage] Besoin d'aide pour une fiche de présentation [terminé] Empty 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 :
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
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é] Empty 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
Nevyin
Nevyin
Pseudo Discord : nevyin_
Messages : 95
https://www.xoogge.fr

[Aide Codage] Besoin d'aide pour une fiche de présentation [terminé] Empty 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
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é] Empty 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 ? Surprised
Nevyin
Nevyin
Pseudo Discord : nevyin_
Messages : 95
https://www.xoogge.fr

[Aide Codage] Besoin d'aide pour une fiche de présentation [terminé] Empty 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
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é] Empty 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
Nevyin
Nevyin
Pseudo Discord : nevyin_
Messages : 95
https://www.xoogge.fr

[Aide Codage] Besoin d'aide pour une fiche de présentation [terminé] Empty 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 Smile
Mäven
Mäven
Râleuse (Admin)
Informations : Très peu présente en ce moment Sad
----
Idea Viens papoter avec nous sur le discord

Messages : 4053
https://tambouille-raleuses.forumactif.com/

[Aide Codage] Besoin d'aide pour une fiche de présentation [terminé] Empty Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]

Mar 17 Mar 2020 - 9:16
Merci d'avoir fait appel à nous @Kaerin et Merci @Nevyin =)

J'archive du coup Smile
Contenu sponsorisé

[Aide Codage] Besoin d'aide pour une fiche de présentation [terminé] Empty Re: [Aide Codage] Besoin d'aide pour une fiche de présentation [terminé]

Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Les coups de ♥ des Râleuses

Post-It des Râleuses