Onglets dans un cadre du QEEL ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Onglets dans un cadre du QEEL ?

Message par Bad Girl Sam 21 Mai 2011 - 15:36

BONJOUR, BONSOIR à tous,

Je fais appel à vous car je souhaite réaliser un effet dans le cadre de mon QEEL.
Je m'explique, actuellement, les confréries de mon forum sont représentées de cette façon :
Spoiler:

Et j'aimerai ajouter des onglets à ce cadre, comme ceci :
Spoiler:

Je voudrai que lorsque nous cliquons sur chacun des onglets ajoutés en haut, une nouvelle information apparaissent dans le cadre violet. Je pensais pouvoir m'aider de ce code, donné par Isolde dans un autre sujet mais il y aurait encore de nombreuses modifications à faire et je ne sais comment l'insérer dans mon Templates...

Spoiler:

Merci beaucoup de votre aide !


Dernière édition par Bad Girl le Mer 25 Mai 2011 - 15:24, édité 1 fois
Bad Girl

Bad Girl
****

Féminin
Messages : 307
Inscrit(e) le : 31/08/2009

http://remember-that-day.forumactif.org/
Bad Girl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets dans un cadre du QEEL ?

Message par Invité Sam 21 Mai 2011 - 17:12

Bonjour,

Le code d'onglet qui conviendrait mieux est celui-ci:
Code:
<script type="text/javascript">function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }           
}</script>
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
       
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    </div></div></ul></div>
Avec ceci dans votre CSS ( à personnaliser):
Code:
.mon_onglet{
  width:30%;
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  cursor: pointer;
  margin-bottom: -1px;
  list-style-type: none;}

.mon_onglet:hover{
  background: #b8efa1;
  list-style-type: none;}
         
.mon_onglet_selected{
  width:30%;
  float: left;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #ffffff;
  border-top: 1px solid #ff0000;
  border-right: 1px solid #ff0000;
  border-left: 1px solid #ff0000;
  border-bottom: 1px solid #ffffff;
  cursor: pointer;
  margin-bottom: -1px;
  list-style-type: none;}
         
.clear{
  clear: both;}

.mon_contenu{
  color: #000;
  background: #ffffff;
  border: 1px solid #ff0000;
  padding: 10px;
  margin-top: -1px;         
  margin-left:-20px;}

#mes_contenus, #mes_onglets{
  width: 100%;
  list-style-type: none;}
Appliquez le style de votre cadre à la class "mon_contenu". Nommez vos onglets et placez votre code actuel pour les confréries dans le premier contenu.
Ensuite placez le code dans un tableau, à l'endoit où est votre code actuel pour les confréries dans votre QEEL.

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets dans un cadre du QEEL ?

Message par Bad Girl Sam 21 Mai 2011 - 17:37

Merci beaucoup de votre aide et de votre rapidité !
Je vais essayer ce code très bientôt.
Par contre, je ne comprends pas pourquoi je dois mettre mon code dans un tableau...
Un tableau de quelle sorte ?
Bad Girl

Bad Girl
****

Féminin
Messages : 307
Inscrit(e) le : 31/08/2009

http://remember-that-day.forumactif.org/
Bad Girl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets dans un cadre du QEEL ?

Message par Invité Sam 21 Mai 2011 - 17:41

Je ne sais pas comment est monté votre QEEL, c'est pour cela que je vous conseille de mettre le code dans un tableau, pour ne pas tout déformer. Enfaisant simplement comme ceci:
Code:
<table width="100%"><tr><td><script type="text/javascript">function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }           
}</script>
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
       
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">Mon contenu 1</div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    </div></div></ul></div></tr></td></table>

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets dans un cadre du QEEL ?

Message par Bad Girl Dim 22 Mai 2011 - 11:34

D'accord, merci beaucoup.
J'y ai encore peux travaillé, mais pour l'instant j'obtiens ceci :
http://my-forum-test.forumactif.com/forum ( QEEL en bas )

Mon code est inséré dans mon Template sans le tableau car en le mettant, le forum se déforme... Je l'ai donc enlevé. Pour l'instant, j'aimerai savoir comment faire pour que le grand cadre violet reste de la même taille qu'au départ ? Je le trouve un peu trop étendu et le texte est centré alors qu'avant il était sur la gauche. J'aimerai également retrouver l'image de fond que j'avais inséré dans le cadre, elle n'y est plus. ( https://i.imgur.com/IWTur.png ). Je suppose que tout cela n'est que du CSS ?

Voici mon CSS:
Spoiler:

Et la partie QEEL de mon Template :

Spoiler:

Merci beaucoup de votre aide !
Bad Girl

Bad Girl
****

Féminin
Messages : 307
Inscrit(e) le : 31/08/2009

http://remember-that-day.forumactif.org/
Bad Girl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets dans un cadre du QEEL ?

Message par Invité Dim 22 Mai 2011 - 15:02

Bonjour,

Pour que le cadre garde la même hauteur, on peut l'ajouter dans le CSS à la class ".mon_contenu".
J'ai déterminé la largeur du contenu et des onglets à 100%. Vous pouvez tout à fait remplacer cette valeur par un nombre de pixel. Idem pour la taille des onglets Wink .
Pour que le texte s'aligne à gauche, j'ai ajouté " text-align:left;" à la class ".mon_contenu".
Votre image de fond est bien là, il manque juste le ";" à la fin de la ligne.
Ce qui donne ceci pour le CSS:
Code:
/* CSS onglets QEEL */

.mon_onglet{
  width:160px;
  display: inline;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #;
  border: 5px solid #95568d;
  cursor: pointer;
  margin-bottom: -1px;
  list-style-type: none;
  -moz-box-shadow: 3px 3px 3px #000000;}

.mon_onglet:hover{
  background: #b8efa1;
  list-style-type: none;}
       
.mon_onglet_selected{
  width:160px;
  display: inline;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background: #;
  border-top: 5px solid #95568d;
  border-right: 5px solid #95568d;
  border-left: 5px solid #95568d;
  border-bottom: 5px solid #95568d;
  cursor: pointer;
  margin-bottom: -1px;
  list-style-type: none;
  -moz-box-shadow: 3px 3px 3px #000000;}
       
.clear{
  clear: both;}

.mon_contenu{
  color: #95568d;
  background-image: url("http://i.imgur.com/IWTur.png");
  background-repeat: repeat;
  border: 5px solid #95568d;
  padding: 0px;
  padding-top: 0px;
  margin-top: -1px;       
  margin-left:-30px;
  line-height: 15px;
  -moz-border-radius: 45px;
  -moz-box-shadow: 3px 3px 3px #000000;
  height:150px;
  text-align: left;}

#mes_contenus, #mes_onglets{
  width: 540px;
  list-style-type: none;}

Et ceci pour la partie du template ( il y avait un saut de ligne qui décalait le second onglet et un div de trop qui faisait varier la taille du contenu):
Code:
<!-- BEGIN disable_viewonline -->
<center><table cellspacing="2" cellpadding="2" width="800px" border="0" class="statistiques"><tr><td colspan="2">
<center>

<script type="text/javascript">function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }         
}</script>
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><FONT  face=Times New Roman; size=4><b><i>Les Confréries</i></b></font></li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><FONT  face=Times New Roman; size=4><b><i>Membres du mois</i></b></font></li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><FONT  face=Times New Roman; size=4><b><i>Intrigue de moment</i></b></font></li>
     
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu"><span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#d2c445" face="Arial">❝ Mon passé me hante, mon fardeau ❞ <a href="http://remember-that-day.forumactif.org/g5-mon-passe-me-hante-mon-fardeau" class="postlink">Here</a></font></b></i></span><br>
<span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#90c277" face="Arial">❝  Je croque la vie à pleines dents ❞  <a href="http://remember-that-day.forumactif.org/groupcp.forum?g=7" class="postlink">Here</a></font></b></i></span><br><span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#b86986" face="Arial">❝  L'amour avec un grand A  ❞ <a href="http://remember-that-day.forumactif.org/groupcp.forum?g=8" class="postlink">Here</a></font></b></i></span><br><span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#95568d" face="Arial">❝  Cœurs brisés  ❞ <a href="http://remember-that-day.forumactif.org/groupcp.forum?g=6" class="postlink">Here</a></font></b></i></span><br></div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    </div></ul></div>


</td></tr><tr>
<td width="10px"></td>
<td width="100px"></td></tr><tr>
<td width="340px"><style="text-align: justify"><span class="gensmall"><span id="bert">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Les Argentins ont posté un total de ");</script><script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/messages/,"messages");</script></span><br>
<span id="matt">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"Argentins à Buenos Aires");</script><span id="mitt"><script type="text/javascript">document.getElementById('mitt').innerHTML=document.getElementById('mitt).innerHTML.replace(/membres enregistrés/,"Argentins à Buenos Aires"); </script><br>
<span class="gensmall"><span id="delf">{TOTAL_USERS_ONLINE}</span><script> type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"personne qui se promène");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"personnes qui se promènent");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistré/,"Argentin");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistrés/,"Argentins");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisible et/,"anonyme");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisibles et /,"anonymes");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invité/,"touriste");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invités/,"touristes");</script></span><br>
<span id="yosh">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur/,"L' Argentin");</script><br><br>
<br>
<span id="bidule">{LOGGED_IN_USER_LIST}<br></span><script type="text/javascript">document.getElementById('bidule').innerHTML=document.getElementById('bidule').innerHTML.replace(/Utilisateurs/,"Argentins");</script></span></td>
<td width="340px"><table align="center" style="text-align: justify">
<tr><td>{L_CONNECTED_MEMBERS}</td></tr>
</table></td>
<td width="10px"></td>
</tr>
</table>
</tr>
</table>
<table width="58%" align="center" style="text-align: justify">
<tr><td>{L_WHOSBIRTHDAY_TODAY}<br>
{RECORD_USERS}</td></tr>
</table></center>
<!-- END disable_viewonline -->

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets dans un cadre du QEEL ?

Message par Bad Girl Dim 22 Mai 2011 - 16:33

Merci infiniment de votre aide ! I love you
Il y aurait encore deux choses à modifier que je ne trouve pas...

- Après avoir modifié le template, les informations des statistiques se sont décalées vers la gauche alors qu'elles étaient centrées; il me semble. Comment retrouver ceci ?
- Ensuite, j'aimerai que les onglets soient détachés du cadre finalement. J'ai bien réussi à les faire bouger en modifiant " margin-right: 5px; " par " margin-right: 6px; " mais maintenant, une partie du troisième onglet revient à la ligne... J'ai essayé de modifier certains paramètres mais je n'ai pas trouvé. http://my-forum-test.forumactif.com/forum

Je vous mets de nouveau mon CSS et mon template car j'ai modifié des choses.

CSS :

Spoiler:

Templates :

Spoiler:

Merci encore !
Bad Girl

Bad Girl
****

Féminin
Messages : 307
Inscrit(e) le : 31/08/2009

http://remember-that-day.forumactif.org/
Bad Girl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets dans un cadre du QEEL ?

Message par Invité Dim 22 Mai 2011 - 21:29

Bonsoir,

En jouant avec les "margin-bottom" et les "margin-top" on arrive à espacer les onglets du contenu. Si vous voulez agrandir l'espace entre les onglets, il faudra elargir le contenu aussi, ou réduire la taille de l'écriture dans vos onglets.

Testons comme ceci:
CSS:
Code:
/* CSS onglets QEEL */

.mon_onglet{
  width:160px;
  display: inline;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background-image: url("http://i.imgur.com/IWTur.png");
  border: 5px solid #95568d;
  cursor: pointer;
  margin-bottom: 15px;
  list-style-type: none;
  -moz-box-shadow: 3px 3px 3px #000000;}

.mon_onglet:hover{
  background: #b8efa1;
  list-style-type: none;}
       
.mon_onglet_selected{
  width:160px;
  display: inline;
  padding: 2px 10px;
  margin-right: 5px;
  color: #000;
  background-image: url("http://i.imgur.com/IWTur.png");
  border-top: 5px solid #95568d;
  border-right: 5px solid #95568d;
  border-left: 5px solid #95568d;
  border-bottom: 5px solid #95568d;
  cursor: pointer;
  margin-bottom: 15px;
  list-style-type: none;
  -moz-box-shadow: 3px 3px 3px #000000;}
       
.clear{
  clear: both;}

.mon_contenu{
  color: #95568d;
  background-image: url("http://i.imgur.com/IWTur.png");
  background-repeat: repeat;
  border: 5px solid #95568d;
  padding: 0px;
  padding-top: 0px;
  margin-top: 15px;       
  margin-left:-30px;
  line-height: 15px;
  -moz-border-radius: 45px;
  -moz-box-shadow: 3px 3px 3px #000000;
  height:150px;
  text-align: left;}

#mes_contenus, #mes_onglets{
  width: 540px;
  list-style-type: none;}
Template:
Code:
<!-- BEGIN disable_viewonline -->
<center><table cellspacing="2" cellpadding="2" width="800px" border="0" class="statistiques"><tr><td colspan="2">
<center>

<script type="text/javascript">function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }       
}</script>
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><FONT  face=Times New Roman; size=4><b><i>Les Confréries</i></b></font></li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><FONT  face=Times New Roman; size=4><b><i>Membres du mois</i></b></font></li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><FONT  face=Times New Roman; size=4><b><i>Intrigue de moment</i></b></font></li>
   
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu"><ul><span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#d2c445" face="Arial">❝ Mon passé me hante, mon fardeau ❞ <a href="http://remember-that-day.forumactif.org/g5-mon-passe-me-hante-mon-fardeau" class="postlink">Here</a></font></b></i></span><br>
<span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#90c277" face="Arial">❝  Je croque la vie à pleines dents ❞  <a href="http://remember-that-day.forumactif.org/groupcp.forum?g=7" class="postlink">Here</a></font></b></i></span><br><span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#b86986" face="Arial">❝  L'amour avec un grand A  ❞ <a href="http://remember-that-day.forumactif.org/groupcp.forum?g=8" class="postlink">Here</a></font></b></i></span><br><span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#95568d" face="Arial">❝  Cœurs brisés  ❞ <a href="http://remember-that-day.forumactif.org/groupcp.forum?g=6" class="postlink">Here</a></font></b></i></span><br></div>
    <div id="co_2" class="mon_contenu" style="display: none;"><ul>Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;"><ul>Mon contenu 3</div>
    </div></ul></div>


</td></tr><tr>
<td width="10px"></td>
<td width="100px"></td></tr><tr>
<td colspan="2" width="340px" align="center"><style="text-align: justify"><span class="gensmall"><span id="bert">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Les Argentins ont posté un total de ");</script><script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/messages/,"messages");</script></span><br>
<span id="matt">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"Argentins à Buenos Aires");</script><span id="mitt"><script type="text/javascript">document.getElementById('mitt').innerHTML=document.getElementById('mitt).innerHTML.replace(/membres enregistrés/,"Argentins à Buenos Aires"); </script><br>
<span class="gensmall"><span id="delf">{TOTAL_USERS_ONLINE}</span><script> type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"personne qui se promène");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"personnes qui se promènent");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistré/,"Argentin");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistrés/,"Argentins");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisible et/,"anonyme");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisibles et /,"anonymes");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invité/,"touriste");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invités/,"touristes");</script></span><br>
<span id="yosh">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur/,"L' Argentin");</script><br><br>
<br>
<span id="bidule">{LOGGED_IN_USER_LIST}<br></span><script type="text/javascript">document.getElementById('bidule').innerHTML=document.getElementById('bidule').innerHTML.replace(/Utilisateurs/,"Argentins");</script></span></td></tr>
<tr><td colspan="2" width="340px"><table align="center" style="text-align: justify">
<tr><td>{L_CONNECTED_MEMBERS}</td></tr>
</table></td>
</tr>
</table>
</tr>
</table>
<table width="58%" align="center" style="text-align: justify">
<tr><td>{L_WHOSBIRTHDAY_TODAY}<br>
{RECORD_USERS}</td></tr>
</table></center>
<!-- END disable_viewonline -->
Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets dans un cadre du QEEL ?

Message par Bad Girl Mar 24 Mai 2011 - 19:22

Bonsoir,

Pour le CSS, c'est exactement ça, le cadre et les onglets sont parfaits, merci beaucoup !! En revanche, les statistiques du QEEL ne sont pas tout à fait positionnées comme je le voudrai. Je l'ai aimerai avec les informations d'un côté et les derniers connectés de l'autre, comme sur mon forum en ce moment :
( http://remember-that-day.forumactif.org/ ). Si vous avez besoin de mon Template du véritable forum, je vous le donnerai par MP.

MERCI !!
Bad Girl

Bad Girl
****

Féminin
Messages : 307
Inscrit(e) le : 31/08/2009

http://remember-that-day.forumactif.org/
Bad Girl a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets dans un cadre du QEEL ?

Message par Invité Mer 25 Mai 2011 - 12:10

Bonjour,

C'est déjà une bonne chose que la partie CSS soit réalisée Smile .
Rectification de la partie template:
Code:
<!-- BEGIN disable_viewonline -->
<center><table cellspacing="2" cellpadding="2" width="800px" border="0" class="statistiques">
<center><div>
<script type="text/javascript">function changeOnglet(_this){
    var getOnglets    = document.getElementById('mes_onglets').getElementsByTagName('li');
    for(var i = 0; i < getOnglets.length; i++){
        if(getOnglets[i].id){
            if(getOnglets[i].id == _this.id){
                getOnglets[i].className = 'mon_onglet_selected';
                document.getElementById('c' + _this.id).style.display            = 'block';
            }
            else{
                getOnglets[i].className = 'mon_onglet';
                document.getElementById('c' + getOnglets[i].id).style.display    = 'none';
            }
        }
    }       
}</script>
<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><FONT  face=Times New Roman; size=4><b><i>Les Confréries</i></b></font></li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><FONT  face=Times New Roman; size=4><b><i>Membres du mois</i></b></font></li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><FONT  face=Times New Roman; size=4><b><i>Intrigue de moment</i></b></font></li>
   
        <div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu"><ul><span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#d2c445" face="Arial">? Mon passé me hante, mon fardeau ? <a href="http://remember-that-day.forumactif.org/g5-mon-passe-me-hante-mon-fardeau" class="postlink">Here</a></font></b></i></span><br>
<span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#90c277" face="Arial">?  Je croque la vie à pleines dents ?  <a href="http://remember-that-day.forumactif.org/groupcp.forum?g=7" class="postlink">Here</a></font></b></i></span><br><span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#b86986" face="Arial">?  L'amour avec un grand A  ? <a href="http://remember-that-day.forumactif.org/groupcp.forum?g=8" class="postlink">Here</a></font></b></i></span><br><span style="font-size: 29px; letter-spacing: -3px; line-height: normal"><i><b><font color="#95568d" face="Arial">?  Cœurs brisés  ? <a href="http://remember-that-day.forumactif.org/groupcp.forum?g=6" class="postlink">Here</a></font></b></i></span><br></div>
    <div id="co_2" class="mon_contenu" style="display: none;"><ul>Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;"><ul>Mon contenu 3</div>
    </div></ul></div>


</div></</div></center><tr><td width="10px"></td><td width="100px"></td><td width="340px"><style="text-align: justify"><span class="gensmall">
<span id="bert">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Les Argentins ont posté un total de ");</script><script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/messages/,"messages");</script></span><br>
<span id="matt">{TOTAL_USERS}</span><script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"Argentins à Buenos Aires");</script><span id="mitt"><script type="text/javascript">document.getElementById('mitt').innerHTML=document.getElementById('mitt).innerHTML.replace(/membres enregistrés/,"Argentins à Buenos Aires"); </script><br>
<span class="gensmall"><span id="delf">{TOTAL_USERS_ONLINE}</span><script> type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"personne qui se promène");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"personnes qui se promènent");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistré/,"Argentin");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Enregistrés/,"Argentins");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisible et/,"anonyme");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invisibles et /,"anonymes");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invité/,"touriste");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/Invités/,"touristes");</script></span><br>
<span id="yosh">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur/,"L' Argentin");</script><br><br>
<br>
<span id="bidule">{LOGGED_IN_USER_LIST}<br></span><script type="text/javascript">document.getElementById('bidule').innerHTML=document.getElementById('bidule').innerHTML.replace(/Utilisateurs/,"Argentins");</script></span></td><td width="340px"><table align="center" style="text-align: justify"><tr><td><tr><td class="row1"><span class="gensmall">
{L_CONNECTED_MEMBERS}</td></tr></td></tr></table><td width="10px"></td></tr></table><table width="58%" align="center" style="text-align: justify"><tr><td><tr><td class="row1"><span class="gensmall">{L_WHOSBIRTHDAY_TODAY}<br>
{RECORD_USERS}</td></tr></table></center>
<!-- END disable_viewonline -->

Cordialement.
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Onglets dans un cadre du QEEL ?

Message par Bad Girl Mer 25 Mai 2011 - 15:23

C'est exactement ça !! cheers
Merci énormément Isolde !! Mon problème est résolu Flowers2
Bad Girl

Bad Girl
****

Féminin
Messages : 307
Inscrit(e) le : 31/08/2009

http://remember-that-day.forumactif.org/
Bad Girl a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum