Version complète: sur le forum Webmaster Hub : passant d'un tableau en structure avec div
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Ex-floodeur
mardi 29 mars 2005 à 20:59
Bonjour,

sur la homepage d'animecdz que je prépare, le design des tables va changer ( cf http://www.animecdz.com/css/index.php?cdz=1 )

le code d'un des tableaux est comme suit :

CODE
 <table width="586" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
 <td><img src="images/CityHunter-tableau_01.jpg" width="30" height="30"  alt=""></td>
 <td background="images/CityHunter-tableau_02.jpg" width="526" height="30">
 <div align="center"><font size="2" face="Geneva, Arial, Helvetica, sans-serif">
 <strong><font color="#FFFFFF">Dernières News</font></strong></font></div></td>
 <td><img src="images/CityHunter-tableau_03.jpg" width="30" height="30"  alt=""></td>
    </tr>
    <tr>
 <td background="images/CityHunter-tableau_04.jpg" width="30" height="243" ></td>
 <td width="526" height="243" valign="top" background="images/CityHunter-tableau_05.jpg"><div align="left">


Je sais qu'il n'est pas totalement aux normes W3C (HTML 4.01 transitionnal)

je souhaite afficher ce même tableau mais en structure avec des Div

J'ai commencé en faisant cela ( http://www.animecdz.com/css.php ) :

CODE
<style>
.float1 { float: left;margin:0;}
.float2 { vertical-align:top;width:526px;float: middle;background-image:url(http://www.animecdz.com/css/images/CityHunter-tableau_02.jpg);margin:0;}
.float3 { float: right;margin:0;}
.float4 { float: left;margin:0;}
.float5 { vertical-align:top;width:526px;float: middle;background-image:url(http://www.animecdz.com/css/images/CityHunter-tableau_05.jpg);margin:0;}
.float6 { float: right;margin:0;}
</style>
<br/><br/>

<div align="center">
<div class="newstable2" valign="top">
<div class="float1">
<img src="http://www.animecdz.com/css/images/CityHunter-tableau_01.jpg" width="30" height="30"  alt="">
</div>
<div class="float2">
<p>légende 2</p>
</div>
<div class="float3">
<img src="http://www.animecdz.com/css/images/CityHunter-tableau_03.jpg" width="30" height="30"  alt="">
</div>
</div>

<div class="newstable2" valign="top">
<div class="float1">
<img src="http://www.animecdz.com/css/images/CityHunter-tableau_04.jpg" width="30" height="30"  alt="">
</div>
<div class="float2">
<p><font color="#FFFFFF"><b>Pas De Myth Cloth En Grande Distribution Avant 2006</b></font>
<br><br>Ce n'est pas en 2005 que nous verrons des Myth Cloth en grandes surfaces.<br></p>
</div>
<div class="float3">
<img src="http://www.animecdz.com/css/images/CityHunter-tableau_06.jpg" width="30" height="30"  alt="">
</div>
</div>

</div>


mais ce n'est pas vraiment ressemblant.

Qu'ai-je fait comme erreur ?

En vous remerciant de votre aide.
Perrine
mardi 29 mars 2005 à 22:42
Bonsoir floodeur smile.gif

Quel est ton but ? En regardant ton code, on dirait que tu souhaites juste supprimer les <table> et éléments qui vont avec et favoriser l'utilisation de <div>. Je pense que se limiter à ces modifications est dommage.

Quitte à recomposer le code d'un nuke like, autant revoir le code et utiliser à fond les possibilités du HTML/CSS. Et pourquoi pas passer au XHTML ? tongue.gif

Ton nouveau code comprend encore des balises dépréciées (<font>) ou des éléments de mise en forme qui sont sensées se trouver dans ta feuille de syle (align="center").

Essaie de placer toutes les images dans tes blocs (div, hn, p) afin de ne faire ressortir que l'essentiel dans ton code HTML.
Par ex, pour ta page css.php, tu peux utiliser un code dans le style :

CODE
<div>
 <h2>légende 2</h2>
 <p>Pas De Myth Cloth En Grande Distribution Avant 2006 </p>
 <p>Ce n'est pas en 2005 que nous verrons des Myth Cloth en grandes surfaces.</p>
</div>


Ensuite, tu peux définir un bg général pour le div.
En partant de l'idée d'un code propre, sans balise superflue, on arrive à composer une mise en page à l'aide de bg, border, margin, etc ... bref, suffit de penser autrement et ne plus voir un design comme plein de petites images découpées et insérées dans un tableau. C'est un design, certes découpé, mais tu prends seulement quelques bouts, et tu composes le reste avec les couleurs de fond des boites, les bordures...

PS : j'aime beaucoup le design du site wink.gif
MarvinLeRouge
mercredi 30 mars 2005 à 08:20
Salut,

Conseil : n'essaie pas de "traduire" tes balises table. Regarde ta page et définis la structure qui apparaît sous tes yeux. A partir de à, ça devait être plus facile.

NB : Utilise un valideur. Tu aurais constaté que l'attribut valign n'existe pas. De plus, vertical-align n'est pas fait pour les div. Et tout mettre en float n'a généralement pas d'utilité : tu mets en float ce qui a un positionnement particulier; le reste se positionnera en fonction.
Boudha
mercredi 30 mars 2005 à 12:07
J'ai remarqué que tu jouais beaucoup sur les images de fond et même trop.

Je doute qu'en css tu puisses te permettre 5 images de fond, il va falloir que tu fasses de toutes tes images : une seul.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.