Sujets similaires

Bonjour, bonsoir.
Après avoir farfouillée depuis hier sur le forum et rassembler tous les tuto' parlant des onglets, j'ai décidée aujourd'hui de me lancer pour faire des onglets à mon QEEL. Pour le moment, je n'ai pas fais grand chose d'extraordinaire, j'essaye surtout de mettre les contenues souhaités dans chaque onglet avant de passer au reste des bidouillages pour changer l'esthétique. Mais, j'ai quelque chose qui me résiste x)
Dans le premier onglet, j'ai mis tout ce qui est statistique du forum, dans le deuxième, je veux y mettre les membres connecter et ceux des dernières 24 heures. Hors ><, pour les membres connectés, pas de problème ! Il est bien dans l'onglet ! Par contre, celui pour les dernières 24 heures refusent de se mettre dedans. Voici des images pour mieux comprendre le problème.
Spoiler:

Voici le code :

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Un système d'onglet en javascript</title>
<script type="text/javascript">
//
</script>
<style type="text/css">
.onglet
{
display:inline-block;
margin-left:3px;
margin-right:3px;
padding:3px;
border:1px solid black;
cursor:pointer;
}
.onglet_0
{
background:#bbbbbb;
border-bottom:1px solid black;
}
.onglet_1
{
background:#dddddd;
border-bottom:0px solid black;
padding-bottom:4px;
}
.contenu_onglet
{
background-color:#dddddd;
border:1px solid black;
margin-top:-1px;
padding:5px;
display:none;
}
ul
{
margin-top:0px;
margin-bottom:0px;
margin-left:-10px
}
h1
{
margin:0px;
padding:0px;
}
</style>
</head>
<body>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Stat</span>
<span class="onglet_0 onglet" id="onglet_qui" onclick="javascript:change_onglet('qui');">Qui</span>

</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span><br>

<span class="gensmall">{TOTAL_POSTS}<br />
   {TOTAL_USERS}<br />
   {NEWEST_USER}</span><br>
<span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />

   </span>
</div>
<div class="contenu_onglet" id="contenu_onglet_qui">
<span class="gensmall">
   {LOGGED_IN_USER_LIST}</span>

{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</div>

</div>
</div>
<script type="text/javascript">
//
</script>
</body>
</html>


Donc j'aimerais savoir, comment faire pour qu'il accepte gentiment de rentrer dans l'onglet =/

EDIT : T'en que j'y suis ! Y a-t-il un code pour obliger les catégories à garder la même hauteur ?

Lien du forum de test :
{ www }

Merci d'avance.

Essaie, à la place du premier code, de mettre le deuxième code que je vais te donner :

Code:: <div class="contenu_onglet" id="contenu_onglet_qui">
<span class="gensmall">
{LOGGED_IN_USER_LIST}</span>

{L_CONNECTED_MEMBERS}
{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}
</div>

</div>

Code:: <div class="contenu_onglet" id="contenu_onglet_qui">
<span class="gensmall">
{LOGGED_IN_USER_LIST}</span>

<table><tr><td>{L_CONNECTED_MEMBERS}</td></tr>
<tr><td>{L_WHOSBIRTHDAY_TODAY}</td></tr>
<tr><td> {L_WHOSBIRTHDAY_WEEK}</td></tr></table>
</div>

</div>

Super, ça fonctionne =) J'ai juste l'image de fond des catégories qui est sous le
"Membres connectés au cours des 24 dernières heures : Admin"
"Aucun membre ne fête son anniversaire aujourd'hui"
Plus qu'à trouver comment l'enlever de là xD

Donc maintenant j'attend plus que de savoir si quelqu'un sait comment donner une taille fixe aux onglets pour qu'ils soient tous de même dimension.

Merci encore et merci à B•øw pour ton aide =)

Euh.... Et si tu mets ceci dans ton code ?

Code:: .onglets
{
width: TAILLE;
}

C'est pour la largeur ça, nan ? Moi c'est pour la hauteur qu'il me faudrait @.@ exemple ici > click. Quant tu vas dans Last 24h, la hauteur reste la même que pour Online et Stats.

Ah d'accord, la hauteur de ce truc xD Et bien je pense qu'il faut simplement mettre ceci dans ton css :

Code:: .contenu_onglets
{
height: TAILLE VOULUE;
overflow: auto;
}

Super =D ça fonctionne, merci encore.

Quant il n'y en a plus, il y en a encore x'D ( Bah oui, maintenant que j'ai réglée le souci du contenu, maintenant je me bat avec l'esthétique °°" )

J'ai 2 problèmes x) voici d'abord un petit screen pour mieux comprendre.

>Pour ce qui est entouré, j'aimerais enlever la bordure qui sépare l'onglet où on est du contenu. Sais pas si vous avez compris xD

>Pour ce qui est encadré, arriver à enlever l'image ><"
Edit 2: pour l'encadrer, c'est bon, j'ai réglée autrement ^.^

Pour quel encadré ? Quel problème il reste ? x) J'sais pas lequel tu as réglé x)

Voilà où j'en suis actuellement après avoir régler le css =) ( merci en tout cas de prendre du temps pour m'aider =3 )

Mais voilà, il y a cette petite ligne qui m'énerve, celle entourer par le rouge. Donc j'aimerais réussir à l'enlever ><

Le CSS

Code:

.onglet
{
display:inline-block;
margin-left:0px;
margin-right:2px;
padding:3px;
border:2px solid #2e2e2e;
-moz-border-radius : 10px 10px 0px 0px;

}
.onglet_0
{
background:#424d6d;
border-bottom:0px solid #2e2e2e;
}
.onglet_1
{
background:#7384b7;
border-bottom:0px solid black;

background-image: url("http://www.generation-upload-fr.com/upload2/82462pattern4.1.jpg");
}
.contenu_onglet
{
background-color:#7384b7;
border:2px solid #2e2e2e;
margin-top:-1px;
padding:5px;
display:none;
-moz-border-radius : 0px 10px 10px 10px;
height: 100px;
overflow: auto;
background-image: url("http://www.generation-upload-fr.com/upload2/82462pattern4.1.jpg");

Franchement ? Je ne vois pas comment on pourrait faire.... J'ai déjà essayé de nombreuses fois sur mon forum mais je n'ai jamais réussi ^^'

D'accord, merci quant même =3 si un jour tu trouve la solution, pense à moi xD
Bref sur ce, j'ai tout ce qui me manquait pour arriver à maîtriser les onglets, je te remercie mille fois =)
Vous pouvez lock ^.^

Je déplace =D

Au plaisir :p

Contenue Onglet du QEEL

Contenue Onglet du QEEL

Sujets similaires

Sujets similaires

Partenaires Or