Problème avec un tableau HTML pour la page d'accueil

[nero777kira]

Bonjour // bonsoir !

J'ai passé l'aprem sur le problème sans rien trouvé et là ... j'en peux plus twt , mon tableau ne respecte pas les mesures que je lui donne ni les scrollbarre automatique... Je ne peux pas faire mieux en explication alors je vais vous montrer, ça ira plus vite ...

Je veux ça:

Sauf que j'obtiens ça:

Voici mon code :

Code:

<div style="background: url('http://i60.tinypic.com/2912a01.png'); width: 850px; height: 516px; text-align: justify;">
   
   <table style="width=850px; height=108px; cellpading=0px; cellspacing=0px">
      
      <tbody>
         
         <tr>
            
            <td style="width: 234px;" ;height="98px; align=left">
                <a href="http://burst-of-star.forumactif.org/t1-reglement" class="postlink"><img src="http://i62.tinypic.com/2ykkkdd.jpg" border="0" alt="" /></a>
            </td>
            
            <td style="width: 209px;" ;height="98px; align=left">
                <a href="http://burst-of-star.forumactif.org/f11-other-guys" class="postlink"><img src="http://i57.tinypic.com/ab5t8w.png" border="0" alt="" /></a>
            </td>
            
            <td style="width: 200px;" ;height="98px; align=left">
                <a href="http://burst-of-star.forumactif.org/t2-ava-theque#2" class="postlink"><img src="http://i57.tinypic.com/2nimy3d.png" border="0" alt="" /></a>
            </td>
            
            <td style="width: 207px;" ;height="98px">
                <a href="http://burst-of-star.forumactif.org/t4-demande-de-partenariat" class="postlink"><img src="http://i60.tinypic.com/wtjdr4.png" border="0" alt="" /></a>
            </td>
            
         </tr>
         
         <tr>
            
            <td colspan="4" align="right" style="width=850px; height=10px;">
                top sites
            </td>
            
         </tr>
         
      </tbody>
      
   </table>
   
   <table cellpading="0px" cellspacing="4px" style="width: 850px; height: 315px" ;border="1px">
      
      <tbody>
         
         <tr>
            
            <td background="http://i61.tinypic.com/acvd02.png" style="width: 284px; height=182px">
                <img align="left" src="http://i58.tinypic.com/1z4h7qu.png" />
               <div style="height:180px;overflow:auto;">
                   écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici
               </div>
               
            </td>
            
            <td style="width: 284px; height=150px" valign="top">
               
               <div align="center">
                   <iframe style="width: 284px; height: 150px;" allowfullscreen="" frameborder="0" src="http://www.youtube.com/embed/WgjgACnHuWQ"></iframe>
               </div>
               
            </td>
            
            <td rowspan="2" "="" style="width: 265px; height=271px">
                <img alt="" border="0" src="http://i60.tinypic.com/1t24nk.jpg" />
            </td>
            
         </tr>
         
         <tr>
            
            <td style="width: 284px; height=85px">
               
               <div align="center">
                   <img alt="" border="0" src="http://i59.tinypic.com/33lzbzl.jpg" /><img alt="" border="0" src="http://i57.tinypic.com/1o1sf8.jpg" />
               </div>
               
            </td>
            
            <td style="width: 284px; height=117px" bgcolor="#D0CBBF">
               
               <div class="F2">
                   news
               </div>
               
               <div style="height:117px;overflow:auto;" align="justify">
                   <span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span> Tagada tagada tagada tagada<br /><span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span> Tagada tagada tagada tagada<br /><span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span> Tagada tagada tagada tagada<br />
               </div>
               
            </td>
            
         </tr>
         
         <tr>
            
            <td colspan="3" style="width: 850px; height=39px">
               
               <div style="height:40px;overflow:auto;">
                  
                  <div class="principal img">
                     
                     <div class="cssactif_tableaupartenaire">
                         <a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a>
                     </div>
                     
                  </div>
                  
               </div>
               
            </td>
            
         </tr>
         
      </tbody>
      
   </table>
</div>

Un grand merci à celui ou celle (ou ceux) XD qui m'aidera ! J'en peux vraiment plus...

(ps: je ne veux  pas les bordure de la première image hein, elles sont juste là pour bien montré les cellules )

[Scoubifitz]

bonsoir,

j'ai pas mieux ...

Code:

<div style="background: url('http://i60.tinypic.com/2912a01.png'); width:850px; ">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<a href="http://burst-of-star.forumactif.org/t1-reglement" class="postlink"><img src="http://i62.tinypic.com/2ykkkdd.jpg" border="0" alt="" /></a>
</td>
<td>
<a href="http://burst-of-star.forumactif.org/f11-other-guys" class="postlink"><img src="http://i57.tinypic.com/ab5t8w.png" border="0" alt="" /></a>
</td>
<td>
<a href="http://burst-of-star.forumactif.org/t2-ava-theque#2" class="postlink"><img src="http://i57.tinypic.com/2nimy3d.png" border="0" alt="" /></a>
</td>
<td>
<a href="http://burst-of-star.forumactif.org/t4-demande-de-partenariat" class="postlink"><img src="http://i60.tinypic.com/wtjdr4.png" border="0" alt="" /></a>
</td>
</tr>
<tr>
<td colspan="4" align="right">
top sites
</td>
</tr>
</table>
<table cellpadding="4" cellspacing="0" border="0">
<tr>
<td background="http://i61.tinypic.com/acvd02.png" style="width:284px;" valign="top">
<img style="float:left" src="http://i58.tinypic.com/1z4h7qu.png" />
<div style="height:180px;overflow:auto; text-align: justify;padding:0 10px;">
écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici</div>
</td>
<td>
<iframe style="width: 280px; height: 175px;" allowfullscreen="" frameborder="0" src="http://www.youtube.com/embed/WgjgACnHuWQ"></iframe>
</td>
<td rowspan="2">
<img alt="" border="0" src="http://i60.tinypic.com/1t24nk.jpg" />
</td>
</tr>
<tr>
<td align="center">
<img alt="" src="http://i59.tinypic.com/33lzbzl.jpg" />
<img alt="" src="http://i57.tinypic.com/1o1sf8.jpg" />
</td>
<td valign="top">
<div style="height:85px;overflow:auto; text-align: justify;background:#D0CBBF;padding:0 10px;"><div class="F2">news</div>
<span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span> Tagada tagada tagada tagada<br />
<span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span> Tagada tagada tagada tagada<br />
<span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span> Tagada tagada tagada tagada<br />
</div>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<div style="height:40px;overflow:auto;">
<div class="principal img">
<div class="cssactif_tableaupartenaire">
<a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>

[nero777kira]

c'est déjà plus joli que moi alors un grand merciiii !


EDIT: si jamais quelqu"un a mieux, proposez hein ! je mettrais le sujet en résolu ce soir au cas où

[Scoubifitz]

j'ai plus simple , en mettant tout dans 3 cellules , au lieu de 6 ...

vous obtiendrez plus facilement l'effet décalé :

Code:

<div style="background: url('http://i60.tinypic.com/2912a01.png'); width:850px;height: 516px; ">
<a href="http://burst-of-star.forumactif.org/t1-reglement" class="postlink"><img src="http://i62.tinypic.com/2ykkkdd.jpg" border="0" alt="" /></a>
<a href="http://burst-of-star.forumactif.org/f11-other-guys" class="postlink"><img src="http://i57.tinypic.com/ab5t8w.png" border="0" alt="" /></a>
<a href="http://burst-of-star.forumactif.org/t2-ava-theque#2" class="postlink"><img src="http://i57.tinypic.com/2nimy3d.png" border="0" alt="" /></a>
<a href="http://burst-of-star.forumactif.org/t4-demande-de-partenariat" class="postlink"><img src="http://i60.tinypic.com/wtjdr4.png" border="0" alt="" /></a>
<div style="text-align:right;padding-right:4px">
top sites
</div>
<table cellpadding="4" cellspacing="0" border="0">
<tr>
<td style="width:284px;">
<img style="float:left" src="http://i58.tinypic.com/1z4h7qu.png" />
<div style="background:url(http://i61.tinypic.com/acvd02.png);height:180px;overflow:auto; text-align: justify;padding:0 10px;margin-bottom:6px">
écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici écrire ici</div>
<div align="center">
<img alt="" src="http://i59.tinypic.com/33lzbzl.jpg" />
<img alt="" src="http://i57.tinypic.com/1o1sf8.jpg" />
</div>
</td>
<td valign="top">
<iframe style="width: 280px; height: 150px;" allowfullscreen="" frameborder="0" src="http://www.youtube.com/embed/WgjgACnHuWQ"></iframe>
<div style="height:113px;overflow:auto; text-align: justify;background:#D0CBBF;padding:0 10px;margin-top:4px"><div class="F2">news</div>
<span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span> Tagada tagada tagada tagada<br />
<span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span> Tagada tagada tagada tagada<br />
<span style="color: rgb(50, 63, 95);"><strong><span style="font-size: 13px; line-height: normal">†</span></strong></span> Tagada tagada tagada tagada<br />
</div>
</td>
<td valign="top">
<img alt="" border="0" src="http://i60.tinypic.com/1t24nk.jpg" />
</td>
</tr>
</table>
<div class="principal img">
<div class="cssactif_tableaupartenaire" style="text-align:center">
<a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a><a class="postlink" target="_blank" href="http://be-mine.forumactif.org/"><img src="http://i40.tinypic.com/255hoyh.png" /></a>
</div>
</div>
</div>

les 4 premières images n'ont pas besoin d'être dans un tableau ,

une div alignée à droite suffit pour le "top sites"

un tableau à 3 colonnes ,:
- image "contexte" flottant à gauche , div scrollée et 2 images en-dessous
- vidéo et div scrollée "news"
- grande image

div "partenaire" centrée (hors du tableau)

voilà ...

[nero777kira]

parfait =) encore une fois merci !!! Merci beaucoup !