Tableau page d'acceuil décalé

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

Résolu Tableau page d'acceuil décalé

Message par Satsu Black le Jeu 25 Aoû 2011 - 15:21

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 Sad
quelqun a une astuce?

aperçu du probleme :


Mon code
Spoiler:

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">

     
<p>Ceci est un paragraphe avant le tableau.</p>


 <table align="left">
        <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;">

      Liens Utiles

      </td></tr>
        <tr><td>
Contenue
        </td></tr>
        </table>



<table align="center">
        <tr><td>

Titre

</td></tr>
        </table>



<table align="right">
        <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;">

Playlist

      </td></tr>
        <tr><td>
Contenue
        </td></tr>
        </table>




                    <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>


merci de votre aide! Very Happy






Dernière édition par Satsu Black le Sam 27 Aoû 2011 - 15:49, édité 1 fois

Satsu Black
***

Messages : 160
Inscrit(e) le : 04/12/2010

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau page d'acceuil décalé

Message par Invité le Ven 26 Aoû 2011 - 10:09

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.

Invité
Invité


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

Résolu Re: Tableau page d'acceuil décalé

Message par Satsu Black le Ven 26 Aoû 2011 - 10:36

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 Very Happy

Satsu Black
***

Messages : 160
Inscrit(e) le : 04/12/2010

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau page d'acceuil décalé

Message par Invité le Sam 27 Aoû 2011 - 15:27

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.

Invité
Invité


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

Résolu Re: Tableau page d'acceuil décalé

Message par Satsu Black le Sam 27 Aoû 2011 - 15:49

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

Satsu Black
***

Messages : 160
Inscrit(e) le : 04/12/2010

http://become-a-master.forumdefan.com
Satsu Black a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum