Petit détails tableau avec onglets
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Petit détails tableau avec onglets
Bonsoirs,
J'ai réussi à faire un tableau onglets ( on ma fais le code entier ) , j'arrive à le remplir et à mettre l'image à gauche comme je voulais. Mais moi bien sur je n'arrive pas à faire les choses les plus simples .
- Lorsque j'ai mis l'image à gauche, les onglets se sont légèrement décalés, voyez par vous même => http://etho-forum.forumactif.com/forum
Tant que vous y êtes, regardé le contenu du tableau. Comme vous voyez le texte déborde du cadre, je ne sais pas mettre " une barre de défilement " pourriez vous m'indiquer un code s.v.p ?
Merci d'avance
J'ai réussi à faire un tableau onglets ( on ma fais le code entier ) , j'arrive à le remplir et à mettre l'image à gauche comme je voulais. Mais moi bien sur je n'arrive pas à faire les choses les plus simples .
- Lorsque j'ai mis l'image à gauche, les onglets se sont légèrement décalés, voyez par vous même => http://etho-forum.forumactif.com/forum
Tant que vous y êtes, regardé le contenu du tableau. Comme vous voyez le texte déborde du cadre, je ne sais pas mettre " une barre de défilement " pourriez vous m'indiquer un code s.v.p ?
Merci d'avance
Dernière édition par Soo87 le Sam 13 Aoû 2011 - 17:25, édité 1 fois
Re: Petit détails tableau avec onglets
Bonjour.
Pour vous aider, pourrais-je avoir le code ? Au mieux, le code de votre PA avec le CSS (uniquement celui concernant vos onglets, pas tout).
Et je vous indiquerai comment régler les deux problèmes.
Cordialement.
Pour vous aider, pourrais-je avoir le code ? Au mieux, le code de votre PA avec le CSS (uniquement celui concernant vos onglets, pas tout).
Et je vous indiquerai comment régler les deux problèmes.
Cordialement.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Petit détails tableau avec onglets
Voilà le code du tableau actuel :
- Code:
<title>Conception d'onglet</title>
<script type="text/javascript" src="http://img4.hostingpics.net/pics/282657esthuk.png"></script>
<style>
/* Début de la feuille de style */
.onglet-content > div {
display : none ;
border : solid 2px ;
border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ;
padding : 20px ; margin-bottom : Xpx ;
width : 450px ;
height : 200px;
}
.onglet-content > div.active{ display : block ; }
.onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; }
.onglet-table td {
style : top ;
vertical-align:middle ;
border : solid 2px ;
border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ;
padding : 0px 10px ;
opacity : 0.5 ;
}
.onglet-table td.active, .onglet-table td:hover {
opacity : 1 ;
}
/* Fin de la feuille de style */
</style>
<center>
<script type="text/javascript">
/* Début du script */
jQuery(document).ready(function(){
jQuery(".onglet-table").find("td").click(function(){
/* Suppression des classe .active pour tout les onglets et contenus */
var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */
system.find(".onglet-table").find(".active").removeClass("active");
system.find(".onglet-content").find(".active").removeClass("active");
/* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */
var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */
jQuery(this).addClass("active");
system.find(".onglet-content").find("div[name='"+id+"']").addClass("active");
});
});
/*Fin du script */
</script>
<!-- Début du HTML --><div class="onglet">
<table><tbody><tr><td colspan="2">
<table class="onglet-table">
<tbody><tr><td name="1" class="active">Accueil</td>
<td name="2">Staff</td>
<td name="3">Partenaires</td>
<td name="4">New'</td>
<td name="5">Concours</td>
<td name="6">Liens</td>
</tbody></table></td></tr><tr>
<td align="center" valign="middle">
<img src="http://img4.hostingpics.net/pics/870558esthuk.png"></td><td>
<div class="onglet-content">
<div name="1" class="active">contenu de l'onglet 1</div>
<div name="2">contenu de l'onglet 2</div>
<div name="3">contenu de l'onglet 3</div>
<div name="4">contenu de l'onglet 4</div>
<div name="5">contenu de l'onglet 5</div>
<div name="6">contenu de l'onglet 6</div>
</div></td></tr></tbody></table>
Re: Petit détails tableau avec onglets
Upinou :$ .
Re: Petit détails tableau avec onglets
Vous voulez garder le codage dans votre PA ou gagner de la place et le mettre ailleurs ? Car autrement, pour gagner de la place, vous pouvez mettre cette partie :
et cette partie :
panneau d'administration >> modules >> gestion des pages javascripts >> créer une nouvelle page appelée onglets (ou autre), mettre le code dedans et enregistrez en ne la plaçant que sur l'index.
Et ça vous donne plus à la fin que ceci dans votre PA :
donc un contenu moins important pour mieux s'y retrouver. Enfin ça c'est mon avis.
Alors,
pour mettre une scrool-barre, faites comme ceci :
=> en gros on entoure le texte d'une div, avec l'attribut "style" qui permet d'insérer du code css. Le code css permet de mettre une scroll qui est cachée quand on en a pas besoin, sur seulement la verticale quand il y a besoin, sur une hauteur minimale que vous aurez décidé.
ensuite, et bien, pour vos onglets, ils sont centrés dans leur cellule, donc je ne vois très bien pourquoi vous dites que ça s'est décalé, puisque c'est normal. Vous les voulez plus vers la gauche ou plus vers la droite ?
Cordialement.
- Code:
.onglet-content > div {
display : none ;
border : solid 2px ;
border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ;
padding : 20px ; margin-bottom : Xpx ;
width : 450px ;
height : 200px;
}
.onglet-content > div.active{ display : block ; }
.onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; }
.onglet-table td {
style : top ;
vertical-align:middle ;
border : solid 2px ;
border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ;
padding : 0px 10px ;
opacity : 0.5 ;
}
.onglet-table td.active, .onglet-table td:hover {
opacity : 1 ;
}
panneau d'administration >> affichage >> couleurs >> feuille de style css
et cette partie :
- Code:
jQuery(document).ready(function(){
jQuery(".onglet-table").find("td").click(function(){
/* Suppression des classe .active pour tout les onglets et contenus */
var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */
system.find(".onglet-table").find(".active").removeClass("active");
system.find(".onglet-content").find(".active").removeClass("active");
/* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */
var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */
jQuery(this).addClass("active");
system.find(".onglet-content").find("div[name='"+id+"']").addClass("active");
});
});
panneau d'administration >> modules >> gestion des pages javascripts >> créer une nouvelle page appelée onglets (ou autre), mettre le code dedans et enregistrez en ne la plaçant que sur l'index.
Et ça vous donne plus à la fin que ceci dans votre PA :
- Code:
<div class="onglet">
<table><tbody><tr><td colspan="2">
<table class="onglet-table">
<tbody><tr><td name="1" class="active">Accueil</td>
<td name="2">Staff</td>
<td name="3">Partenaires</td>
<td name="4">New'</td>
<td name="5">Concours</td>
<td name="6">Liens</td>
</tbody></table></td></tr><tr>
<td align="center" valign="middle">
<img src="http://img4.hostingpics.net/pics/870558esthuk.png"></td><td>
<div class="onglet-content">
<div name="1" class="active">contenu de l'onglet 1</div>
<div name="2">contenu de l'onglet 2</div>
<div name="3">contenu de l'onglet 3</div>
<div name="4">contenu de l'onglet 4</div>
<div name="5">contenu de l'onglet 5</div>
<div name="6">contenu de l'onglet 6</div>
</div></td></tr></tbody></table>
donc un contenu moins important pour mieux s'y retrouver. Enfin ça c'est mon avis.
Alors,
pour mettre une scrool-barre, faites comme ceci :
<div style="height:TAILLE_DE_LA_HAUTEUR_DE_VOTRE_CONTENU_px;display: block;overflow:hidden;overflow-x: hidden;overflow-y: auto;">A l'aube du XXIe siècle, nous rêvons de faire du cheval un ami. Un défis difficile, compte tenu des différences qui nous séparent. Car la vie du cavalier est une lente progression vers la compréhension de sa monture, apprenez à comprendre son silence et offrez lui toute la confiance dont il a besoin. Vous découvrirez alors un cheval calme, respectueux, confiant & épanoui ... C'est sur ces principes là qu'Etho-forum c'est fondé, entraider les cavaliers dans leurs diverses problèmes. Mais ce n'est pas tout, autre que de l'aide ce forum propose plusieurs autres activités, comme par exemple, des concours photos organisé régulièrement, des défis amusant pour vous distraire, vous et votre équidé. Délire, convivialité et conseils sont au rendez-vous autour d'une même passions : Le cheval au naturel. </div>
=> en gros on entoure le texte d'une div, avec l'attribut "style" qui permet d'insérer du code css. Le code css permet de mettre une scroll qui est cachée quand on en a pas besoin, sur seulement la verticale quand il y a besoin, sur une hauteur minimale que vous aurez décidé.
ensuite, et bien, pour vos onglets, ils sont centrés dans leur cellule, donc je ne vois très bien pourquoi vous dites que ça s'est décalé, puisque c'est normal. Vous les voulez plus vers la gauche ou plus vers la droite ?
Cordialement.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Re: Petit détails tableau avec onglets
pour les onglets finalement non c'est bon x) ! Ensuite, pour la scrool-barre après plusieurs essaie j'ai réussi, Merci beaucoup ! tout est parfait, merci beaucoup de votre aide !
Re: Petit détails tableau avec onglets
Je vous en prie.
♢ Pour faciliter les recherches, mettez un titre explicite.
♢ Remerciez le message qui vous a aidé pour que celui-ci soit mis en évidence.
♢ Épinglez votre sujet en résolu pour prévenir la modération.
Sujets similaires
» pb tableau PA avec onglets
» Problème avec le tableau à onglets.
» Problème avec mon tableau à Onglets.
» Comment modifier la couleur des onglets du tableau à onglets ?
» Tableau avec Onglets dans la News
» Problème avec le tableau à onglets.
» Problème avec mon tableau à Onglets.
» Comment modifier la couleur des onglets du tableau à onglets ?
» Tableau avec Onglets dans la News
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum