avatar
Sexe : Féminin
Date d'inscription : 27/09/2018
Messages : 22
Bonsoir, bonjour.
je suis désolée, c'est encore moi.   (je passe ma vie ici m'voyez)
mais je reviens avec un nouveau problème (comme c'est étonnant), je pense avoir été trop gourmande au niveau de mes ambitions pour le codage de profil et je me cogne encore une fois contre un problème. Je suis désolée pour les codes en pagaille et le manque d'organisation, mais j'espère que ce sera un peu clair et vous pourrez m'aider à trouver une solution.
Merci d'avance.    


Quelle structure est concernée par votre problème ? profil et la template viewtopic_body.
Qu'elle est l'adresse du forum concerné (sous hide si cela vous dérange) ? http://iceandfiremanon.forumieren.de/
Un screen du problème :
Spoiler:
Expliquez précisément votre problème : Alors en gros j'ai pour objectif de faire des profils en onglets. Le premier onglet doit contenir les informations (pseudo/âge/gif/célébrité/etc) et le second onglet des informations pour la feuille de personnage. Mon souci est que j'ai réussi à faire des onglets pour ma pa ainsi que pour des formulaires, mais je ne suis pas sûre que le code fonctionne dans mes profils. Comme vous allez voir, actuellement dans mes codes c'est le bordel et je suis désolée de ce chaos, vraiment.
Comme vous pouvez le voir sur le screenshot (ou sur le forum si vous allez dessus) le code fait quelque chose mais pas ce que je veux. :face: en gros il y a les carrés, mais les onglets ne marchent pas. Et après avoir plusieurs fois regardé le truc, je comprends pas pourquoi. (il faut pas faire attention aux dimensions, elles sont pas encore correctes, je comptais tout ajuster quand les onglets seraient mis en place). Si vous avez besoin de plus de screens ou d'infos, surtout n'hésitez pas.
Les codes :
TEMPLATE:
Code:
<!-- OUVERTURE DU FOND PROFIL -->
                  <center><div class="img_pourfairejolie"></div></center>
                  <div class="bloc_profil">
             <center>
                <span class="postdetails poster-profile">
               <center><div class="pseudo_profil">
                    <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><span class="titre_bitch"><strong>{postrow.displayed.POSTER_NAME}</strong></span>
                    <br/><span class="rank_bitch">{postrow.displayed.POSTER_RANK}</span></div></center>
                 <center><div class="avatar_profil">{postrow.displayed.POSTER_AVATAR}</div></center>
                
                 <div class="champ_profil">
                         <input checked="" name="champ_profil " id="infos_principales" type="radio" /> <input name="champ_profil" id="more_profil" type="radio" />
 <div class="boutons_profil">
                         <label for="infos_principales" class="lab infoss">infos</label> <label for="more_profil" class="lab moree">more</label> </div>
                                                
 <div class="internee">
                                                
 <div class="contenu infoss">
 <center><div class="rank_bitch2">{postrow.displayed.RANK_IMAGE}</div></center><hr>
 <!-- BEGIN profile_field -->
                      
                                  <div class="intitulés_profil"><w>{postrow.displayed.profile_field.LABEL}</w> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
                        
 
                       <!-- END profile_field --></div><!-- FERMETURE FOND PROFIL -->          
 </div>
                                                
 <div class="contenu moree">
 ucucucucucucucuc                                  
 </div>
 </div>
                                                
 </div>
                                            
 <div class="interne">
                                                
 </div>
 

 {postrow.displayed.POSTER_RPG}
 
 <img src="https://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />

CSS
Code:
/*PROFIL*/
.rank_bitch2 {
  margin-bottom: 5px;
}

.postdetails.poster-profile img {
  width:200px;
}

.img_pourfairejolie {
    width:210px;
  height:15px;
    background-image: url(https://images2.imgbox.com/f8/fc/TtvzeC1t_o.png);
  margin-top:5px;
}

.bloc_profil {
  width: 225px;
    border: 1px solid #e6e0d9;
background-color: #f4f4f4;
  border-radius:2px;
  margin-top:5px;
}


.avatar_profil {
    width:210px;
  height:325px;
  background-color: #ffffff;
  border: 1px solid #f8f8f8;
    border-radius:2px;
  padding-top: 5px;
  margin-top:5px;
}

.pseudo_profil {
  width:210px;
  height:40px;
  background-color: #ffffff;
  border: 1px solid #f8f8f8;
    border-radius:2px;
  margin-top: 5px;
    margin-bottom: 5px;
   padding-top: 10px;
}

.titre_bitch {
font-family: 'Oswald', sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 20px;
}

.rank_bitch {
  font-size: 7px;
font-family: 'Roboto';
  text-transform: uppercase;
  letter-spacing: 4px;}


/************************************************ ONGLETS PROFIL ************************************************/
/* On met en place la fiche et son image de fond */
.champ_profil {
  position: relative;
      text-align: justify;
  width:200px;
  height:350px;
  background-color: #ffffff;
  border: 1px solid #f8f8f8;
  padding:5px;
  margin-bottom:10px;
  margin-top:5px;  
overflow: auto;
}

/* On cache les input */
.champ_profil > input { display: none; }

/* On met les labels au centre */
.champ_profil .boutons_profil { text-align: center;
  margin-left: 5px;
  margin-right: 5px;
}

/* Mise en forme des labels/titre des onglets normal */
.champ_profil .boutons_profil label {
  margin-left: 5px;
  margin-right: 5px;
  cursor: pointer;
}

/* Effet au survol des labels */
.champ_profil .boutons_profil label:hover {
  color: #b31a1c;
}

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.champ_profil .internee {
  position: relative;
 width:200px;
  height: 350px;
  margin: auto;
    background-color: #f6f6f6;
  font-family: 'verdana';
  font-size: 10px;
  color: #6E6E6E;
}

/* On met en place et en forme le contenu de chaque onglet */
.champ_profil .internee .contenu {
  position: absolute;
 width:200px;
  height: 350px;
    background-color: #f6f6f6;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  padding:5px;
}


/* Fait le changement de style sur les labels sélectionnés */
.champ_profil #infos_principales:checked ~ .boutons_profil .lab.infoss,
.champ_profil #more_profil:checked ~ .boutons_profil .lab.moree {
 font-family: 'Playfair Display';
  color: #b31a1c;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.fiche #infos_principales:checked ~ .internee .contenu.infoss,
.fiche #more_profil:checked ~ .internee .contenu.moree {
  opacity: 1;
  visibility: visible;
}


.champ_profil img {
    opacity: 0.8;
  border-radius:3px;
   transition-duration: 0.6s;  
  -moz-transition-duration: 0.6s;  
  -webkit-transition-duration: 0.6s;  
  -o-transition-duration: 0.6s;
}

.champ_profil img:hover {
  opacity: 0.6;
}

Merci d'avance pour votre aide.
avatar
Sexe : Masculin
Date d'inscription : 05/04/2016
Messages : 567
Ancien.ne du Staff
Voir le profil de l'utilisateur
Salut ! o/

Alors je vais revenir sur ton code :
Code:
<center><div class="img_pourfairejolie"></div></center>

Tu peux supprimer le center et ajouter un margin à ton CSS :
Code:
<div class="img_pourfairejolie"></div>
Code:
.img_pourfairejolie {
  margin: 5px auto 0;
  width:210px;
  height:15px;
  background-image: url(https://images2.imgbox.com/f8/fc/TtvzeC1t_o.png);
}

Ca centrera ta div !
Du coup, pareil pour tous tes autres center, tu les supprimes et tu remplaces ça par un margin : 0 auto; dans ton CSS sur la div qu'il contenait.

Ensuite, tu as quelques erreurs dans ton code, des tags qui s'ouvrent et qui ne se ferment pas. Notamment :
Code:
<span class="postdetails poster-profile">
Code:
<span class="name">
Et tu as aussi un center qui s'ouvre et qui ne se ferme pas !

Bref, si je m'intéresse à la partie "onglets" de ton profil, dans le principe c'est presque bon, sauf que tes deux onglets "contenu" sont censés se trouver dans "internee", or "contenu moree" se trouve en dehors de la div !

Code:
.fiche #infos_principales:checked ~ .internee .contenu.infoss,
.fiche #more_profil:checked ~ .internee .contenu.moree {
  opacity: 1;
  visibility: visible;
}

Je ne vois pas de class fiche dans ton code, tu devrais supprimer .fiche dans ton CSS, aussi. Moins le chemin est long et plus ton CSS est optimisé.

Attention aussi aux espaces :
Code:
<input checked="" name="champ_profil " id="infos_principales" type="radio" /> <input name="champ_profil" id="more_profil" type="radio" />
Là, tes deux inputs n'ont pas le même name vu qu'il y a un espace après "champ_profil" dans le premier.

Si tu corriges ça, ça devrait fonctionner...
CEPENDANT...
Ça ne fonctionnera que si un seul profil s'affiche ! Tu utilises des id... Un id est unique normalement. Donc les boutons des profils suivants agiront sur un seul profil... Celui du haut ;3

Je te fais la petite démo qui va bien pour te faire comprendre :



Un
ucucucucucucucuc
Un
ucucucucucucucuc
Un
ucucucucucucucuc
avatar
Sexe : Féminin
Date d'inscription : 27/09/2018
Messages : 22
Déjà merci beaucoup de ton aide, c'est adorable.
pour les center je les avais pas enlevé de base parce qu'avec la margin auto ça me centre pas vraiment les éléments (ils vont toujours un peu sur le côté droit et restent bloqués en haut), mais je vais voir si je peux arranger ça.
pour les span non fermé, effectivement c'est important, je vais corriger ça de suite.

et du coup pour le profil c'est effectivement problématique. Parce que du coup ça serait pas pour un seul profil mais pour tous, en gros sur le forum je ne serai pas la seule à poster et du coup si dans chaque profil revient toujours la même info c'est malheureusement problématique. Y aurait-il un moyen de régler le souci? utiliser autre chose que les id ou c'est impossible? parce que de base quand j'ai commencé à coder le profil en onglets j'avais un doute sur le code, parce qu'il fonctionne merveilleusement bien sur la pa ou les formulaires mais pour les profils comme il y en aura plusieurs différents ça risque de compromettre mon plan.

Mais en tous les cas déjà un grand merci pour ta réponse et je m'en vais du coup immédiatement corriger les coquilles.
avatar
Sexe : Masculin
Date d'inscription : 05/04/2016
Messages : 567
Ancien.ne du Staff
Voir le profil de l'utilisateur
Alors j'ai réfléchi à ton souci et m'est avis que des onglets en pur HTML/CSS, ce n'est pas possible dans ce cas-là. Les inputs utilisent toujours les ID.

Du coup la solution la plus simple, pour moi, c'est le js.

Si je reprends ton morceau de code pour les onglets, j'enlève les inputs mais je garde ta structure :
Code:
<div class="champ_profil">
    
    <div class="boutons_profil">
        <div class="lab infoss visible">infos</div>
        <div class="lab moree">more</div>
    </div>

    <div class="internee">

        <div class="contenu infoss visible">
            <div class="rank_bitch2">{postrow.displayed.RANK_IMAGE}</div>
            <hr>
            <!-- BEGIN profile_field -->
            <div class="intitulés_profil">
                <w>{postrow.displayed.profile_field.LABEL}</w> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div>
            <!-- END profile_field -->
        </div>

        <div class="contenu moree">
            la fiche RPG
        </div>
        
    </div>

</div>
J'ajoute la class .visible au premier label et au premier onglet. Ils seront donc visible de base.

Le CSS associé va changer un peu :
Code:

/************************************************ ONGLETS PROFIL ************************************************/

.champ_profil {
  position: relative;
  text-align: justify;
  width:200px;
  height:350px;
  background-color: #ffffff;
  border: 1px solid #f8f8f8;
  padding:5px;
  margin-bottom:10px;
  margin-top:5px;  
  display: flex;
  flex-direction: column;
}

/* Labels des onglets */
.champ_profil .boutons_profil {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mise en forme des labels/titre des onglets normal */
.lab {
  margin-left: 5px;
  margin-right: 5px;
  cursor: pointer;
}

/* Effet au survol des labels */
.lab:hover {
  color: #b31a1c;
}

/* On met en place le bloc qui va contenir le contenu de chaque onglet */
.champ_profil .internee {
  position: relative;
  background-color: #f6f6f6;
  font-family: 'verdana';
  font-size: 10px;
  color: #6E6E6E;
  flex: 1;
}

/* On met en place et en forme le contenu de chaque onglet */
.contenu {
  position: absolute;
  width:100%;
  height: 100%;
  background-color: #f6f6f6;
  overflow: auto;
  text-align: justify;
  opacity: 0;
  visibility: hidden;
  padding:5px;
  box-sizing: border-box;
}


/* Fait le changement de style sur les labels sélectionnés */
.champ_profil .lab.visible {
 font-family: 'Playfair Display';
  color: #b31a1c;
}

/* Fait apparaitre le contenu de l'onglet sélectionné */
.contenu.visible {
  opacity: 1;
  visibility: visible;
}


.champ_profil img {
    opacity: 0.8;
  border-radius:3px;
   transition-duration: 0.6s;  
  -moz-transition-duration: 0.6s;  
  -webkit-transition-duration: 0.6s;  
  -o-transition-duration: 0.6s;
}

.champ_profil img:hover {
  opacity: 0.6;
}
.rank_bitch2 {
  margin: auto;
  display: flex;
  justify-content: center;
}

Et enfin, on ajoute un petit script (à ajouter dans tes modules javascript dans ton PA) :
Code:
$(document).ready(function(){
 // Pour chaque bloc "champ_profil"
 $('.champ_profil').each(function(){
   // Au clic d'un label
   $('.lab').click(function(){
     // On ajoute la class visible et si son voisin a la class visible, on la retire
     $(this).addClass('visible').siblings().removeClass('visible');
      // Si le label a la class infoss
      if ($(this).hasClass('infoss')) {
       // On retrouve le bloc contenu avec la class infoss et on lui donne la class visible
       $(this).parent().next().find('.infoss').addClass('visible').siblings().removeClass('visible');
        // sinon (sous entendu "si ce n'est pas la class infoss c'est la class moree")
      } else {
       // On retrouve le bloc contenu avec la class moree et on lui donne la class visible
       $(this).parent().next().find('.moree').addClass('visible').siblings().removeClass('visible');
      }    
    });
  });
});

C'est comme avec tes onglets CSS, le bloc contenu est invisible, mais au lieu des inputs sélectionnés qui vont cibler ton bloc, le js va ajouter la class .visible et rendre les onglets viables sur plusieurs profils affichés.
avatar
Sexe : Féminin
Date d'inscription : 27/09/2018
Messages : 22
Encore une fois merci de ton aide, je sais que ça doit pas être facile étant donné que j'ai pas donné beaucoup de matériel avec lequel on peut travailler.

du coup j'ai modifié, je voulais éviter JS de base parce que je m'y connais encore pas du tout du tout, mais en commençant les profil je me disais que j'allais pas pouvoir en échapper. J'ai remplacé le css/html et j'ai ajouté une page JS (visible sur toutes les pages) mais il semblerait que ça fonctionne pas.
je me retrouve bien avec les deux boutons et la première page en visible mais dès que je clique sur more rien ne se passe.

Dans tous les cas merci encore une fois pour ton aide, déjà ça m'avance beaucoup tout ce que tu as fais.
avatar
Sexe : Masculin
Date d'inscription : 05/04/2016
Messages : 567
Ancien.ne du Staff
Voir le profil de l'utilisateur
Ouais, je comprends, malheureusement dans ce cas-là, on ne peut pas échapper au js xD

Je crois que c'est parce que tu as une erreur qui empêche le reste du js de s'exécuter :
Code:
$('#mon-image').rollover({
    imgClick: 'https://images2.imgbox.com/6f/4b/Lv8Wwj5J_o.gif',
    trigger: 'click'
});

rollover c'est une fonction qui n'existe pas en jQuery. Si tu retires ce morceau de code, normalement ça devrait fonctionner !

Si je teste mon js dans la console, ça marche, en tout cas. Donc essaye juste pour voir si c'est bien ça qui empêche le js de s'exécuter c:
(et HS mais wow, j'adore le design de ton fofo **)
avatar
Sexe : Féminin
Date d'inscription : 27/09/2018
Messages : 22
Effectivement c'était l'autre truc JS que j'avais sauvegardé qui faisait bugger le truc, ça marche maintenant comme sur des roulettes, merci beaucoup, c'est vraiment parfait.
petit dernière question avant de demander l'archivage de ce sujet, mais est-ce que tu saurais par tout hasard si le code pour l'affichage de la feuille de personnage se retrouve dans cette template (viewtopic body) ou pas du tout ? parce que je voudrais mettre cette partie dans le second onglet. Après ça, promis juré je n'ai plus de questions, un grand merci pour ton aide, j'pense que seule j'aurais jamais trouvé de solution.
(kjvbf fbnbnf et merci bcp Lovely Lovely Lovely )

finalement j'ai trouvé la solution, merci encore une fois pour ton aide, le sujet peut être archivé.
avatar
Sexe : Masculin
Date d'inscription : 24/03/2016
Messages : 1829
Designer
Voir le profil de l'utilisateur
Merci Awful pour ton aide !!
J'archive du coup ♥️


Merci à Sygea !


Merci à Funeral  


Merci à Shigurai pour les signatures et Artémis pour l'avatar

Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum