C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets

Partagez | 
 

Onglets fiche de présentation

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Voir le profil de l'utilisateur http://midnight-sun.forumactif.org
avatar
{ Membre }
{ Membre }

Féminin Messages : 40



Oui c'est encore moi avec mes onglets TT

Après de nombreuses recherche je n'ai toujours pas trouvé comme faire cette feuille de présentation :



Les deux carrés en haut sont des avatars, ça nous avons réussi à le faire (enfin mon amie l'a fait x) )

Mais les petits rond qui représentent les onglets nous n'y arrivons pas.. On voudrait qu'à chaque fois qu'on passe la souris sur un onglet le texte apparaisse à côté :/

De plus nous avons du recommencer le forum car toute notre fiche CSS a été effacé savez vous comment cela est-il possible? Nous avons regardé dans "l'historique" et ce n'est pas marqué.. Est un bug du forum? :/


Dernière édition par DisneyDream2 le Mer 16 Oct 2013, 08:34, édité 1 fois
MessageSujet: Onglets fiche de présentation   Dim 13 Oct 2013, 06:05
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



Je ne sais pas du tout d'où peut provenir l'effacement de ton CSS :/
Essaye d'en parler sur le support de ForumActif.

Sinon, pour ta commande, je pense que le code ici pourrait convenir : Système d'onglets simple et personnalisable.

Il faudrait reprendre le système vertical, et le reste c'est du CSS, de la mise en forme Smile


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Onglets fiche de présentation   Dim 13 Oct 2013, 07:13
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://midnight-sun.forumactif.org
avatar
{ Membre }
{ Membre }

Féminin Messages : 40



Merci beaucoup Wink
MessageSujet: Re: Onglets fiche de présentation   Dim 13 Oct 2013, 08:12
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://midnight-sun.forumactif.org
avatar
{ Membre }
{ Membre }

Féminin Messages : 40



Désolé du DP mais mon amie à réussi à placer les onglets les uns au dessus des autres mais le contenu reste en dessous et non pas sur le côté.. Comment changer ça?

Le code HTML :

Code:
<div class="roleplaySheet"><!--  
--><span class="tab active" id="tab1">ONGLET 1</span><!--
  --><span class="tab" id="tab2">ONGLET 2</span><!--  
--><div class="contentBox"><!--  
 --><div id="content_tab1">Le contenu de mon premier onglet.</div><!--  
  --><div id="content_tab2">Le contenu de mon deuxième onglet.</div><!--  -
-></div><!--
--></div>
Le Javascript :

Code:
$(function(){
   $('.tab').click(function(){ //quand je clique sur un onglet, les actions suivantes se déclenchent
      $('.active').removeClass('active'); //l'onglet actif change: on enlève la class de l'ancien onglet
      $('.contentBox > div').hide(); //tous les contenus sont masqués
      var tab = $(this).attr('id'); //je récupère l'id de l'onglet pour pouvoir cibler le contenu correspondant
      $('#content_' + tab).fadeIn(); //le contenu qui correspond à l'onglet s'affiche
      $(this).addClass('active'); //on ajoute la class "active" à l'onglet actif, soit celui qu'on vient de cliquer
   });
});
CSS:

Code:
/* FICHE */
.roleplaySheet {
  width:250px; /* largeur de la fiche */
  text-align:center; /* centre les onglets */
}
/* ONGLETS */
.tab {
  display: block;
  width:100px; /* largeur */
  height:20px; /* hauteur */
 background-color:#ffffff; /* couleur de fond */
border-top:2px #000000 solid; /* bordure haut */
 border-left:2px #000000 solid; /* bordure gauche */
 border-right:2px #000000 solid; /* bordure droite */
cursor:pointer; /* change la souris au survol */
margin:0 5px; /* haut-bas droite-gauche ; espace entre les onglets */
padding:3px 0 0; /* haut droite-gauche bas ; replace le texte au centre de l'onglet */ }
 .tab.active { /* propriétés de l'onglet actif */
background-color:#cccccc; /* couleur de fond */ }

/* CONTENU */
 .contentBox { height:150px; /* hauteur */
padding:5px; /* espace entre le texte et le bord */
background-color:#ffffff; /* couleur de fond */
border:2px #000000 solid; /* bordure */
 text-align:left; /* aligne le texte à gauche */ }
.contentBox > div { height:100%; /* nécessaire pour overflow ; dit aux contenus d'adopter la hauteur de leur contenant (contentBox) */
overflow:auto; /* si le contenu dépasse la taille de la zone, il y a une barre défilante */ }
 #content_tab2 {  display:none; /* masque le contenu de l'onglet 2 */
}
Qu'est ce qui ne va pas? :/
MessageSujet: Re: Onglets fiche de présentation   Dim 13 Oct 2013, 13:00
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



Hum, je te conseille de mettre tous tes onglets (pas le contenu, mais les span) dans une seule div avc une class(par exemple "onglets")

Ensuite, élargie un peu la fiche (.roleplaySheet, il faut augmenter la valeur du width).

Enfin, tu peux mettre dans ton CSS ceci :
Code:
.onglets, .contentBox { float: left;} /* pour les aligner à côté*/
.roleplaySheet:after { content:" "; display: block; clear:"both";} /* pour régler les bugs des float */
Je pense que cela devrait marcher ^^


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Onglets fiche de présentation   Dim 13 Oct 2013, 13:32
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://midnight-sun.forumactif.org
avatar
{ Membre }
{ Membre }

Féminin Messages : 40



J'ai essayée et malheureusement ça ne marche pas :/
Voila ce que ça me donne : https://i.servimg.com/u/f57/17/73/51/42/onglet10.jpg
MessageSujet: Re: Onglets fiche de présentation   Dim 13 Oct 2013, 17:48
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



Oups la je comprends pas trop, est-ce-que tu peux me passer le lien direct s'il te plaît, je pense ça m'aiderait ? Smile


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Onglets fiche de présentation   Lun 14 Oct 2013, 01:40
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://midnight-sun.forumactif.org
avatar
{ Membre }
{ Membre }

Féminin Messages : 40



Le lien : http://diduforget.forumactif.org/t15-fiche-de-presentation

Nous avons réussi à mettre les onglets sur le côté, malheureusement ils ne sont pas tout à fait sur la gauche du tableau comme vous pouvez le voir :

https://i.servimg.com/u/f57/17/73/51/42/onglet11.jpg

Je vous redonne les codes :

HTML :

Code:
<div class="roleplaySheet"><div class="onglets"><!--  
--><span class="tab active" id="tab1">ONGLET 1</span><!--
 --><span class="tab" id="tab2">ONGLET 2</span><!--  </div>
--><div class="contentBox"><!--  
--><div id="content_tab1">Le contenu de mon premier onglet.</div><!--  
 --><div id="content_tab2">Le contenu de mon deuxième onglet.</div><!--  -
-></div><!--
--></div>
Css :

Code:
/* FICHE */
.roleplaySheet {
  width:350px; /* largeur de la fiche */
  text-align:center; /* centre les onglets */
}
/* ONGLETS */
.tab {
  display: block;
  width:100px; /* largeur */
  height:20px; /* hauteur */
 background-color:#ffffff; /* couleur de fond */
border-top:2px #000000 solid; /* bordure haut */
 border-left:2px #000000 solid; /* bordure gauche */
 border-right:2px #000000 solid; /* bordure droite */
cursor:pointer; /* change la souris au survol */
margin:0 5px; /* haut-bas droite-gauche ; espace entre les onglets */
padding:3px 0 0; /* haut droite-gauche bas ; replace le texte au centre de l'onglet */ }
 .tab.active { /* propriétés de l'onglet actif */
background-color:#cccccc; /* couleur de fond */ }

/* CONTENU */
 .contentBox { height:150px; /* hauteur */
padding:5px; /* espace entre le texte et le bord */
background-color:#ffffff; /* couleur de fond */
border:2px #000000 solid; /* bordure */
 text-align:left; /* aligne le texte à gauche */ }
.contentBox > div { height:100%; /* nécessaire pour overflow ; dit aux contenus d'adopter la hauteur de leur contenant (contentBox) */
overflow:auto; /* si le contenu dépasse la taille de la zone, il y a une barre défilante */ }
 #content_tab2 {  display:none; /* masque le contenu de l'onglet 2 */
}

.contentBox { float: right;} /* pour les aligner à côté*/
.roleplaySheet:after { content:" "; display: block; clear:"both";} /* pour régler les bugs des float */
Javasript :

Code:
$(function(){
  $('.tab').click(function(){ //quand je clique sur un onglet, les actions suivantes se déclenchent
      $('.active').removeClass('active'); //l'onglet actif change: on enlève la class de l'ancien onglet
      $('.contentBox > div').hide(); //tous les contenus sont masqués
      var tab = $(this).attr('id'); //je récupère l'id de l'onglet pour pouvoir cibler le contenu correspondant
      $('#content_' + tab).fadeIn(); //le contenu qui correspond à l'onglet s'affiche
      $(this).addClass('active'); //on ajoute la class "active" à l'onglet actif, soit celui qu'on vient de cliquer
  });
});
Encore merci pour votre aide ! I love you 
MessageSujet: Re: Onglets fiche de présentation   Lun 14 Oct 2013, 07:27
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



Oups, tu as un petit bug dans ton code. Dans le HTML il y a un problème avec commentaires. En effet 2 fermetures de balise div sautent à causent des commentaires, relis bien le code Very Happy.
Peux tu aussi essayer de poster le code HTML sans retours à la ligne ? En effet, quand on poste dans un sujet directement dans le forum, cela crée des balises br Smile



Dans le CSS, tu as oublié un petit morceau du code Wink
J'avais mis '.onglets, ' tout au début, et j'ai mis un float 'left' ^^ :
Code:
.onglets, .contentBox { float: left;} /* pour les aligner à côté*/
Chez moi cela marche bien, j'espère que cela marchera pour toi aussi ! Smile


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Onglets fiche de présentation   Lun 14 Oct 2013, 09:41
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://midnight-sun.forumactif.org
avatar
{ Membre }
{ Membre }

Féminin Messages : 40



J'ai donc rajouter la ligne de css que vous m'avez donner, j'ai aussi essayer de corriger les div et supprimer les retours à la lignes :

Code:
<div class="roleplaySheet"><div class="onglets"><!-- --><span class="tab active" id="tab1">ONGLET 1</span><!-- --><span class="tab" id="tab2">ONGLET 2</span></div><!-- --><div class="contentBox"><!-- --><div id="content_tab1">Le contenu de mon premier onglet.</div><!-- --><div id="content_tab2">Le contenu de mon deuxième onglet.</div><!-- --><!-- --></div></div>
Et effectivement, ça marche ! Very Happy Le problème maintenant, c'est que lorsque je clique sur onglet 2, les onglets reviennent sur le haut comme ici : https://i.servimg.com/u/f57/17/73/51/42/onglet10.jpg

D'où cela vient-il ? :/
MessageSujet: Re: Onglets fiche de présentation   Lun 14 Oct 2013, 14:40
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



En augmentant encore plus la largeur, je pense que ça ira.

Code:
/* FICHE */
.roleplaySheet {
  width:600px; /* largeur de la fiche */
  text-align:center; /* centre les onglets */
}


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Onglets fiche de présentation   Lun 14 Oct 2013, 15:18
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://midnight-sun.forumactif.org
avatar
{ Membre }
{ Membre }

Féminin Messages : 40



C'est super, ça marche ! Very Happy
Par contre, dernier problème après je vous embêtes plus !  

Je voudrais centrer le tout dans ma fiche de présentation, comment faire ?
Ensuite j'ai ajouter un troisième onglet et son contenu apparaît dans l'onglet 1 comme vous pouvez le voir :
https://i.servimg.com/u/f57/17/73/51/42/bug_210.jpg
Mais dès que je clique sur un autre onglet, tout ce remet en place, comme sur le screen comment ça ce fait ? :/
https://i.servimg.com/u/f57/17/73/51/42/onglet12.jpg

Voila le css : (Désoler j'ai rajouter beaucoup de chose :s )
Code:
/*FICHE DE PRESENTATION*/

.cadreprincipal{
  background-color: #FFFFFF;
  border: 1px solid #000000;
  border-radius:30px 100px/ 100px 20px;
  width: 500px;
 
}

.titrefiche{
font-family: 'Merienda';
  font-size: 30px;
  text-align: center;
  color: #000000;
}
.citation{
  font-size: 9px;
  color: #000000;
}
.histoire{
  text-align: justify;
  padding: 30px;
  height: 200px;
  overflow: auto;
}
.copyright{
  font-size: 6px;
  color: #000000;
  text-align: center;
}
.infoirl{
  border-radius: 10px;
  border: 1px solid #000000;
  background-color: #FFFFFF;
  text-align: justify;
  width: 409px;
  padding: 10px;
 
}

 
.roleplaySheet {
  width:600px; /* largeur de la fiche */
  text-align:center; /* centre les onglets */
   
}
/* ONGLETS */
.tab {
  display: block;
 
cursor:pointer; /* change la souris au survol */
margin:0 5px; /* haut-bas droite-gauche ; espace entre les onglets */
padding:3px 0 0; /* haut droite-gauche bas ; replace le texte au centre de l'onglet */ }
 
.titreonglet{
font-family: 'Merienda';
  color: orange;
font-size: 15px;
  text-align: center;
}
  .texteonglet{
  overflow: auto;
  height: 200px;
 
}
.lignestitres{
  border-bottom: 1px dashed orange;
  width: 200px;
 
}
 
/* CONTENU */
 .contentBox {
  height:250px; /* hauteur */
  width: 235px;
padding:10px; /* espace entre le texte et le bord */
background-color:#E8E89D; /* couleur de fond */
border-radius:30px 100px/ 100px 20px;
 text-align:left; /* aligne le texte à gauche */ }
.contentBox > div { height:100%; /* nécessaire pour overflow ; dit aux contenus d'adopter la hauteur de leur contenant (contentBox) */
overflow:auto; /* si le contenu dépasse la taille de la zone, il y a une barre défilante */ }
 #content_tab2 {  display:none; /* masque le contenu de l'onglet 2 */
}

.onglets, .contentBox { float: left; } /* pour les aligner à côté*/
.roleplaySheet:after { content:" "; display: block; clear:"both";} /* pour régler les bugs des float */
le html :

Code:
<div class="roleplaySheet"><div class="onglets"><!-- --><span class="tab active" id="tab1"><div syle="border-radius:100px"><img src="http://25.media.tumblr.com/7c2be101ee78772b9e5664e1acf93169/tumblr_msr5symo0E1rf03g0o1_500.gif" height="50" width="50" style="border-radius: 100px ;"></div></span><!-- --><span class="tab" id="tab2"><div syle="border-radius:100px"><img src="http://25.media.tumblr.com/7c2be101ee78772b9e5664e1acf93169/tumblr_msr5symo0E1rf03g0o1_500.gif" height="50" width="50" style="border-radius: 100px ;"></div></span><!-- --><span class="tab" id="tab3"><div syle="border-radius:100px"><img src="http://25.media.tumblr.com/7c2be101ee78772b9e5664e1acf93169/tumblr_msr5symo0E1rf03g0o1_500.gif" height="50" width="50" style="border-radius: 100px ;"></div></span></div><!-- --><div class="contentBox"><!-- --><div id="content_tab1"><div class="titreonglet">"Informations"</div><center><div class="lignestitres"></div></center><br/><div class="texteonglet">[color=#FF9933]<b>Prénom Prénom² ▶️▷</b>[/color] Ici .</br>[color=#FF9933]<b>Nom ▶️▷</b>[/color] Ici .</br>[color=#FF9933]<b>Date et lieu de naissance ▶️▷</b>[/color] Ici . </br>[color=#FF9933]<b>Age ▶️▷</b>[/color] Ici .</br>[color=#FF9933]<b>Nationalité ▶️▷</b>[/color] j/7 . </br>[color=#FF9933]<b>Situation civile ▶️▷</b>[/color] Ici .</br> [color=#FF9933]<b>Orientation Sexuelle ▶️▷</b>[/color] Ici . </br>[color=#FF9933]<b>Célébrité(e) ▶️▷</b>[/color] Ici . </br>[color=#FF9933]<b>Orientation Sexuelle ▶️▷</b>[/color] Ici . </br>[color=#FF9933]<b>Groupe ▶️▷</b>[/color] Ici .</br></div> </div><!-- --><div id="content_tab2"><div class="titreonglet">"Caractère et petites manies"</div><center><div class="lignestitres"></div></center><br/><div class="texteonglet"> Ici les petits tics/manies de votre personnage ainsi que quelques point de caractère en 15 de lignes. Ici les petits tics/manies de votre personnage ainsi que quelques point de caractère en 15 de lignes. Ici les petits tics/manies de votre personnage ainsi que quelques point de caractère en 15 de lignes. Ici les petits tics/manies de votre personnage ainsi que quelques point de caractère en 15 de lignes. Ici les petits tics/manies de votre personnage ainsi que quelques point de caractère en 15 de lignes.</div></div><!-- --><div id="content_tab3"><div class="titreonglet">"Once Upon A Time"</div><center><div class="lignestitres"></div></center><br/><div class="texteonglet"> Ici vous allez nous raconter sous forme d'un mini RP de 20 lignes minimum [size=9](Ne vous en faites pas, les lignes sont petites)[/size] quel souvenir sera effacer de la mémoire de votre personnage, dites quels étaient ses émotion etc... Bref on veut se croire dans son souvenir !  Ici vous allez nous raconter sous forme d'un mini RP de 20 lignes minimum [size=9](Ne vous en faites pas, les lignes sont petites)[/size] quel souvenir sera effacer de la mémoire de votre personnage, dites quels étaient ses émotion etc... Bref on veut se croire dans son souvenir !  Ici vous allez nous raconter sous forme d'un mini RP de 20 lignes minimum [size=9](Ne vous en faites pas, les lignes sont petites)[/size] quel souvenir sera effacer de la mémoire de votre personnage, dites quels étaient ses émotion etc... Bref on veut se croire dans son souvenir !  </div></div><!-- --><!-- --></div></div>
Encore merci pour votre patience !  
MessageSujet: Re: Onglets fiche de présentation   Lun 14 Oct 2013, 20:53
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Modérateur }
{ Modérateur }

Messages : 1216



Dans ton CSS tu as :
Code:
#content_tab2 {  display:none; /* masque le contenu de l'onglet 2 */
}
Il faut aussi penser à masquer le contenu de l'onglet 3 par défaut ^^. Voici comment faire :
Code:
#content_tab2, #content_tab3 {  display:none; /* masque le contenu de l'onglet 2 et 3 */
}
Pour ce qui est du centrage, je sais pas si tu te souviens pour mettre à côté les 2 trucs, je t'avais conseillé d'augmenter la valeur de la largeur de .roleplaySheet à 600px. Tu peux remettre 350px, je pense cela devrait aller Smile


Présence réduite, mais je reste disponible, il faut juste être patient ♥
MessageSujet: Re: Onglets fiche de présentation   Mar 15 Oct 2013, 14:36
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://midnight-sun.forumactif.org
avatar
{ Membre }
{ Membre }

Féminin Messages : 40



C'est parfait tout fonctionne, encore merci ! C'est résolu ! I love you 
MessageSujet: Re: Onglets fiche de présentation   Mer 16 Oct 2013, 08:32
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Onglets fiche de présentation   
Revenir en haut Aller en bas
 

Onglets fiche de présentation

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Onglets fiche de présentation
» Un fiche de présentation pour un forum rpg HG
» ♦ Fiche de présentation RP ♦ —Avec Schéma—
» Code de présentation de fiche RP
» [RPG] Fiche de présentation

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit