Poster un div layout via une table css

slemagnifique Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
 armand -
Bonjour,

je suis entrain de finir mon nouveau div pour myspace music ,j'ai réussi à poster le div via une table avec les attributs colspan cependant ne maitrisant pas encore cette technique j'ai du mal a intégrer mes 4 derniers éléments , je me casse la tete depuis des jours ! une âme charitable pourrais t-elle m aider SVP ?



myspace ou je fais les essai:https://myspace.com/worldcitizenproject
VOICI LE CODE (EN GRAS CE QUI NE VA PAS)

<style>

body{background-image:url("http://i353.photobucket.com/...");
</style>

<style>
table, td {
background-color:transparent;
border:none;
border-width:0;}
</style>

<style>
body{

background-position:top center;margin-top: 0;
scrollbar-arrow-color: 000000;
scrollbar-face-color: ffffff;
scrollbar-highlight-color: 000000;
scrollbar-3dlight-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-shadow-color: 000000;
scrollbar-track-color: 000000;}

div.topbanner {
top:40;
left: 50%;
margin-left: -545px;
width: auto;
height: auto;
position: absolute;
z-index:9;
}

</style>

<div class="topbanner">
<table id="Table_01" width="1085" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="http://i353.photobucket.com/..." width="1085" height="153" border="0" alt="" /></a></td>
</tr>



<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="69" border="0" alt="" /></a></td>

<td colspan="1"><img src="http://i353.photobucket.com/..." width="541" height="69" border="0" alt="" /></a></td>
</tr>

<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="424" border="0" alt="" /></a></td>


<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="424" border="0" alt="" /></a></td>

</tr>


<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="407" border="0" alt="" /></a></td>

<td colspan="1">
<img src="http://i353.photobucket.com/..." width="542" height="407" border="0" alt="" /></a></td>
</tr>



<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="253" height="42" border="0" alt="" />


<td colspan="1" rowspan="2"><img src="http://i353.photobucket.com/..." width="284" height="42" border="0" alt="" />

<img src="http://i353.photobucket.com/..." width="257" height="42" border="0" alt="" />


<img src="http://i353.photobucket.com/..." width="291" height="42" border="0" alt="" />

</a></td>




</a>
</tr>



<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="411" border="0" alt="" /></a></td>

<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="411" border="0" alt="" /></a></td>
</tr>


<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="544" border="0" alt="" /></a></td>


<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="544" border="0" alt="" /></a></td>
</tr>


<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="475" border="0" alt="" /></a></td>

<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="475" border="0" alt="" /></a></td>
</tr>




<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="638" border="0" alt="" /></a></td>



<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="638" border="0" alt="" /></a></td>

</tr>





<tr>
<td colspan="2">
<img src="http://i353.photobucket.com/..." width="1086" height="665" border="0" alt="" /></a></td>
</tr>



<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="129" border="0" alt="" /></a></td>

<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="129" border="0" alt="" /></a></td>
</tr>


<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="143" border="0" alt="" /></a></td>

<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="143" border="0" alt="" /></a></td>
</tr>



<tr>
<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="747" border="0" alt="" /></a></td>




<td colspan="1">
<img src="http://i353.photobucket.com/..." width="543" height="747" border="0" alt="" /></a></td>
</tr>









</table>

</div>


A voir également:

3 réponses

M@dien Messages postés 437 Date d'inscription   Statut Membre Dernière intervention   74
 
Bonjour,

Aïe aïe aïe...

Revoit le code en gras plus attentivement et tu t'apercevras que:
- Il manque une balise de fermeture </td>
- Une balise </a> se trouve entre un </td> et un </tr>

Par contre, sache que les tableaux sont normalement à proscrire dans ce genre d'utilisation. D'autant plus si tu veux un affichage précis.

Je te conseille de reprendre tout ton code en utilisant des div, de la manière suivante:

<div style="position:absolute; top:100px; left: 200px; width:200px; height:300px;">
   contenu du div
</div>

Ainsi tu n'utiliseras plus de tableau complexe à coder, et tu pourras placer les blocs indépendamment les uns des autres, et de manière très précise...
0
slemagnifique
 
merci je vais faire comme tu le dis.
0
armand
 
oubliez pas ke tous le css disparait la semaine prochaine!!! myspace 3.0 pour tous le monde les webdesigner von faire la grimace ey tous les musicien aie aie aie myspace a craké le sac la une page blanche pour tous le monde!!!
0