affichage du contenu d'onglet affichés en entiers et décalés ...

[sunsay]

Tout d'abord bonjour et je tiens à remercier tous ceux qui voudrons bien se pencher sur mon problème.

Voila mon problème:

J'ai mis en place sur mon en-tête un système d'onglet imbriqué dans un tableau pour afficher une colonne permanente sur la gauche. Je me suis frotté assez vite à des problèmes tels qu'un décalage flagrant du contenu des onglets ( environs deux centimètre à l'écart de mon tableau qui est flagrant sur l'onglet bingo book ), de l'affichage complet des onglets quand on arrive sur le site ( ils sont mis les uns derrière les autres et dès qu'on clique sur l'un d"eux, l'affichage réagit comme il le devrait, n'en affichant qu'un seul ) et enfin, la longueur de mon code était trop grand pour afficher correctement les différent contenus ( je me suis tourné vers l'idée d'utiliser un texte placé sur une page html pour le lier ensuite aux contenus, mais de ce côté, je n'y arrive pas. Ce n'est peut être même pas possible ^^' )

pour résumer:

1 - le contenu de mes onglets est décalé sur la droite, comment régler le problème ?
2 - Comment faire pour que mes onglets ne s'affichent pas en totalité à l'arrivée sur le forum ?
3 - Me donner une marche à suivre, soit pour lier un texte depuis une page html, soit un autre moyen d'augmenter la quantité d'information que l'on peut mettre sur l'en-tête vu que mon système à moité remplis commence déjà à perdre des données.

bien je met aussi le code que j'utilise ( sans le contenu pour plus de clarté )

Code:


<table border=1>
<td width=180>
~ news ~<br>
Bientot j'arriverais peut être à centrer le contenu des onglets et placer une hauteur fixe avec un asenseur défilant ^^ un jour peut être ... <br><br>
~ Le membre du mois ~ <br>
L'avatar ( réduis si besoin est à la taille de 180 pixel max de largeur du plus actif du forum sur la durée d'un mois ) <br><br>
~ Lecteur portable ~ <br>
</center></td>
<td><center>
<script>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>
<style>
ul, li{
  list-style: none;
}
.mon_onglet{
  float: left;
  padding: 2px 5px;
  color: #000;
}         
.mon_onglet_selected{
  float: left;
  padding: 2px 5px;
  color: #000;
 }           
.clear{
  clear: both;
}
.mon_contenu{
  color: #000;
  padding: 5px;
}
#mes_contenus, #mes_onglets{
  width: 100%;
}
</style><div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/274446Onglet1.png" /></li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/534074onglet5.png" /></li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/659146onglet4.png" /></li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/408725onglet3.png" /></li>
        <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/164961onglet2.png" /></li>
        <li id="o_6" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/322164onglet6.png" /></li>
        <div class="clear"><div id="mes_contenus">
    <div style ="background: url(http://img4.hostingpics.net/pics/149495test.png);width: 563px;height:446px;" id="co_1" class="mon_contenu">

Message de bienvenue sur le site en général avec les infos rapides le rp du mois ect ^^...
</div>

    <div style ="background: url(http://img4.hostingpics.net/pics/973804test5.png);width: 563px;height:446px;" id="co_2" class="mon_contenu" style="display: none;">

Le tableau ninja avec les nukenins recherchés

</div>

    <div style="background: url(http://img4.hostingpics.net/pics/412326test2.png);width: 563px;height:446px;" id="co_3" class="mon_contenu" style="display: none;"> Le contexte avec quelques images pourquoi pas pour illustrer ^^ </div>

    <div style="background: url(http://img4.hostingpics.net/pics/865272test6.png);width: 563px;height:446px;" id="co_4" class="mon_contenu" style="display: none;">

L'équipe du staff, les modos "villages" et les liens pour les partenariats et tout ...

</div>
      <div style ="background: url(http://img4.hostingpics.net/pics/852185test4.png);width: 563px;height:446px;" id="co_5" class="mon_contenu" style="display: none;">

accueil des nouveaux membres avec la marche à suivre et l'explication rapide du système utilisé

</div>
      <div style ="background: url(http://img4.hostingpics.net/pics/829996test3.png);width: 563px;height:446px;" id="co_6" class="mon_contenu" style="display: none;">

La liste des partenaires en mini icone ou en bannière et pourquoi pas un autre lien vers les partenariats.


</div>
</div></div></ul></div>

</td></center>
</table>


enfin, le lien vers le forum test que j'utilise pour prévisualiser les résultats de mes modifications ( histoire d'éviter ce genre de petits désagréments sur le forum original ^^' )

http://n3-fowtest.forums-rpg.com/

merci d'avance ^^

[Invité]

Bonsoir,

Dans panneau d'admin' > modules > Gestion des pages Html, créez une page Html et insérez ceci:

Code:


<table border=1> <td width=180> ~ news ~<br> Bientot j'arriverais peut être à centrer le contenu des onglets et placer une hauteur fixe avec un asenseur défilant ^^ un jour peut être ... <br><br> ~ Le membre du mois ~ <br> L'avatar ( réduis si besoin est à la taille de 180 pixel max de largeur du plus actif du forum sur la durée d'un mois ) <br><br> ~ Lecteur portable ~ <br> </center></td>
<td><center> <script>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>
 <style>
 ul, li{
margin:0px;
padding:0px;
list-style: none; }

.mon_onglet{
display: inline;
padding: 2px 5px;
color: #000; }

.mon_onglet_selected{
display: inline;
padding: 2px 5px;
color: #000; }

.clear{ clear: both; } .

mon_contenu{
margin: 5px;
color: #000;
padding: 5px;
text-align: center;
width: 563px;
height:446px;}

#mes_contenus, #mes_onglets{ width: 100%; }
</style>
<div id="mes_onglets"> <ul>
<li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/274446Onglet1.png" /></li>
 <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/534074onglet5.png" /></li>
<li id="o_3" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/659146onglet4.png" /></li>
<li id="o_4" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/408725onglet3.png" /></li>
 <li id="o_5" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/164961onglet2.png" /></li>
 <li id="o_6" class="mon_onglet" onclick="changeOnglet(this);"><img src="http://img4.hostingpics.net/pics/322164onglet6.png" /></li>
 <div class="clear"><div id="mes_contenus">
 <div style ="background: url(http://img4.hostingpics.net/pics/149495test.png);" id="co_1" class="mon_contenu"> Message de bienvenue sur le site en général avec les infos rapides le rp du mois ect ^^... </div> <div style ="background: url(http://img4.hostingpics.net/pics/973804test5.png); display: none;" id="co_2" class="mon_contenu" > Le tableau ninja avec les nukenins recherchés </div>

 <div style="background: url(http://img4.hostingpics.net/pics/412326test2.png); display: none;" id="co_3" class="mon_contenu"> Le contexte avec quelques images pourquoi pas pour illustrer ^^ </div>

<div style="background: url(http://img4.hostingpics.net/pics/865272test6.png);width: 563px;height:446px; display: none;" id="co_4" class="mon_contenu"> L'équipe du staff, les modos "villages" et les liens pour les partenariats et tout ... </div>

 <div style ="background: url(http://img4.hostingpics.net/pics/852185test4.png); display: none;" id="co_5" class="mon_contenu"> accueil des nouveaux membres avec la marche à suivre et l'explication rapide du système utilisé </div>

 <div style="background:url('http://img4.hostingpics.net/pics/829996test3.png'); width:563px; height:446px; display: none;" id="co_6" class="mon_contenu"> La liste des partenaires en mini icone ou en bannière et pourquoi pas un autre lien vers les partenariats. </div> </div></div></ul></div>
 </td>
</center>
 </table>

Donnez-lui le nom que vous voulez et choisissez non aux deux questions.

Ensuite dans panneau d'admin > Affichage > Généralité, placez ceci en le personnalisant:

Code:

<iframe src="ADRESSE DE LE PAGE HTML" width="780" height="580" frameborder="0"></iframe>

J'ai mis les dimensions un peu au hasard, à vous d'ajuster tout ça .

Cordialement.

[sunsay]

Merci pour la réponse rapide ^^

Cela semble avoir résolu la totalité des problèmes ^^ ( même si certaines images ne s'affichaient plus, mais ce n'était pas grand chose il manquait juste un partie de code sur certains onglets ^^ ).

Par contre je me pose deux autres questions: j'ai placé un tableau dans l'un de mes onglet et son contour n’apparaît plus. je me demandais donc s'il fallait utiliser un code différent s'il est situé dans une page html ( si ce n'est pas le cas, je chercherais juste où est mon erreur dans mon code de tableau ^^ ) et si cette dernière avait une limite de caractère ( comme l'en-tête en somme ou si je peut être tranquille sur ce point là ^^ .

Encore une fois merci ^^ vous m'avez sorti d'un sacré mauvais pas ^^

Edit : bon cela devait venir de mon code puisqu'il m'a seulement fallu le refaire pour que le cadre réapparaisse sur mon tableau ^^ ( pas de la même manière qu'avant mais ce n'est surement qu'une subtilité que je n'ai pas encore saisie ^^' )

[Invité]

Bonjour,

Les pages Html ont certainement une limite de caractères, malheureusement je ne la connais pas. Une chose est sure, elle est beaucoup, beaucoup plus loin que pour le cadre d'en-tête .

Cordialement.

[sunsay]

Oki merci de l'info ^^ je marque le sujet en résolu donc ^^