tableau des onglets [URGENT]

3 participants

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

Résolu tableau des onglets [URGENT]

Message par Kyou Mar 27 Mar 2012 - 22:08

Désolé je suis encore là ^^' j'ai résolu tous les problèmes sauf un qui consiste à faire un tableau à onglets ( ici ). Ils montrent que trois exemples, mais j'aimerais avoir les onglets (pas le contenue) à droite du contenue (: est-ce que ca serait possible qu'on m'explique quelle partie il faut changer. Je ne sais pas si c'est le même code, mais voilà mes html et css pour vous aidez :
Le css :
Spoiler:

mon html :
Spoiler:


merci de votre aide (:


Dernière édition par Kyou le Sam 31 Mar 2012 - 13:14, édité 2 fois
avatar

Kyou
****

Messages : 310
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: tableau des onglets [URGENT]

Message par Ea Mer 28 Mar 2012 - 2:36

Bonjour,


Ce tuto a été mis à jour il y a une ou deux semaines.

Votre code html n'est pas au mieux de sa forme ( vous avez des <tr> dans des <center> alors que ça ne devrait pas pouvoir être le cas ), mais en reprenant votre code avec le nouveau tuto et les onglets à droite ça donne ce css :

Code:
/* .systab => tout le système d'onglet */
.systab {
  margin: auto;
  font: 11px "arial", serif;
}
/* .systab .tabs => le conteneur d'onglet */
.systab .tabs {
  text-align: center;
}
/* .systab .tab => les onglet */
.systab .tab {
  cursor: pointer;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {
  width: 682px;
  margin-top: 10px;
  border: 1px solid #000;
  padding: 10px;
}
/* centrage des tableaux dans les contenus d'onglet */
.systab .content table { margin: auto; }
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
}
Et ce code html :

Code:
<div class="systab s_bottom s_float s_slide">
   <div>
      <span><img src="http://img546.imageshack.us/img546/4321/welcomevb.png"/></span>
      <table>
      <tr>
         <td align="left">
            <center>
            <tr>
               <td style="width: 170px; border-right: 1px solid black; padding-right: 20px;">
                  <div style="line-height: 10px;">
                     <img src="http://img811.imageshack.us/img811/6563/bienvenuel.png" class="gradualfader">
                     <div align="justify">
                        <font face="arial">Je te souhaite la bienvenue à Bourg-Trésor. Une île remplit de Pokémons. C'est là que ton aventure commence jeune explorateur. Tu apprendras comment sauver le monde des Pokémons et leurs habitants. Mais encore cela dépend de toi. Tu peux être un simple habitant, comme un explorateur, ou bien le mal en personne.. Dans ce cas la Team Skull est faite pour toi.</font>
                     </div>
                  </div>
               </div>
            </td>
            <td style="width: 150px; padding-left: 10px;">
               <div style="line-height: 10px;">
                  <img src='http://img696.imageshack.us/img696/3253/sanstitr1.png'/></img><br>
                  <font face="arial">
                  <div align="justify">
                     Vous avez toujours désiré faire basculer votre vie ? Rêvé de devenir un Pokémon ? De pouvoir évoluer en différentes formes incroyablement magiques ? De posséder toujours plus de pouvoirs et attaques phénoménaux ? Votre rêve va enfin se réaliser : Pokémon Agency est fait pour vous. Rencontrez des milliers de pokémon différents, affrontez-les et devenez le plus puissants de tous ! <a href="http://pk-agency.forumgratuit.org/t6-l-histoire-de-pokemon-agency">A suivre.</a>
                  </div>
                  </font><br>
                  <a href="http://pk-agency.forumgratuit.org/t5-le-guilde-du-debutant#5"><img src='http://img687.imageshack.us/img687/8531/guidew.png'/></a>
               </div>
            </div>
         </div>
      </td>
   </tr>
   </table>
</div>
<div>
   <span><img src="http://img862.imageshack.us/img862/9158/guidev.png"/></span>
   <table>
   <tr>
      <td align="left">
         <center>
         <tr>
            <td style="width: 170px; border-right: 1px solid black; padding-right: 10px;">
               <div style="line-height: 10px;">
                  <img src='http://img521.imageshack.us/img521/1433/sanstre1.png'/><br>
                  <img src="http://img171.imageshack.us/img171/9922/71995313.png" class="gradualfader"><img src="http://img35.imageshack.us/img35/8711/36743756.png" class="gradualfader"><img src="http://img849.imageshack.us/img849/3545/43156547.png" class="gradualfader"><img src="http://img171.imageshack.us/img171/4835/57705406.png" class="gradualfader"><br>
                  <img src='http://img846.imageshack.us/img846/6538/amisp.png'/>
                  <form name="Menuderoulant" method="POST">
                     <input type="button" onclick="location = document.Menuderoulant.wxlmenu.options [document.Menuderoulant.wxlmenu.selectedIndex].value;"value="Go">
                     <select name="wxlmenu" size="1">
                        <option selected="selected">
                        Nos Partenaires </option>
                        <option value="LIEN1" target="_blank">TEXTE1</option>
                        <option value="LIEN2" target="_blank">TEXTE2</option>
                     </select>
                  </form>
               </div>
            </div>
         </td>
         <td style="width: 150px; padding-left: 10px;">
            <div style="line-height: 10px;">
               <img src='http://img40.imageshack.us/img40/7127/nouveautz.png'/></img><br>
               <font face="arial">
               <div align="justify">
                  Vous avez toujours désiré faire basculer votre vie ? Rêvé de devenir un Pokémon ? De pouvoir évoluer en différentes formes incroyablement magiques ? De posséder toujours plus de pouvoirs et attaques phénoménaux ? Votre rêve va enfin se réaliser : Pokémon Agency est fait pour vous. Rencontrez des milliers de pokémon différents, affrontez-les et devenez le plus puissants de tous ! <a href="Adresse ou URL">A suivre.</a><br>
                  <a href="http://pk-agency.forumgratuit.org/t1-le-reglement-generale"><img src='http://img268.imageshack.us/img268/3296/613.png'/></a><a href="http://pk-agency.forumgratuit.org/f11-sagesse-du-maitre"><img src='http://img100.imageshack.us/img100/4277/faqmn.png'/></a><a href="http://pk-agency.forumgratuit.org/t2-la-liste-des-celebrites-prises"><img src='http://img12.imageshack.us/img12/2881/bottin.png'/></a><img src='http://img248.imageshack.us/img248/9149/wwwzv.png'/><img src='http://img13.imageshack.us/img13/4154/invitb.png'/>
               </div>
               </font>
            </div>
         </div>
      </div>
   </td>
</tr>
</table>
<img src='http://img141.imageshack.us/img141/7715/pok.png'/><br>
<img src='http://i.neoseeker.com/mgv/506717-darkrayquaza/717/56/pokeball_icon.gif'/><img src='http://i.neoseeker.com/mgv/506717-darkrayquaza/717/56/pokeball_icon.gif'/><img src='http://i.neoseeker.com/mgv/506717-darkrayquaza/717/56/pokeball_icon.gif'/><img src='http://i.neoseeker.com/mgv/506717-darkrayquaza/717/56/pokeball_icon.gif'/><img src='http://i.neoseeker.com/mgv/506717-darkrayquaza/717/56/pokeball_icon.gif'/>
</div>
<div>
<span><img src="http://img705.imageshack.us/img705/4261/teamjl.png"/></span>
<table>
<tr>
   <td align="left">
      <center>
      <tr>
         <td style="width: 170px; border-right: 1px solid black; padding-right: 10px;">
            <img src='http://img542.imageshack.us/img542/6944/sanstitre1lq.png'/></img><br>
            <div style="line-height: 10px;">
               <font face="arial">
               <div align="justify">
                  La totalité du forum appartient à l'équipe administrative de Pokémon Agency. Alors veuillez à ne pas voler les textes, les images du forum. Le vol est punis par la lois. Celui qui verra une reproduction de P.A sur un autre site que le notre, avertissez de suite le fondateur pour qu'il porte plainte.<br>
                  <b>Le design est réalisé par Art-Design. Les images et textes sont de Grodoudou. La page d'accueil de forum forumactif. Et les catégories en onglets de X</b>
               </div>
               </font>
            </div>
         </td>
         <td style="width: 150px; padding-left: 10px;">
            <div style="line-height: 10px;">
               <font face="arial">
               <div align="justify">
                  <img src='http://img38.imageshack.us/img38/7558/equipen.png'/></img><br>
                  <a href="http://pk-agency.forumgratuit.org/u1"><img src='http://img443.imageshack.us/img443/5952/sanstitre3godn.png'/></img></a><img src='http://img856.imageshack.us/img856/7136/sanstitre2djj.png'/></img><br>
                  <a href="http://pk-agency.forumgratuit.org/u5"><img src='http://img846.imageshack.us/img846/258/gardeju.png'/></img></a><a href="http://pk-agency.forumgratuit.org/u8"><img src='http://img51.imageshack.us/img51/6233/41542496.png'/></img></a><br>
                  <a href="http://pk-agency.forumgratuit.org/u6"><img src='http://img84.imageshack.us/img84/452/sanstitre3ig.png'/></img></a><a href="http://pk-agency.forumgratuit.org/u7"><img src='http://img42.imageshack.us/img42/271/pngvm.png'/></img></a>
               </div>
            </div>
            </font>
         </td>
      </tr>
      </table>
   </div>
</div>
Ce qui donne :
http://pastehtml.com/view/bssyyowkn.html

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

Résolu Re: tableau des onglets [URGENT]

Message par Kyou Mer 28 Mar 2012 - 20:58

Magnifique *-* J'aurais une dernière question, est-ce que tu sais comment coller l'onglet au contenue comme ce forum : http://vulnera-samento.forumactif.com/forum car j'ai des images réactives pour chaque contenue d'onglet, et j'aimerais que le bouton soit cote à cote avec l'onglet.

Parce que j'ai ça à mettre dans le premier contenue :
Code:
[spoiler]<img usemap="#page_d_accueil" src="http://s4.noelshack.com/old/up/page1-fef848a837.png" width="700px" height="769px" style="margin-top:130px; margin-left: 80px" " border="0"><map name="page_d_accueil"><area shape="rect" coords="32,208,154,240" href="http://seconde-chance.forumgratuit.org/t55-contexte-sauve-une-vie">
<area shape="rect" coords="190,198,347,236" href="http://seconde-chance.forumgratuit.org/t2-reglement-generale">
<area shape="rect" coords="389,187,501,219" href="http://seconde-chance.forumgratuit.org/t6-la-liste-des-celebrites-prises">
<area shape="rect" coords="535,175,738,210" href="http://seconde-chance.forumgratuit.org/f41-foire-aux-questions"></map><div style="margin-left: 287px; margin-top: -483px; letter-spacing: 1px; font-family: times new roman; text-transform: lowercase; font-size: 12px; text-align: justify; line-height: 12px"><div style="overflow: auto; width: 299px; height: 145px; padding: 0px">Personne ne s'est vraiment intéressé aux personnes souffrant d'une maladie incurable ou d'un handicap moteur. Pourtant ils sont comme nous et ont besoin simplement plus d'attention. C'est pour ça que "<b>Seconde Chance</b>" leur ouvre ses portes. Une école spécialisée est adapté pour eux, non seulement ils leurs enseigne, mais ils les aide à réaliser leur rêve.. pour qu'à l'avenir, il ne regrette rien et se donne à fond dans leur lutte contre leur handicap ou maladie. Ferez-vous partie de ce magnifique voyage ? Ou n'êtes-vous qu'un simple voyageur en quête de savoir dans notre vaste univers ?</div></div><table><td><div style="margin-left: 115px; margin-top: 93px; letter-spacing: 1px; font-family: times new roman; text-transform: lowercase; font-size: 12px; text-align: justify; line-height: 12px"><div style="overflow: auto; width: 260px; height: 66px"><b>Le design</b> est réalisé par <b>adrenaline</b> de art-design, <b>la page d'accueil</b> est de <b>Noma Oaklani</b>, <b>le qeel</b> est codé par <b>kikino-sama</b> et <b>nutty.</b> de templatif, <b>le contenue du forum</b> appartient à <b>la Directrice</b>. Nous remercions <b>SeongHae</b> pour l'aide qu'elle nous a apporté au sein du forum.</div></div></td><td><div style="margin-left: 110px; margin-top: 93px; letter-spacing: 1px; font-family: times new roman; text-transform: lowercase; font-size: 12px; text-align: justify; line-height: 12px"><div style="overflow: auto; width: 275px; height: 66px"><b>Ouverture</b> ▬ <b>../../..</b></div></div></td></table></div>
[/spoiler]

Pour que je puisse recommencer avec ma nouvelle page d'accueil, est-ce que tu pourrais remplacer le contenue de l'ancien par "contenue" et l'image de l'onglet par "onglet" >> parce que je ne sais pas encore me repérer dans les codages.
avatar

Kyou
****

Messages : 310
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: tableau des onglets [URGENT]

Message par Ea Mer 28 Mar 2012 - 21:37

Je n'ai pas compris.

Pour l'éloignement des onglets du machin, j'imagine par css ( par exemple .systab .tabs { position: relative; left: -20px; } pour les faire aller 20px vers la gauche ).

Pour le reste sur le tutoriel il y a un exemple sans presque rien ( avant les exemple ).

On y voir quelle structure ça a :

Code:
<div>
  <div><span> onglet</span>
    Contenu de l'onglet
  </div>
    <div><span>onglet</span>
      Contenu de l'onglet
    </div>
</div>
Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

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

Résolu Re: tableau des onglets [URGENT]

Message par Kyou Mer 28 Mar 2012 - 23:25

http://test-sd.forumgratuit.org/ j'ai un grave problème 8.8 je ne sais pas ou j'ai planté, mais je sais que je me suis planté x)
avatar

Kyou
****

Messages : 310
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: tableau des onglets [URGENT]

Message par Kyou Jeu 29 Mar 2012 - 18:59

Que je t'explique la situation, le cadre et les onglets sont tout en haut de la page d'accueil alors que le contenue "image réactive" est bien à sa place, j'ai essayé de le remettre comme il faut, mais même avec "padding" et "margin" ça ne change pas grand chose. Alors si tu pouvais m'aider à éclaicir se problème ça serait parfait, car c'est le seul défaut du code pour le moment.
avatar

Kyou
****

Messages : 310
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: tableau des onglets [URGENT]

Message par Kyou Ven 30 Mar 2012 - 15:34

Je suis un peu pressée, vraiment désolée éè
Ca aurait du faire deux semaines que j'aurais du ouvrir le fofo (commande, aide, ...) et rien o/
Donc j'aimerais que cette fois y soit la bonne o: juste en résoulant le probleme !
avatar

Kyou
****

Messages : 310
Inscrit(e) le : 03/03/2010

http://seventies.frenchboard.com/
Kyou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: tableau des onglets [URGENT]

Message par Anzu Ven 30 Mar 2012 - 16:50

tableau des onglets [URGENT] Send_210Bonjour,

Je vous rappelle qu'il est autorisé un seul UP par tranche de 24 heures, à partir de votre dernier message posté dans le sujet concerné.

Je vous invite à lire :

A bientôt sur ForumActif Smile

tableau des onglets [URGENT] Search10Bonjour,

Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre :
    - doit-être explicite (qui explique brièvement le problème),
    - ne doit pas être en majuscules,
    - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"...

Merci de le modifier en cliquant sur le bouton :editer: de votre premier message. Wink

A bientôt sur ForumActif Smile

Bonjour,

Vous n'êtes pas tout seul sur le forum, prenez votre mal en patience comme tout le monde Wink

Cordialement.
Anzu

Anzu
Membre actif

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

https://forum.forumactif.com/
Anzu 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