Poster un div layout via une table css
slemagnifique
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
armand -
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>
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:
- Poster un div layout via une table css
- Table ascii - Guide
- Table des matières word - Guide
- Microsoft keyboard layout creator - Télécharger - Bureautique
- Comment poster une vidéo sur tiktok - Guide
- Table des caractères - Guide
3 réponses
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:
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...
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...