| | Onglets fiche de présentation |  |
|
 DisneyDream2 
{ Membre }
 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 | |
|
| | |
Nihil 
{ 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  | | |
|
| | |
DisneyDream2
{ Membre }
Messages : 40
| Merci beaucoup  | | |
|
| | |
DisneyDream2
{ Membre }
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? :/ | | |
|
| | |
Nihil
{ 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 ^^ | | |
|
| | |
DisneyDream2
{ Membre }
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 | | |
|
| | |
Nihil
{ 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 ? | | |
|
| | |
DisneyDream2
{ Membre }
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 !  | | |
|
| | |
Nihil
{ 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  . 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  Dans le CSS, tu as oublié un petit morceau du code 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 ! | | |
|
| | |
DisneyDream2
{ Membre }
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 ! 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 ? :/ | | |
|
| | |
Nihil
{ 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 */
} | | |
|
| | |
DisneyDream2
{ Membre }
Messages : 40
| C'est super, ça marche ! 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 ! | | |
|
| | |
Nihil
{ 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 | | |
|
| | |
DisneyDream2
{ Membre }
Messages : 40
| C'est parfait tout fonctionne, encore merci ! C'est résolu ! | | |
|
| | |
Contenu sponsorisé
| |
| | |
| | Onglets fiche de présentation | |
|
