passant d'un tableau en structure avec div

passant d'un tableau en structure avec div - HTML/CSS - Programmation

Marsh Posté le 29-03-2005 à 22:11:08    

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 :
  1. <table width="586" border="0" align="center" cellpadding="0" cellspacing="0">
  2. <tr>
  3.   <td><img src="images/CityHunter-tableau_01.jpg" width="30" height="30"  alt=""></td>
  4.   <td background="images/CityHunter-tableau_02.jpg" width="526" height="30">
  5.   <div align="center"><font size="2" face="Geneva, Arial, Helvetica, sans-serif">
  6.   <strong><font color="#FFFFFF">Dernières News</font></strong></font></div></td>
  7.   <td><img src="images/CityHunter-tableau_03.jpg" width="30" height="30"  alt=""></td>
  8. </tr>
  9. <tr>
  10.   <td background="images/CityHunter-tableau_04.jpg" width="30" height="243" ></td>
  11.   <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 :
  1. <style>
  2. .float1 { float: left;margin:0;}
  3. .float2 { vertical-align:top;width:526px;float: middle;background-image:url(http://www.animecdz.com/css/images/CityHunter-tableau_02.jpg);margin:0;}
  4. .float3 { float: right;margin:0;}
  5. .float4 { float: left;margin:0;}
  6. .float5 { vertical-align:top;width:526px;float: middle;background-image:url(http://www.animecdz.com/css/images/CityHunter-tableau_05.jpg);margin:0;}
  7. .float6 { float: right;margin:0;}
  8. </style>
  9. <br/><br/>
  11. <div align="center">
  12. <div class="newstable2" valign="top">
  13. <div class="float1">
  14. <img src="http://www.animecdz.com/css/images/CityHunter-tableau_01.jpg" width="30" height="30"  alt="">
  15. </div>
  16. <div class="float2">
  17. <p>légende 2</p>
  18. </div>
  19. <div class="float3">
  20. <img src="http://www.animecdz.com/css/images/CityHunter-tableau_03.jpg" width="30" height="30"  alt="">
  21. </div>
  22. </div>
  24. <div class="newstable2" valign="top">
  25. <div class="float1">
  26. <img src="http://www.animecdz.com/css/images/CityHunter-tableau_04.jpg" width="30" height="30"  alt="">
  27. </div>
  28. <div class="float2">
  29. <p><font color="#FFFFFF"><b>Pas De Myth Cloth En Grande Distribution Avant 2006</b></font>
  30. <br><br>Ce n'est pas en 2005 que nous verrons des Myth Cloth en grandes surfaces.<br></p>
  31. </div>
  32. <div class="float3">
  33. <img src="http://www.animecdz.com/css/images/CityHunter-tableau_06.jpg" width="30" height="30"  alt="">
  34. </div>
  35. </div>
  37. </div>


 
mais ce n'est pas vraiment ressemblant.
 
Qu'ai-je fait comme erreur ?
 
En vous remerciant de votre aide.


---------------
Saint Seiya  || La Livebox || Europe, débats, réflexions
Reply

Marsh Posté le 29-03-2005 à 22:11:08   

Reply

Marsh Posté le 29-03-2005 à 22:21:12    

Déjà si tu passes en CSS, vire les align="center" qui n'ont strictement rien à faire ici ;) Pareil pour les valign="top". N'hésite pas à utiliser une DTD Strict afin de virer toutes ces vieilles saloperies héritées du passé :D

Reply

Marsh Posté le 29-03-2005 à 22:24:23    

FlorentG a écrit :

Déjà si tu passes en CSS, vire les align="center" qui n'ont strictement rien à faire ici ;) Pareil pour les valign="top". N'hésite pas à utiliser une DTD Strict afin de virer toutes ces vieilles saloperies héritées du passé :D


je sais bien :D
 
je veux dans un premier temps avoir la structure avant de la rendre bien propre :)


---------------
Saint Seiya  || La Livebox || Europe, débats, réflexions
Reply

Marsh Posté le 29-03-2005 à 22:26:57    

Ca :

<div class="float1">
<img src="http://www.animecdz.com/css/images/CityHunter-tableau_01.jpg" width="30" height="30"  alt="">
</div>


Ne sert à rien. Tu peux appliquer le style direct à l'image.
 
 
Si tu te lances dans le respect de la structure, fait bien gaffe à cette règle :
<div> n'est pas là pour positionner des éléments
<div> sert à grouper des éléments, et donner une structure au document. Pareil pour <span>. Ce sont des éléments génériques à utiliser quand d'autres font défaut. Genre il te faudra un élement <news> ? Utilise un truc genre <div class="news">. Il te faudrait une p'tite balise <auteur> ? Utilise alors <span class="auteur"> :)

Reply

Marsh Posté le 29-03-2005 à 22:29:34    

c'est pour cela que je veux utiliser une structure avec des div  à la place d'un tableau :)


---------------
Saint Seiya  || La Livebox || Europe, débats, réflexions
Reply

Marsh Posté le 29-03-2005 à 22:30:10    

Voilà, mais donc fait bien gaffe à ne pas en mettre là où il ne faut pas :)

Reply

Marsh Posté le 29-03-2005 à 22:34:40    

pour l'image ca m'était sorti de la tête : j'ai donc été plus royaliste que le roi :D


---------------
Saint Seiya  || La Livebox || Europe, débats, réflexions
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed