Problème de tableaux

[Ilsé]

Bonjour,

Pour une fiche de présentation, je bloque un peu (pour pas changer). Je dois faire des tableaux dans des tableaux, mais je ne parviens pas à en faire ce que je veux.
Voici en images pour que ce soit plus simple à comprendre ( j'ai tendance à m'exprimer de façon peu compréhensible >< )


Ce que ça donne :






Ce que j'aimerai ( juste avec des exemples, pas trop le courage de faire une capture du tout °° )





( pour les desendance, il pourrait y avoir des rajouts d'infobulle, et dans ce cas les rajouts devront se trouver en dessous de ceux déjà présents. Des lignes de 2 en bref )


Mes codes :



Code:

[table][tr][td style="background-color: #ffffff"]<div class="titre">Nom du Cheval</div>

[center][img]http://i33.servimg.com/u/f33/09/03/76/30/taille10.png[/img][/center]


<div class="titre2">Une crinière et quatre sabots ...</div>
<div class="titre3">Fiche d'identité</div>

[list][table border="0"][tr][td][color=black]
[table][tr][td style="background-color: #000000" span class="arrondi"][b]Nom Complet :[/b] Poirouche du Camembert Pourri
[b]Âge :[/b] 145 ans
[b]Race :[/b] Poire Belge
[b]Taille :[/b] 7 cm
[b]Robe :[/b] Verte à pois mauves
[b]Marques :[/b] Poukita

[b]Propriétaire Actuel :[/b] Mika
[b]Ancien(s) Propriétaire(s) :[/b] Jake Shears, Johnny Depp.[/td][/tr][/table]
[/color][/td][td][list]
[color=black][font=Georgia]
[table][tr][td style="background-color: #000000" span class="arrondi"][b]Caractère :[/b] Caractère de merde, super agressive. Une poire sauvage qui sauter sur tout ce qui bouge et qui aime le fromage de pieds. Un air sanguinaire et puis POUF ça fait des poires en chocolat. Et alors là, bon appétit bien sûr ![/td][/tr][/table]
[/list]
[/font][/color][/td][/tr][/table][/list]

<div class="titre2">Un Dieu se doit d'être doué en tout *PAN*</div>
<div class="titre3">Les points de l'animal</div>

[list][table border="0"][tr][td][color=black]
[table][tr][td style="background-color: #000000" span class="arrondi"][b]Saut d'Obstacles :[/b]
[b]Dressage :[/b]
[b]Cross :[/b]
[b]Jeux :[/b]
[b]TREC :[/b]
[b]Voltige :[/b]
[b]Course :[/b]
[b]Endurance :[/b]
[b]Attelage :[/b]
[/td][/tr][/table]
[/color][/td][td][list]
[color=black][font=Georgia]
[table][tr][td style="background-color: #000000" span class="arrondi"][b]Points forts :[/b]
[b]Points faibles :[/b]
[b]Autre :[/b][/td][/tr][/table]
[img][/img]
[/list]
[/font][/color][/td][/tr][/table][/list]


<div class="titre2">Un Champion se doit d'être en pleine forme</div>
<div class="titre3">Carnet de santé</div>
[list][table border="0"][tr][td][color=black]
[table][tr][td style="background-color: #000000" span class="arrondi"][b]Vitalité :[/b] 60%
[b]Confiance :[/b] 0%
[b]Santé :[/b] 80%
[b]Usure des sabots :[/b]  0%
[/td][/tr][/table]
[/color][/td][td][list]
[color=black][font=Georgia]
[table][tr][td style="background-color: #000000" span class="arrondi"][b]Vaccins :[/b] A jour
[b]Vermifuges :[/b] A jour
[b]Dernière visite vétérinaire :[/b]
[b]Dernière visite maréchal-ferrant :[/b]
[b]État de santé :[/b] Bon
[b]Autre :[/b][/td][/tr][/table]
[/list]
[/font][/color][/td][/tr][/table][/list]

<div class="titre2">Parce que la famille, c'est sacré !</div>
<div class="titre3">Ascendance et descendance</div>
[list][table border="0"][tr][td][color=black]
[table][tr][td style="background-color: #000000" span class="arrondi"][b]Ascendance :[/b]
  <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png">
          <span>
            <center>
<img src="URL IMAGE">

<b>NOM DU CHEVAL </b>

 BLABLA</center>

          </span>
        </a>  <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png">
          <span>
            <center>
<img src="URL IMAGE">

<b>NOM DU CHEVAL </b>

 BLABLA</center>

          </span>
        </a>
[/td][/tr][/table]
[/color][/td][td][list]
[color=black][font=Georgia]
[table][tr][td style="background-color: #000000" span class="arrondi"][b]Fertilité :[/b]
[b]Nombre de saillies :[/b]
[b]Descendance :[/b]
  <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png">
          <span>
            <center>
<img src="URL IMAGE">

<b>NOM DU CHEVAL </b>

 BLABLA</center>

          </span>
        </a>  <a id="info_bulle" class="info_bulle" href="UNE URL SI IL FAUT"><img src="http://i33.servimg.com/u/f33/09/03/76/30/taille11.png">
          <span>
            <center>
<img src="URL IMAGE">

<b>NOM DU CHEVAL </b>

 BLABLA</center>

          </span>
        </a>[/td][/tr][/table]
[/list][/font][/color][/td][/tr][/table][/list]

<div class="titre2">Le deuxième est le premier des perdants ...</div>
<div class="titre3">Compétition et palmarès</div>
[list][table border="0"][tr][td][color=black]
[table][tr][td style="background-color: #000000" span class="arrondi"][b]Numéro de Compétition :[/b]
[b]Nombre de participation :[/b]
[/td][/tr][/table]
[/color][/td][td][list]
[color=black][font=Georgia]
[table][tr][td style="background-color: #000000" span class="arrondi"][b]Première place :[/b]
[b]Deuxième place :[/b]
[b]Troisième place :[/b]
[/td][/tr][/table]
[/list]
[/font][/color][/td][/tr][/table][/list]
[/td][/tr][/table]




Code:

/* INFOBUL */





p
{
  font-size      : 1.1em; /* Définition de la taille de la police de nos paragraphes */
}

/* Rend invisible tout notre bloc span */
a.info_bulle span
{                       
    position      :  absolute;
z-index: 999;
    top            :  -2000em;
    left          :  -2000em;
    width          :  1px;
    height        :  1px;
    overflow      :  hidden;
    background    :  #ffffff;  /* Définition du fond, sinon on a le même que notre lien */
    border        :  background-color: #D9D1B2;
-moz-border-radius: 5px 5px 14px 14px ;
border-bottom: 6px #060361 solid;
border-top: 2px #060361 dotted;
border-right: 2px #060361 dotted;
border-left: 2px #060361 dotted; /* Définition des bordures */
}

a.info_bulle
{           
  color          : #2F368A;
 
  text-decoration : none;
 
  padding        : 2px 16px 2px 2px; /*Définition des marges intérieures de notre lien */
 
  /* Définition de l'arrière plan de notre lien */
  background      : transparent url('comment.gif') no-repeat right center;
 
  position        : relative; /* Indispensable pour le bon positionnement de l'info-bulle */
}
 
a.info_bulle:hover
{
  border          : 0;  /* ligne qui corrige le bug d'IE6 et inférieur */
}

/* Rend visible tout notre bloc span et lui attribue une taille */
a.info_bulle:hover span, a.info_bulle:focus span, a.info_bulle:active span
{
    top        :  auto;
    left      :  auto;
    width      :  auto;
    height    :  auto;
    overflow  :  visible;
}           



/* Pour les Titres */

.titre {
font-family: arial, serif; /* Police du Titre. Il faut laisser Serif à la fin, le reste, comme tu veux */
font-size: 200%; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
text-transform: uppercase; /* Titre en majuscule */
background-color: #000000;
border: 10px solid #000000;
color: #ffffff; /* Couleur de la police */
text-align: center;
font-weight:bold; /* Texte en gras */
border-left: 2px solid #000000;
border-right: 2px solid #000000;
}

/* Pour les Titres 2 */

.titre2 {
font-family: arial, serif; /* Police du Titre. Il faut laisser Serif à la fin, le reste, comme tu veux */
font-size: 150%; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
color: #000000; /* Couleur de la police */
text-align: justify; /* Alignement du texte */
padding-left: 20px; /* Distance entre la marge du profil et ton message ( bref, option "list" quoi ... ) */
font-weight:bold; /* Texte en gras */
}

/* Pour les Titres 3 */

.titre3 {
font-family: arial, serif; /* Police du Titre. Il faut laisser Serif à la fin, le reste, comme tu veux */
font-size: 130%; /* Détermine la taille de la police. 100% est la taille normale, 110% est donc un peu plus grand */
color: #000000; /* Couleur de la police */
text-align: left;
padding-left: 35px;
}



/* Arrondis */

.arrondi {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
color: #ffffff; /* Couleur de la police */
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}



Un grand merci à ceux qui aideront la novice que je suis ^^
( j'espère que ce que j'essaye de faire est compréhensible, j'ai l'impression d'avoir fait beaucoup de charabia >< )


Le forum où se trouve le forumulaire :

http://ranch-nom.forum-actif.net

[Ilsé]

up ?

[Forami]

Faire des tableaux c tres simple en utilisant vos éditeurs du forum
Surtout les éditeurs des fameuses pages html

[Ilsé]

Pourriez-vous me donner plus de détails je vous prie ? J'ignore comment faire avec les éditeurs de pages html ... =/

[Ilsé]

Up ?

[Ilsé]

Up ?

[Gazetto.Celestia]

Si tu ne donnes pas de taille en px à tes tableaux, c'est normal qu'ils se définissent selon leur contenu. Je te conseille de faire des div, ça facilite grandement la vie. Par exemple

Code:

.cadregauche1{
  background: #000000;
  -moz-border-radius: 8px;8px;8px;8px;
  width: 92px;
  height:120px; }

.cadredroite1{
  background: #000000;
  -moz-border-radius: 8px;8px;8px;8px;
  width: 130px;
  height:120px; }

Se qui donne en html, tout simplement ceci :

Code:

<table><tr><td><div class="cadregauche1">Mes informations dedans et mes images</div></td><td><div class="cadredroite1">Mes  icons et infos</td></tr></table>

[Ilsé]

Merci beaucoup de l'information

C'est nickel comme ça ( et je retiens pour la prochaine fois xD ) ^^

Problème résolus !

[Gazetto.Celestia]

De rien, ravie d'avoir pu vous aider ^^