Tableau des onglets à droit avec image à gauche...
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
Tableau des onglets à droit avec image à gauche...
Bonjour / Bonsoir,
Alors, j'ai besoin d'aide pour ma page d'accueil. J'ai une page d'accueil en onglet et le tableau du contenue des onglets est centré. Mon problème est que je voudrais qu'il soit à droit et qu'une image soit à gauche. J'aimerai aussi que l'image à gauche ne change pas, ce qui veut dire que je ne veux pas que l'image soit dans le contenue des onglets, mais à l'extérieur du contenue des onglets.
Voici deux forum qui vous aideront à comprendre :
http://absolution-advance.forumactif.name/
http://impero.superforum.fr/
Le code de ma page d'acceuil :
Merci d'avance pour votre aide .
Alors, j'ai besoin d'aide pour ma page d'accueil. J'ai une page d'accueil en onglet et le tableau du contenue des onglets est centré. Mon problème est que je voudrais qu'il soit à droit et qu'une image soit à gauche. J'aimerai aussi que l'image à gauche ne change pas, ce qui veut dire que je ne veux pas que l'image soit dans le contenue des onglets, mais à l'extérieur du contenue des onglets.
Voici deux forum qui vous aideront à comprendre :
http://absolution-advance.forumactif.name/
http://impero.superforum.fr/
Le code de ma page d'acceuil :
- Code:
<title>Conception d'onglet</title>
<script type="text/javascript" src="http://illiweb.com/fa/js_16/fr.js"></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>
<table class="onglet-table">
<tbody><tr><td name="1" class="active">Home</td>
<td name="2">Staff</td>
<td name="3">Partners</td>
<td name="4">Liens</td>
<td name="5">Crédits</td>
</tbody></table></td></tr><tr><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></td></tr></tbody></table>
Merci d'avance pour votre aide .
Re: Tableau des onglets à droit avec image à gauche...
Bonjour
changez votre tableau par celui-ci :
n'oubliez pas de replacer le lien de votre image à l'endroit prévu.
Cordialement.
changez votre tableau par celui-ci :
- Code:
<title>Conception d'onglet</title>
<script type="text/javascript" src="http://illiweb.com/fa/js_16/fr.js"></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">Home</td>
<td name="2">Staff</td>
<td name="3">Partners</td>
<td name="4">Liens</td>
<td name="5">Crédits</td>
</tbody></table></td></tr><tr>
<td align="center" valign="middle">
<img src="lien de votre image"></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></td></tr></tbody></table>
n'oubliez pas de replacer le lien de votre image à l'endroit prévu.
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Tableau des onglets à droit avec image à gauche...
Merci, c'est parfait *.* !
Problème résolu :thanks: !
Problème résolu :thanks: !
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