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

2 participants

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 Mer 12 Mar - 17: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 - 10:14, édité 1 fois
avatar

nero777kira
**

Messages : 80
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 Mer 12 Mar - 21: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

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Jeu 13 Mar - 7: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ù
avatar

nero777kira
**

Messages : 80
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 Jeu 13 Mar - 9: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

Scoubifitz
Membre actif

Masculin
Messages : 3687
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 Jeu 13 Mar - 10:14

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

nero777kira
**

Messages : 80
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

- Sujets similaires

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