Tableau page d'acceuil décalé

[Satsu Black]

Bonjour!
Je me suis mise, suite a de bon conseil, a créer mon propre tableau en page d’accueil.
Je l'ai installer mais le tableau de droite ne semble pas vouloir être a la meme hauteur que celui de gauche, il est plus en bas et je trouve cela très peu esthétique
quelqun a une astuce?

aperçu du probleme :


Mon code

Spoiler:

merci de votre aide!

[Invité]

Bonjour,

Votre code contient 3 tableaux, c'est donc normal que ce ne soit pas bien positionné. 1 seul tableau avec 3 cellules dimmensionnées remet tout cela en ligne:

Code:

 <div id="mes_onglets">
                <ul><li id="o_1"class="mon_onglet_selected"onclick="changeOnglet(this);">Acceuil</li>
                        <li
id="o_2" class="mon_onglet"onclick="changeOnglet(this);">Contexte</li>
                        <li id="o_3"class="mon_onglet"onclick="changeOnglet(this);">Actuellement</li>
                        <li
id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Staff & Partenaires</li>
 
 
                        <div class="clear"><div id="mes_contenus">
        <div id="co_1"  class="mon_contenu" align="left">
 
     
Ceci est un paragraphe avant le tableau.<br />
 
 
 <table align="left" width="100%">
        <tr>
<td style="text-align: center;
background-image:url('http://img4.hostingpics.net/pics/448657SanstitreCopieCopie.png');
border-bottom:2px dotted #A56DA6;
                border-top: 2px dotted #A56DA6;
                -moz-border-radius-topright: 15px ;
                -moz-border-radius-topleft: 0px;
                -moz-border-radius-bottomleft: 15px ;
                -moz-border-radius-bottomright: 0px;
                width:100px;
                height:20px;
                font-size: 13px;
                font-family: Times New roman;
                width:33%;">
 
      Liens Utiles
 
      </td>
 
<td rowspan="2" width="34%">
 
Titre
 
</td>
<td style="text-align: center;
background-image:url('http://img4.hostingpics.net/pics/448657SanstitreCopieCopie.png');
border-bottom:2px dotted #A56DA6;
                border-top: 2px dotted #A56DA6;
                -moz-border-radius-topright: 15px ;
                -moz-border-radius-topleft: 0px;
                -moz-border-radius-bottomleft: 15px ;
                -moz-border-radius-bottomright: 0px;
                width:100px;
                height:20px;
                font-size: 13px;
                font-family: Times New roman;
                width:33%;">
 
Playlist
 
</td></tr>
        <tr><td>
Contenue
        </td>        <td>
Contenue
        </td></tr>
        </table>
 </div>
 
 
 
                    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
                    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
                    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
                </div></div></ul></div>
 

Cordialement.

[Satsu Black]

Merci! je pensait que si je mettais un tableau a 3 cellule je serait obliger d'avoir un encadrer au milieu mais comme je suis partie avec une base neutre, sa a été plus facile ^^
j'aimerai aussi savoir comment faire pour en arriver a se résultat la :

Aperçu:


j'ai essayer de plus espacer les boutons entre eux mais javais peur de faire quelques chose qui fallait pas en bidouillant trop, et j'ai beau mettre <tablea align="left">
le tableau ne veut pas se positionner a l’extrême gauche! ><

merci de votre aide et vos conseille

[Invité]

Bonjour,

Essayez comme ceci:

Code:

<div id="mes_onglets">
    <ul><li id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Onglet 1</li>
        <li id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Onglet 2</li>
        <li id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Onglet 3</li>
        <li id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Onglet 4</li></ul><div class="clear"><div id="mes_contenus">
    <div id="co_1" class="mon_contenu">
Paragraphe<br />
 <table width="100%">
        <tr>
<td style="text-align: center;
background-image:url('http://img4.hostingpics.net/pics/448657SanstitreCopieCopie.png');
border-bottom:2px dotted #A56DA6;
                border-top: 2px dotted #A56DA6;
                -moz-border-radius-topright: 15px ;
                -moz-border-radius-topleft: 0px;
                -moz-border-radius-bottomleft: 15px ;
                -moz-border-radius-bottomright: 0px;
                width:100px;
                height:20px;
                font-size: 13px;
                font-family: Times New roman;
                width:33%;">
 
      Liens Utiles
 
      </td>
 
<td rowspan="2" width="34%">
 
Titre
 
</td>
<td style="text-align: center;
background-image:url('http://img4.hostingpics.net/pics/448657SanstitreCopieCopie.png');
border-bottom:2px dotted #A56DA6;
                border-top: 2px dotted #A56DA6;
                -moz-border-radius-topright: 15px ;
                -moz-border-radius-topleft: 0px;
                -moz-border-radius-bottomleft: 15px ;
                -moz-border-radius-bottomright: 0px;
                width:100px;
                height:20px;
                font-size: 13px;
                font-family: Times New roman;
                width:33%;">
 
Playlist
 
</td></tr>
        <tr><td>
Contenue
        </td>        <td>
Contenue
        </td></tr>
        </table></div>
    <div id="co_2" class="mon_contenu" style="display: none;">Mon contenu 2</div>
    <div id="co_3" class="mon_contenu" style="display: none;">Mon contenu 3</div>
    <div id="co_4" class="mon_contenu" style="display: none;">Mon contenu 4</div>
</div></div></div>

J'ai déplacé la balise </ul> à la fin des onglets et de ce fait les contenu d'ajuste au bord de la page et non avec les onglets. Dans la CSS il faudra surement ajuster les padding pour améliorer le résultat.

Cordialement.

[Satsu Black]

Merci!
problème résolut, merci de votre patience ^^