<div> à la place de tableaux

25 sept. 2005, 20:22

bonjour! votre forum m'aide bcp je tiens donc à vous remercier pour votre patience et votre aide!

étant débutant je suis en pleine phase de remise en cause à chaque fois que j'apprends de nouvelles choses en html css! jusqu'à présent j'utilisais bcp les tableaux pour faire ma mise en page hors je constate que l'emplois de balise <div> permet de faire la même chose qu'un tableau tout en permettant d'avoir un code plus clair!

j'aimerai donc modifier ma page http://ayiore.free.fr/agua/sitephp/ en remplacant tous les tableaux!

pour cela il me faudrait de l'aide afin de modifier la partie supérieur de ma page (celle avec le menu et l'image de femme vu de dos) en remplaçant le tableaux par des balises <div>

voici le code de la partie en question!
merci d'avance!

Code : Tout sélectionner

<table border="0" cellpadding="0" cellspacing="0" width="780">
  <tr>
   <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="211" height="1" border="0" alt=""></td>

   <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="26" height="1" border="0" alt=""></td>
   <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="216" height="1" border="0" alt=""></td>
   <td><img src="file:///C|/compte/jybe/agua%20viva%20final/images/spacer.gif" width="329" height="1" border="0" alt=""></td>
  </tr>

  <tr>
   <td><img src="aguabanfinal1_r1_c1.jpg" alt="" name="aguabanfinal1_r1_c1" width="211" height="64" border="0"></td>
   <td colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="242" height="64">
     <param name="movie" value="menu1.swf">

     <param name="quality" value="autolow">
     <embed src="menu1.swf" quality="autolow" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="242" height="64"></embed>
   </object></td>
   <td><img src="aguabanfinal1_r1_c4.jpg" alt="" width="327" height="64"></td>
  </tr>
  <tr>
   <td colspan="2"><img src="aguabanfinal1_r3_c1.jpg" alt="" name="aguabanfinal1_r3_c1" width="237" height="41" border="0"></td>
   <td rowspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="216" height="87">
     <param name="movie" value="menu2.swf">

     <param name="quality" value="autolow">
     <embed src="menu2.swf" quality="autolow" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="216" height="87"></embed>
   </object></td>
   <td><img src="aguabanfinal1_r2_c4.jpg" alt="" width="327" height="41"></td>
  </tr>
  <tr>
   <td colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="237" height="46">
     <param name="movie" value="fondu%20espace%20forme.swf">
     <param name="quality" value="autolow">

     <embed src="fondu%20espace%20forme.swf" quality="autolow" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="237" height="46"></embed>
   </object></td>
   <td><img src="aguabanfinal1_r4_c4.jpg" alt="" width="327" height="46"></td>
  </tr>
</table>
</div>

25 sept. 2005, 22:42

Ok, alors on va essayer de résumer : tu dois identifier les blocs qui constituent la structure générale de ta page :

Code : Tout sélectionner

|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|           haut de page             |
|                                    |
|¯¯¯¯¯¯¯|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|       |                            |
|  news |    contenu_haut            |
|       |____________________________|
|       |                            |
|       |                            |
|       |    contenu_bas             |
|       |                            |
|_______|____________________________|
|                                    |
|         pied de page               |
|____________________________________|

Chacun de ces blocs peut être indépendant et positionné selon la place qu'il doit prendre et peut être déli8mité dans un <div>.

Le haut de page sera bien entendu le preemier dans le code.
Ensuite le bloc news : en float: left;
Ensuite les deux moitiés du contenu principal qui vont venir se positionner le long du bloc de news;
Enfin le pied de page avec un style clear: both pour le cas où le contenu serait insuffisant, ça obligera le pied de page à être quoi qu'il arrive en dessous du bloc de news.

Les divs peuvent avoir des images en arrière-plan, ça simplifie aussi.

Essaye de créer une première maquette sommaire sur cette base et reviens chercher des points de détails au fur et à mesure de tes difficultés

25 sept. 2005, 23:13

je te remercie cyrano tu m'as d'ailleur déjà bcp aidé!

ma page utilise déjà les balises div comme tu as pu t'en rendre compte dans mes posts précédents!

maintenant je m'attaque au contenu de chaque bloc qui est à l'heure actuelle sous forme de tableau! je souhaiterais commencer par la partie du haut et faire qu'elle soit reconstituée à l'aide de balise <div> et non sous forme de tableau cf le code du post ci dessus!

25 sept. 2005, 23:35

Je dirais que le gros de travail pour la partie du haut par exemple sera au niveau de l'infographie: remplacer les <tr><td> par autant de <div> n'a pas un intéret bouleversant. TU devrais peut-être faire un tour sur des articles sur le sujet : ICI ou encore Là

Et il y en a d'autres, sur ces deux sites, tu trouveras les meilleures références en la matière.

26 sept. 2005, 21:12

que veux tu dire par "Je dirais que le gros de travail pour la partie du haut par exemple sera au niveau de l'infographie:"?

26 sept. 2005, 23:10

Parce que pour le haute de page par exemple, ton flash est en trois parties et le reste de l'image est composé de 5 parties: soit tu repars à partir d'une image unique et le flash par dessus, chacun dans un calque, mais le calque <div> en position absolute, soit tu garde tes images découpées, mais tu vas t'enquiquiner à fond les manettes pour positionner tout ça.

Pour le reste, ça devrait être relativement facile.

27 sept. 2005, 10:03

Je te conseille un tour sur Alsacréations.com...dont tu trouveras l'adresse dans le Post-It...
http://www.phpfrance.com/forums/voir_sujet-2909.php

<div> à la place de tableaux

Qui est en ligne