Fond coloré dans un tableau

3 participants

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

Résolu Fond coloré dans un tableau

Message par th3-P0taTo3s Mar 14 Sep 2010 - 21:40

Bonjour !

J'ai cherché partouuuuuuuuuut pour mettre un fond a mon tableau, mais je trouve nul part T-T

Voici mon code de tableau :

Code:
<title>Conception d'onglet</title>
  <script type="text/javascript" src="http://illiweb.com/fa/js_29/fr.js"></script>
  <style>
            /* Début de la feuille de style */ .onglet-content > div { display : none ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 20px ; margin-bottom : Xpx ; width : 700px ; } .onglet-content > div.active{ display : block ; } .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; } .onglet-table td { style : top ; vertical-align:middle ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 0px 10px ; opacity : 0.5 ; } .onglet-table td.active, .onglet-table td:hover { opacity : 1 ; } /* Fin de la feuille de style */ </style><center><script type="text/javascript"> /* Début du script */ jQuery(document).ready(function(){ jQuery(".onglet-table").find("td").click(function(){ /* Suppression des classe .active pour tout les onglets et contenus */ var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */ system.find(".onglet-table").find(".active").removeClass("active"); system.find(".onglet-content").find(".active").removeClass("active"); /* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */ var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */ jQuery(this).addClass("active"); system.find(".onglet-content").find("div[name='"+id+"']").addClass("active"); }); }); /*Fin du script */
</script>
<!-- Début du HTML --><div class="onglet">
 <table><tbody><tr><td>
  <table class="onglet-table">
        <tbody><tr><td name="1" class="active">Onglet 1</td>
        <td name="2">Onglet 2</td>
        <td name="3">Onglet 3</td>
        <td name="4">Onglet 4</td>
        <td name="5">Onglet 5</td>
  </tbody></table></td></tr><tr><td>
        <div class="onglet-content">
      <div name="1" class="active">                              <table><tbody><tr>

<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/Sans_titre_1pngmm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/DSCF8461_129.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=1?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Pseudo : Admin<br>
- 1°Admin<br>
- Lucie<br>
- Née le 28 mai 1998<br>
- Utilise photoshop<br>
- Enjoy ! ♥ :3
</div></span>
</div></td>

<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/lm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/momopngl.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=2?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Nas Tashiya' Oz<br>
- 2°Admin<br>
- Morgane<br>
- Née le 1 Décembre 1996<br>
- Utilise photofiltre<br>
</div></span>
</div></td>







 </td></tr></tbody></table>                                    </div>
      <div name="2">contenu de l'onglet 2</div>
      <div name="3">contenu de l'onglet 3</div>
      <div name="4">contenu de l'onglet 4</div>
      <div name="5">contenu de l'onglet 5</div>
 
  </div></td></tr></tbody></table>







Merci What a Face


Dernière édition par th3-P0taTo3s le Jeu 16 Sep 2010 - 9:20, édité 1 fois
th3-P0taTo3s

th3-P0taTo3s
***

Féminin
Messages : 142
Inscrit(e) le : 02/05/2010

http://Mini-dolls.chocoforum.com/
th3-P0taTo3s a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond coloré dans un tableau

Message par Anzu Mer 15 Sep 2010 - 19:41


Bonsoir,

Il suffit de mettre ceci:

Pour une image =>
Code:

<table background="lien de l'image">Contenu</table>

Pour une couleur =>

Code:
<table background="#code couleur">Contenu</table>

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.

Résolu Re: Fond coloré dans un tableau

Message par th3-P0taTo3s Mer 15 Sep 2010 - 19:58

Bah jveux bien mais je le mets ou ? xD

Merci de ton aide Smile
th3-P0taTo3s

th3-P0taTo3s
***

Féminin
Messages : 142
Inscrit(e) le : 02/05/2010

http://Mini-dolls.chocoforum.com/
th3-P0taTo3s a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond coloré dans un tableau

Message par Anzu Mer 15 Sep 2010 - 20:04


Vous cherchez la balise "table" et vous rajoutez ce que je vous ai donné entre les balises.

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.

Résolu Re: Fond coloré dans un tableau

Message par th3-P0taTo3s Mer 15 Sep 2010 - 20:22

ça me met un fond, en revanche ça foire tout le tableau...

http://littlesweet-graph.forumactif.com/forum.htm
th3-P0taTo3s

th3-P0taTo3s
***

Féminin
Messages : 142
Inscrit(e) le : 02/05/2010

http://Mini-dolls.chocoforum.com/
th3-P0taTo3s a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond coloré dans un tableau

Message par Scoubifitz Jeu 16 Sep 2010 - 1:37

th3-P0taTo3s a écrit:Bonjour !

J'ai cherché partouuuuuuuuuut pour mettre un fond a mon tableau, mais je trouve nul part T-T

Voici mon code de tableau :

Code:
<title>Conception d'onglet</title>
  <script type="text/javascript" src="http://illiweb.com/fa/js_29/fr.js"></script>
  <style>
            /* Début de la feuille de style */ .onglet-content > div { display : none ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 20px ; margin-bottom : Xpx ; width : 700px ; } .onglet-content > div.active{ display : block ; } .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; } .onglet-table td { style : top ; vertical-align:middle ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 0px 10px ; opacity : 0.5 ; } .onglet-table td.active, .onglet-table td:hover { opacity : 1 ; } /* Fin de la feuille de style */ </style><center><script type="text/javascript"> /* Début du script */ jQuery(document).ready(function(){ jQuery(".onglet-table").find("td").click(function(){ /* Suppression des classe .active pour tout les onglets et contenus */ var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */ system.find(".onglet-table").find(".active").removeClass("active"); system.find(".onglet-content").find(".active").removeClass("active"); /* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */ var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */ jQuery(this).addClass("active"); system.find(".onglet-content").find("div[name='"+id+"']").addClass("active"); }); }); /*Fin du script */
</script>
<!-- Début du HTML --><div class="onglet">
 <table><tbody><tr><td>
  <table class="onglet-table">
        <tbody><tr><td name="1" class="active">Onglet 1</td>
        <td name="2">Onglet 2</td>
        <td name="3">Onglet 3</td>
        <td name="4">Onglet 4</td>
        <td name="5">Onglet 5</td>
  </tbody></table></td></tr><tr><td>
        <div class="onglet-content">
      <div name="1" class="active">                              <table><tbody><tr>

<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/Sans_titre_1pngmm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/DSCF8461_129.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=1?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Pseudo : Admin<br>
- 1°Admin<br>
- Lucie<br>
- Née le 28 mai 1998<br>
- Utilise photoshop<br>
- Enjoy ! ♥ :3
</div></span>
</div></td>

<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/lm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/momopngl.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=2?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Nas Tashiya' Oz<br>
- 2°Admin<br>
- Morgane<br>
- Née le 1 Décembre 1996<br>
- Utilise photofiltre<br>
</div></span>
</div></td>







 </td></tr></tbody></table>                                    </div>
      <div name="2">contenu de l'onglet 2</div>
      <div name="3">contenu de l'onglet 3</div>
      <div name="4">contenu de l'onglet 4</div>
      <div name="5">contenu de l'onglet 5</div>
 
  </div></td></tr></tbody></table>

Merci What a Face

Bonsoir ,

Si vous voulez mettre du gris (#b9b9b9) uniquement dans le cadre contenant les avatars ,
voilà le code modifié ...

Code:
<title>Conception d'onglet</title>
  <script type="text/javascript" src="http://illiweb.com/fa/js_29/fr.js"></script>
  <style>
            /* Début de la feuille de style */ .onglet-content > div { background-color:#b9b9b9; display : none ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 20px ; margin-bottom : Xpx ; width : 700px ; } .onglet-content > div.active{ display : block ; } .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; } .onglet-table td { style : top ; vertical-align:middle ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 0px 10px ; opacity : 0.5 ; } .onglet-table td.active, .onglet-table td:hover { opacity : 1 ; } /* Fin de la feuille de style */ </style><center><script type="text/javascript"> /* Début du script */ jQuery(document).ready(function(){ jQuery(".onglet-table").find("td").click(function(){ /* Suppression des classe .active pour tout les onglets et contenus */ var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */ system.find(".onglet-table").find(".active").removeClass("active"); system.find(".onglet-content").find(".active").removeClass("active"); /* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */ var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */ jQuery(this).addClass("active"); system.find(".onglet-content").find("div[name='"+id+"']").addClass("active"); }); }); /*Fin du script */
</script>
<!-- Début du HTML --><div class="onglet">
 <table><tbody><tr><td>
  <table class="onglet-table">
        <tbody><tr><td name="1" class="active">Onglet 1</td>
        <td name="2">Onglet 2</td>
        <td name="3">Onglet 3</td>
        <td name="4">Onglet 4</td>
        <td name="5">Onglet 5</td>
  </tbody></table></td></tr><tr><td>
        <div class="onglet-content">
      <div name="1" class="active">                              <table><tbody><tr>

<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/Sans_titre_1pngmm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/DSCF8461_129.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=1?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Pseudo : Admin<br>
- 1°Admin<br>
- Lucie<br>
- Née le 28 mai 1998<br>
- Utilise photoshop<br>
- Enjoy ! ♥ :3
</div></span>
</div></td>

<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/lm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/momopngl.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=2?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Nas Tashiya' Oz<br>
- 2°Admin<br>
- Morgane<br>
- Née le 1 Décembre 1996<br>
- Utilise photofiltre<br>
</div></span>
</div></td>







 </td></tr></tbody></table>                                    </div>
      <div name="2">contenu de l'onglet 2</div>
      <div name="3">contenu de l'onglet 3</div>
      <div name="4">contenu de l'onglet 4</div>
      <div name="5">contenu de l'onglet 5</div>
 
  </div></td></tr></tbody></table>

Si vous voulez changer tout le tableau (#b9b9b9) et modifier le cadre (gris clair =#e9e9e9) :

Code:
<title>Conception d'onglet</title>
  <script type="text/javascript" src="http://illiweb.com/fa/js_29/fr.js"></script>
  <style>
            /* Début de la feuille de style */ .onglet { background-color:#b9b9b9; } .onglet-content > div { background-color:#e9e9e9; display : none ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 20px ; margin-bottom : Xpx ; width : 700px ; } .onglet-content > div.active{ display : block ; } .onglet-table { border-spacing : Xpx ; margin-left:auto ; margin-right :auto ; } .onglet-table td { style : top ; vertical-align:middle ; border : solid 2px ; border-radius : 5px 5px 5px 5px ; -moz-border-radius : 5px 5px 5px 5px ; -webkit-border-radius : 5px 5px 5px 5px ; padding : 0px 10px ; opacity : 0.5 ; } .onglet-table td.active, .onglet-table td:hover { opacity : 1 ; } /* Fin de la feuille de style */ </style><center><script type="text/javascript"> /* Début du script */ jQuery(document).ready(function(){ jQuery(".onglet-table").find("td").click(function(){ /* Suppression des classe .active pour tout les onglets et contenus */ var system = jQuery(this).closest(".onglet"); /* Sélection du système d'onglet */ system.find(".onglet-table").find(".active").removeClass("active"); system.find(".onglet-content").find(".active").removeClass("active"); /* Ajout de la classe active à l'onglet cliqué et au contenu corespondant */ var id = jQuery(this).attr("name"); /* Identification du numéro de l'onglet cliqué */ jQuery(this).addClass("active"); system.find(".onglet-content").find("div[name='"+id+"']").addClass("active"); }); }); /*Fin du script */
</script>
<!-- Début du HTML --><div class="onglet">
 <table><tbody><tr><td>
  <table class="onglet-table">
        <tbody><tr><td name="1" class="active">Onglet 1</td>
        <td name="2">Onglet 2</td>
        <td name="3">Onglet 3</td>
        <td name="4">Onglet 4</td>
        <td name="5">Onglet 5</td>
  </tbody></table></td></tr><tr><td>
        <div class="onglet-content">
      <div name="1" class="active">                              <table><tbody><tr>

<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/Sans_titre_1pngmm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/DSCF8461_129.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=1?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Pseudo : Admin<br>
- 1°Admin<br>
- Lucie<br>
- Née le 28 mai 1998<br>
- Utilise photoshop<br>
- Enjoy ! ♥ :3
</div></span>
</div></td>

<td><div class="thumbnail">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/lm.png">
<span><div class="tstaff" align="center">
<img src="http://sd-2.archive-host.com/membres/images/159811946144739399/momopngl.png"><br>
<a href="http://mini-dolls.chocoforum.com/msg.forum?mode=post&u=2?sid=69d260298c285a7ef0f3f5bbcf46345d" class="postlink"> Envoyer un MP</a><br>
<br>
- Nas Tashiya' Oz<br>
- 2°Admin<br>
- Morgane<br>
- Née le 1 Décembre 1996<br>
- Utilise photofiltre<br>
</div></span>
</div></td>







 </td></tr></tbody></table>                                    </div>
      <div name="2">contenu de l'onglet 2</div>
      <div name="3">contenu de l'onglet 3</div>
      <div name="4">contenu de l'onglet 4</div>
      <div name="5">contenu de l'onglet 5</div>
 
  </div></td></tr></tbody></table>
Les modifications ont été faites dans la feuille de style ,
Bonne suite à votre projet ,
Scoubifitz
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond coloré dans un tableau

Message par th3-P0taTo3s Jeu 16 Sep 2010 - 9:19

Ha ça marche !


Merci beaucoup Sourire2
th3-P0taTo3s

th3-P0taTo3s
***

Féminin
Messages : 142
Inscrit(e) le : 02/05/2010

http://Mini-dolls.chocoforum.com/
th3-P0taTo3s 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