Problème avec les tableaux a onglets

2 participants

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

Résolu Problème avec les tableaux a onglets

Message par Darkrai Mar 18 Déc 2012 - 0:59

Bonjour,j'ai un problème avec mon tableau a onglets voici mon code:
Code:
<div class="systab" id="tab-bloc"><div>
    <span><font color="red"><strong>/!\Important/!\</strong></font></span>
<font color="red">/!\Important/!\
J'ai enfin mis les légendaires de la 5G!!
Maintenant,veuillez-vous rendre dans votre profil et choisir un légendaire pour chaque génération!!</font>
  </div><div id="tab-bienvenue">   
<span><strong>Bienvenue</strong></span>
  <ul>
<font face="Arial"><font color="#1c1717"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 20px; line-height: normal">Bienvenue <font color="#A39191">{USER&amp;#8288;NAME}</font></font><span style="font-size: 20px; line-height: normal"><font color="#1c1717"></font><font color="#1c1717">, amuses toi bien sur</font> <font color="#b32d2d">Pokémon Life <font color="#1c1717">.</font></span></div></font></span></font>
</ul>
  </div><div>
 <span><strong>Pokémon-Life</strong></span>
<ul>
Bientôt disponible</ul> 
</div><div>
<span><strong>Staff</strong></span>
Bientôt disponible!!
</div><div>
<span><strong>Liens</strong></span>
Bientôt disponible!!
</div>
 <div>
    <span><strong>Partenaires</strong></span>
<ul>
Bientôt disponible</ul> 
</div><div>
    <span><strong>Infos</strong></span>
<ul>
Arrive bientôt!</ul> 
</div><div>   
<span><img src="http://j.static-locatetv.com/static/images/facebook/facebook_mini_icon.png
" /><strong> Page Facebook</strong></span>
<strong><span style="font-size: 18px; line-height: normal"><font color="green">Aimez-vous Facebook? Aimez-vous Pokémon-Life? Si vous avez répondu "Oui!" aux deux questions il y a une page Facebook de Pokémon-Life! Cliquez <font color="brown"><a href="https://www.facebook.com/pages/Pok%C3%A9mon-Life/351090364988795?ref=hl" class="postlink" target="_blank" rel="nofollow">ici</a> </font>pour la voir et n'oubliez pas de cliquer sur le bouton "J'aime"!</font></span></strong>
</div>
/* #tab-bloc = ce tableau d'onglet / .tabs = conteneur des onglets */
#tab-bloc .tabs {
  text-align: center;
  margin-bottom: 10px;
}
/* .tab = onglets */
#tab-bloc .tab {
  border-radius: 5px;
  border: none;
  margin: 0 20px;
  background: none;
}
/* .tab.selected = onglet sélectionné*/
#tab-bloc .tab.selected {
  background: #111;
  box-shadow: 0 0 5px #333;
  color: #eee;
  font-weight: bold;
}
/* .tab img = image dans les onglets */
#tab-bloc .tab img {
  vertical-align: -3px;
}
/* .contents = conteneur des contenu */
#tab-bloc .contents {
  border: 3px double #aaa;
  background: #eee;
  border-radius: 50px;
  padding: 25px;
}
/* #tab-staff = contenu associé à l'onglet staff */
#tab-staff {
  background: url(http://i.imgur.com/KlbuC.jpg);
  width: 791px;
  height: 607px;
  border: 1px dotted #ccc;
  margin: auto;
}
#tab-staff table {
  color: #444;
  background: url(http://i.imgur.com/GEdKG.png);
  margin: 100px auto;
  font-weight: 30px;
  opacity: 0.8;
  border: 2px solid #ccc;
  border-radius: 5px;
}
/* #tab-bienvenue = contenu associé à l'onglet bienvenue */
#tab-bienvenue {
  border-radius: 50px;
  border: 2px dashed #bbb;
  background: url(http://i.imgur.com/yAyJl.jpg);
  text-align: center;
  font-size: 20px;
  color: #333;
  text-shadow: 0 0 5px #fff;
}
/* #tab-bienvenue marquee = le marquee dans l'onglet bienvenue */
#tab-bienvenue marquee {
  width: 400px;
  text-align: center;
}
/* #tab-regles = contenu associé à l'onglet règles */
#tab-regles ul  {
  font-family: georgia, arial, serif;
  font-size: 17px;
  list-style: url(http://i.imgur.com/DMC6G.gif);
}
#tab-regles li {
  margin-bottom: 10px;
  color: green;
}
Il y a aucune erreur dans le code.
C'est juste que j'ai voulu tester un autre tableau et je ne l'aimais pas. J'avais copier mon code dans un bloc-note.Le code est juste en-haut!
Malheureusement,la feuille de style CSS supprime les balises HTML et ça ressemble a cela après avoir Valider
Code:
 
    /!\Important/!\
/!\Important/!\
J'ai enfin mis les légendaires de la 5G!!
Maintenant,veuillez-vous rendre dans votre profil et choisir un légendaire pour chaque génération!!
     
Bienvenue
 
Bienvenue {USER&amp;#8288;NAME}, amuses toi bien sur Pokémon Life .

 
 Pokémon-Life

Bientôt disponible 

Staff
Bientôt disponible!!

Liens
Bientôt disponible!!

 
    Partenaires

Bientôt disponible 

    Infos

Arrive bientôt! 
   
 Page Facebook
Aimez-vous Facebook? Aimez-vous Pokémon-Life? Si vous avez répondu "Oui!" aux deux questions il y a une page Facebook de Pokémon-Life! Cliquez ici pour la voir et n'oubliez pas de cliquer sur le bouton "J'aime"!

/* #tab-bloc = ce tableau d'onglet / .tabs = conteneur des onglets */
#tab-bloc .tabs {
  text-align: center;
  margin-bottom: 10px;
}
/* .tab = onglets */
#tab-bloc .tab {
  border-radius: 5px;
  border: none;
  margin: 0 20px;
  background: none;
}
/* .tab.selected = onglet sélectionné*/
#tab-bloc .tab.selected {
  background: #111;
  box-shadow: 0 0 5px #333;
  color: #eee;
  font-weight: bold;
}
/* .tab img = image dans les onglets */
#tab-bloc .tab img {
  vertical-align: -3px;
}
/* .contents = conteneur des contenu */
#tab-bloc .contents {
  border: 3px double #aaa;
  background: #eee;
  border-radius: 50px;
  padding: 25px;
}
/* #tab-staff = contenu associé à l'onglet staff */
#tab-staff {
  background: url(http://i.imgur.com/KlbuC.jpg);
  width: 791px;
  height: 607px;
  border: 1px dotted #ccc;
  margin: auto;
}
#tab-staff table {
  color: #444;
  background: url(http://i.imgur.com/GEdKG.png);
  margin: 100px auto;
  font-weight: 30px;
  opacity: 0.8;
  border: 2px solid #ccc;
  border-radius: 5px;
}
/* #tab-bienvenue = contenu associé à l'onglet bienvenue */
#tab-bienvenue {
  border-radius: 50px;
  border: 2px dashed #bbb;
  background: url(http://i.imgur.com/yAyJl.jpg);
  text-align: center;
  font-size: 20px;
  color: #333;
  text-shadow: 0 0 5px #fff;
}
/* #tab-bienvenue marquee = le marquee dans l'onglet bienvenue */
#tab-bienvenue marquee {
  width: 400px;
  text-align: center;
}
/* #tab-regles = contenu associé à l'onglet règles */
#tab-regles ul  {
  font-family: georgia, arial, serif;
  font-size: 17px;
  list-style: url(http://i.imgur.com/DMC6G.gif);
}
#tab-regles li {
  margin-bottom: 10px;
  color: green;
}


Dernière édition par Darkrai le Mar 18 Déc 2012 - 13:27, édité 1 fois
avatar

Darkrai
**

Messages : 75
Inscrit(e) le : 21/10/2012

http://pokemon-life.pokemonrpg.org/
Darkrai a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux a onglets

Message par Dr. Sam Mar 18 Déc 2012 - 4:01

Coucou Darkrai Very Happy!

IL faut mettre ce code CSS dans ta feuille de style CSS:
Code:
/* #tab-bloc = ce tableau d'onglet / .tabs = conteneur des onglets */
#tab-bloc .tabs {
  text-align: center;
  margin-bottom: 10px;
}
/* .tab = onglets */
#tab-bloc .tab {
  border-radius: 5px;
  border: none;
  margin: 0 20px;
  background: none;
}
/* .tab.selected = onglet sélectionné*/
#tab-bloc .tab.selected {
  background: #111;
  box-shadow: 0 0 5px #333;
  color: #eee;
  font-weight: bold;
}
/* .tab img = image dans les onglets */
#tab-bloc .tab img {
  vertical-align: -3px;
}
/* .contents = conteneur des contenu */
#tab-bloc .contents {
  border: 3px double #aaa;
  background: #eee;
  border-radius: 50px;
  padding: 25px;
}
/* #tab-staff = contenu associé à l'onglet staff */
#tab-staff {
  background: url(http://i.imgur.com/KlbuC.jpg);
  width: 791px;
  height: 607px;
  border: 1px dotted #ccc;
  margin: auto;
}
#tab-staff table {
  color: #444;
  background: url(http://i.imgur.com/GEdKG.png);
  margin: 100px auto;
  font-weight: 30px;
  opacity: 0.8;
  border: 2px solid #ccc;
  border-radius: 5px;
}
/* #tab-bienvenue = contenu associé à l'onglet bienvenue */
#tab-bienvenue {
  border-radius: 50px;
  border: 2px dashed #bbb;
  background: url(http://i.imgur.com/yAyJl.jpg);
  text-align: center;
  font-size: 20px;
  color: #333;
  text-shadow: 0 0 5px #fff;
}
/* #tab-bienvenue marquee = le marquee dans l'onglet bienvenue */
#tab-bienvenue marquee {
  width: 400px;
  text-align: center;
}
/* #tab-regles = contenu associé à l'onglet règles */
#tab-regles ul  {
  font-family: georgia, arial, serif;
  font-size: 17px;
  list-style: url(http://i.imgur.com/DMC6G.gif);
}
#tab-regles li {
  margin-bottom: 10px;
  color: green;
}

Maintenant, tu insère ce code là où tu veux ton tableau, mais tu n'insere en aucun cas ce code dans la feuille de style CSS de ton forum Wink
Code:
<div class="systab" id="tab-bloc"><div>
    <span><font color="red"><strong>/!\Important/!\</strong></font></span>
<font color="red">/!\Important/!\
J'ai enfin mis les légendaires de la 5G!!
Maintenant,veuillez-vous rendre dans votre profil et choisir un légendaire pour chaque génération!!</font>
  </div><div id="tab-bienvenue"> 
<span><strong>Bienvenue</strong></span>
  <ul>
<font face="Arial"><font color="#1c1717"><div style="margin:auto;text-align:center;width:100%"><span style="font-size: 20px; line-height: normal">Bienvenue <font color="#A39191">{USER&amp;#8288;NAME}</font></font><span style="font-size: 20px; line-height: normal"><font color="#1c1717"></font><font color="#1c1717">, amuses toi bien sur</font> <font color="#b32d2d">Pokémon Life <font color="#1c1717">.</font></span></div></font></span></font>
</ul>
  </div><div>
 <span><strong>Pokémon-Life</strong></span>
<ul>
Bientôt disponible</ul>
</div><div>
<span><strong>Staff</strong></span>
Bientôt disponible!!
</div><div>
<span><strong>Liens</strong></span>
Bientôt disponible!!
</div>
 <div>
    <span><strong>Partenaires</strong></span>
<ul>
Bientôt disponible</ul>
</div><div>
    <span><strong>Infos</strong></span>
<ul>
Arrive bientôt!</ul>
</div><div> 
<span><img src="http://j.static-locatetv.com/static/images/facebook/facebook_mini_icon.png
" /><strong> Page Facebook</strong></span>
<strong><span style="font-size: 18px; line-height: normal"><font color="green">Aimez-vous Facebook? Aimez-vous Pokémon-Life? Si vous avez répondu "Oui!" aux deux questions il y a une page Facebook de Pokémon-Life! Cliquez <font color="brown"><a href="https://www.facebook.com/pages/Pok%C3%A9mon-Life/351090364988795?ref=hl" class="postlink" target="_blank" rel="nofollow">ici</a> </font>pour la voir et n'oubliez pas de cliquer sur le bouton "J'aime"!</font></span></strong>
</div>

Cordialement,
Smile
Dr. Sam

Dr. Sam
*****

Masculin
Messages : 894
Inscrit(e) le : 28/06/2012

http://www.fa-aide.com/
Dr. Sam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux a onglets

Message par Darkrai Mar 18 Déc 2012 - 13:26

Merci Sujet Résolu
avatar

Darkrai
**

Messages : 75
Inscrit(e) le : 21/10/2012

http://pokemon-life.pokemonrpg.org/
Darkrai 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