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

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

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

Message par nero777kira le Mer 12 Mar 2014 - 18:28

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 )


Dernière édition par nero777kira le Jeu 13 Mar 2014 - 11:14, édité 1 fois

nero777kira
**

Messages : 74
Inscrit(e) le : 08/09/2012

http://test-paradise.forumgratuit.fr
nero777kira a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau HTML pour la page d'accueil

Message par Scoubifitz le Mer 12 Mar 2014 - 22:51

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>

Scoubifitz
+ Hyperactif +

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

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

Résolu Re: Problème avec un tableau HTML pour la page d'accueil

Message par nero777kira le Jeu 13 Mar 2014 - 8:42

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ù

nero777kira
**

Messages : 74
Inscrit(e) le : 08/09/2012

http://test-paradise.forumgratuit.fr
nero777kira a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec un tableau HTML pour la page d'accueil

Message par Scoubifitz le Jeu 13 Mar 2014 - 10:10

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

Scoubifitz
+ Hyperactif +

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

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

Résolu Re: Problème avec un tableau HTML pour la page d'accueil

Message par nero777kira le Jeu 13 Mar 2014 - 11:14

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

nero777kira
**

Messages : 74
Inscrit(e) le : 08/09/2012

http://test-paradise.forumgratuit.fr
nero777kira 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