Passer d'un tableau html à un tableau css?

Passer d'un tableau html à un tableau css? - HTML/CSS - Programmation

Marsh Posté le 14-12-2008 à 00:38:14    

Slt, je voudrais refaire tout ce code mais en css pur, autrement dit en virant tout ce qui est en html, donc je pense qu'il faudrais enlever tout les td et tr pour mettre des div mais ça je trouve quelquechose de bizarre à la fin donc il doit y avoir des choses à modifié?
 
Voici le code en html
 

Code :
  1. <html>
  2. <head>
  3.  <title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape </title>
  4.  <link rel="stylesheet" type="text/css" href="fichier_style.css">
  6. </head>
  8. <body>
  11. <table>
  12.     
  13.     
  14.  <tr>
  15.  <td rowspan="5" width="215"></td>
  16.  <td class="entete" colspan="5" width=930><h1>EVEREST</h1></td>
  17.         <td width="215" colspan="5"></td>
  18. </tr>
  19. <tr>
  24. </tr>
  26. <tr class="an">
  27.  <ul>
  28.             <td class="annexe" class="in"><li><a href="index.html">Accueil</a></li></td>
  29.   <td class="annexe"><li><a href="camp-base.html">Camp base</a></li></td>
  30.   <td class="annexe"><li><a href="icefall.html">Icefall</a></li></td>
  31.   <td class="annexe"><li><a href="camps.html">Camps</a></li></td>
  32.   <td class="annexe"><li><a href="sommet.html">Sommet</a></li></td>
  33.  </ul>
  34.  </tr>
  37.              <tr class="toto"> 
  38.              <td class="marge" colspan="5"> <h2>Camp de base</h2>
  39.  <p>Situ&eacute; &agrave; 5200 m&egrave;tres d'altitude, le camp de base de l'Everest est la base                 logistique des diff&eacute;rentes exp&eacute;ditions qui ont lieu chaque ann&eacute;e sur l'Everest.</p>
  40.               <div id=image>  <img src=images/basecamp.jpg alt=camp-de-base /> </div> </td>
  41.              
  42.                </tr>
  43.              
  44.                <tr>
  45.                <td colspan="5" height="25"><h6>R&eacute;alis&eacute; par </h6></td>
  46.              
  47.                </tr>
  48. </table>
  49. </body>
  50. </html>


 
Et le code après avoir enlever les tr et td.
 

Code :
  1. <html>
  2. <head>
  3.  <title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape </title>
  4.  <link rel="stylesheet" type="text/css" href="fichier_style.css">
  6. </head>
  8. <body>
  11. <div class="entete"><h1>EVEREST</h1></div>
  12.      
  14.             <div class="annexe" class="in"><li><a href="index2.html">Accueil2</a></li></div>
  15.   <div class="annexe"><li><a href="camp-base2.html">Camp base2</a></li></div>
  16.   <div class="annexe"><li><a href="icefall2.html">Icefall2</a></li></div>
  17.   <div class="annexe"><li><a href="camps2.html">Camps2</a></li></div>
  18.   <div class="annexe"><li><a href="sommet2.html">Sommet2</a></li></div>
  22.      
  23.              <div class="toto" class="marge" class="colonne1"> <h2>Camp de base</h2>
  24.  <p>Situ&eacute; &agrave; 5200 m&egrave;tres d'altitude, le camp de base de l'Everest est la base                 logistique des diff&eacute;rentes exp&eacute;ditions qui ont lieu chaque ann&eacute;e sur l'Everest.</p>
  25.               <div id=image>  <img src=images/basecamp.jpg alt=camp-de-base /> </div>
  26.              
  27.                </div>
  28.              
  29.                <div height="25"><h6>R&eacute;alis&eacute; par </h6></div>
  30.              
  31.              
  33. </body>
  34. </html>


Message édité par absot77 le 14-12-2008 à 13:55:44
Reply

Marsh Posté le 14-12-2008 à 00:38:14   

Reply

Marsh Posté le 14-12-2008 à 13:33:56    

Faut déjà nettoyer un peu le code initial. Genre dans un <ul>, on n'a pas le droit de mettre des <td>, juste cash des <li>.
 
Aussi, il ne suffit pas de tout remplacer par des <div>, faut faire gaffe à la sémantique des balises.
 
Et les trucs genre <div height="25"> ne sont pas non plus valide, il n'y a pas d'attribut height sur div, tout doit être dans le CSS.
 
Attention aussi, tu te lances dans une fantastique aventure qui va te prendre du temps :D Faut y aller bout par bout, genre commencer par juste mettre quelques div pour apprendre à faire des colonnes correctement et tout

Reply

Marsh Posté le 14-12-2008 à 14:39:35    

Voilà à quoi ça ressemble après quelque changement...
 
 

Code :
  1. <html>
  2. <head>
  3.  <title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape </title>
  4.  <link rel="stylesheet" type="text/css" href="fichier_style.css">
  6. </head>
  8. <body>
  10. <div class="centrer">
  12. <div class="entete"><h1>EVEREST</h1></div>
  13.      
  15.             <div class="annexe"><li><a href="index2.html">Accueil2</a></li>
  16.             <li><a href="camp-base2.html">Camp base2</a></li>
  17.                                  <li><a href="icefall2.html">Icefall2</a></li>
  18.                                  <li><a href="camps2.html">Camps2</a></li>
  19.                                  <li><a href="sommet2.html">Sommet2</a></li></div>
  23.      
  24.              <div class="toto"> <h2>Camp de base</h2></div>
  25.  <p>Situ&eacute; &agrave; 5200 m&egrave;tres d'altitude, le camp de base de l'Everest est la base logistique des diff&eacute;rentes exp&eacute;ditions qui ont lieu chaque ann&eacute;e sur l'Everest.</p>
  26.               <div id="image">  <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
  27.                                          
  28.                <div class="height"><h6>R&eacute;alis&eacute; par </h6></div>
  29.              
  30.                </div>
  32. </body>
  33. </html>


 
 
Le fichier CSS.
 
 

Code :
  1. body
  2. {
  3. margin: 10px 0 ;padding: 0 ;text-align: center ;background-color:#87CEFA;
  4. }
  6. pre
  7. {
  8. overflow: auto ;
  9. }
  11. h6
  12. {
  13. background-color:#87CEFA;color:white;text-align:center;
  14. }
  16. .toto
  17. {
  18. background-color : white;padding-left:20px;padding-right:20px;width:250px;height:250px;
  19. }
  21. .annexe
  22. {
  23. height:25px;width:125px;color:white;}
  25. .entete
  26. {
  27. background:url(images/everest.jpg);padding-left:50px;width:750px;height:151px;
  28. }
  30. .an
  31. {
  32. background-color:#0099FF;
  33. }
  35. h2
  36. {
  37. text-align: center ;color:#0099FF;text-decoration:underline;
  38. }
  40. a
  41. {
  42. color:white;text-decoration:none;text-align:center;
  43. }
  45. h1
  46. {
  47. text-align:center;color:#DDDDDD;
  48. }
  50. div#image
  51. {
  52. text-align:center;
  53. }
  55. .height
  56. {
  57. height:25px;
  58. }
  60. .centrer
  61. {
  62. margin:auto;
  63. }


 
 
J'ai tout mis à la suite pour ne pas que ça soit trop long mais sinon das mon code tout est dessous des uns des autres.

Message cité 1 fois
Message édité par absot77 le 14-12-2008 à 14:40:41
Reply

Marsh Posté le 14-12-2008 à 14:40:29    

absot77 a écrit :


            <div class="annexe"><li><a href="index2.html">Accueil2</a></li>
             <li><a href="camp-base2.html">Camp base2</a></li>
                                  <li><a href="icefall2.html">Icefall2</a></li>
                                  <li><a href="camps2.html">Camps2</a></li>
                                  <li><a href="sommet2.html">Sommet2</a></li></div>
   


Ca c'est pas bon, les <li> ne peuvent aller que dans un <ul>

Reply

Marsh Posté le 14-12-2008 à 14:48:51    

Comme ça?
 

Code :
  1. <html>
  2. <head>
  3.  <title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape </title>
  4.  <link rel="stylesheet" type="text/css" href="fichier_style.css">
  6. </head>
  8. <body>
  10. <div class="centrer">
  12. <div class="entete"><h1>EVEREST</h1></div>
  13.      
  15.             <div class="annexe"><li><a href="index2.html">Accueil2</a><br/>
  16.              <a href="camp-base2.html">Camp base2</a><br/>
  17.                                  <a href="icefall2.html">Icefall2</a><br/>
  18.                                  <a href="camps2.html">Camps2</a><br/>
  19.                                  <a href="sommet2.html">Sommet2</a></div>
  23.      
  24.              <div class="toto"> <h2>Camp de base</h2></div>
  25.  <p>Situ&eacute; &agrave; 5200 m&egrave;tres d'altitude, le camp de base de l'Everest est la base logistique des diff&eacute;rentes exp&eacute;ditions qui ont lieu chaque ann&eacute;e sur l'Everest.</p>
  26.               <div id="image">  <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
  27.                                          
  28.                <div class="height"><h6>R&eacute;alis&eacute; par </h6></div>
  29.              
  30.                </div>
  32. </body>
  33. </html>


Message édité par absot77 le 14-12-2008 à 15:02:02
Reply

Marsh Posté le 14-12-2008 à 14:52:40    

C'est encore pire :D
 
Une liste se fait comme ça :

Code :
  1. <ul>
  2.   <li><a href="index2.html">Accueil2</a></li>
  3.   <li><a href="camp-base2.html">Camp base2</a></li>
  4.   <li>....
  5. </ul>

Reply

Marsh Posté le 14-12-2008 à 15:02:28    

C'est bon cette fois-ci?  :d
 

Code :
  1. <html>
  2. <head>
  3.  <title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape </title>
  4.  <link rel="stylesheet" type="text/css" href="fichier_style.css">
  6. </head>
  8. <body>
  10. <div class="centrer">
  12. <div class="entete"><h1>EVEREST</h1></div>
  13.      
  15.             <div class="annexe">
  17.   <ul>
  18.   <li><a href="index2.html">Accueil2</a></li>
  19.   <li><a href="camp-base2.html">Camp base2</a></li>
  20.   <li><a href="icefall2.html">Icefall2</a></li>
  21.   <li><a href="camps2.html">Camps2</a></li>
  22.   <li><a href="sommet2.html">Sommet2</a></li></div>
  23.      </ul>
  26.      
  27.              <div class="toto"> <h2>Camp de base</h2></div>
  28.  <p>Situ&eacute; &agrave; 5200 m&egrave;tres d'altitude, le camp de base de l'Everest est la base logistique des diff&eacute;rentes exp&eacute;ditions qui ont lieu chaque ann&eacute;e sur l'Everest.</p>
  29.               <div id="image">  <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
  30.                                          
  31.                <div class="height"><h6>R&eacute;alis&eacute; par Aur&eacute;lien Laval</h6></div>
  32.              
  33.                </div>
  35. </body>
  36. </html>

Reply

Marsh Posté le 14-12-2008 à 15:02:53    

Ouais là c'est mieux :D

Reply

Marsh Posté le 14-12-2008 à 15:03:13    

Attention, y'a encore un </div> qui traîne à la fin de la liste

Message cité 1 fois
Reply

Marsh Posté le 14-12-2008 à 15:05:27    

FlorentG a écrit :

Attention, y'a encore un </div> qui traîne à la fin de la liste


 
C'est normal, c'est la fin du div avec la classe centrer qui normalement devrai centrer ma page mais ce n'est pas le cas.
 
J'ai mis ça pour la classe:  
 

Code :
  1. .centrer
  2. {
  3. margin:auto
  4. }

Reply

Marsh Posté le 14-12-2008 à 15:05:27   

Reply

Marsh Posté le 14-12-2008 à 15:12:56    

Pour centrer faut aussi préciser une largeur.
 
Attention à ne pas donner des noms de classes genre "centrer". Si un jour tu changes d'avis et que tu veux que ta liste soit à gauche, ça fera bizarre une classe "centrer" alignée à gauche :) Et l'interêt du CSS étant de ne pas toucher au code HTML pour faire des modifs de mise en page :)

Reply

Marsh Posté le 14-12-2008 à 15:30:13    

Je l'ai changer et mis en decaller".

Reply

Marsh Posté le 14-12-2008 à 15:32:02    

C'est pas mieux, parce que si tu ne veux plus le décaler :D
 
Le mieux est de donner un identifiant à ta liste :

Code :
  1. <ul id="menu">


Code :
  1. #menu {
  2.   margin: 0 auto;
  3.   width: 600px;
  4. }


Par exemple...

Message cité 1 fois
Reply

Marsh Posté le 14-12-2008 à 15:40:36    

FlorentG a écrit :

C'est pas mieux, parce que si tu ne veux plus le décaler :D
 
Le mieux est de donner un identifiant à ta liste :

Code :
  1. <ul id="menu">


Code :
  1. #menu {
  2.   margin: 0 auto;
  3.   width: 600px;
  4. }


Par exemple...


 
Pourquoi tu as mis un "#" devant menu?
 
Ca veut rien dire "margin: 0 auto;"?

Reply

Marsh Posté le 14-12-2008 à 15:45:52    

Dans le CSS pour faire référence à un id, on utilise #id
 
Et margin: 0 auto est une forme contractée de margin: 0 auto 0 auto;, ce qui en conjonction avec la largeur permet de centrer

Reply

Marsh Posté le 14-12-2008 à 15:55:20    

Pourquoi ça ne centre pas avec tes trucs et les miens?...  :(


Message édité par absot77 le 14-12-2008 à 15:55:36
Reply

Marsh Posté le 14-12-2008 à 17:17:49    

Pour décaler, c'est quoi la balise à utiliser déjà?
 
Ce n'est pas le padding-left vu qu'il agrandi sur la gauche...

Reply

Marsh Posté le 14-12-2008 à 17:45:18    

Il y a margin et padding.  
 
http://www.aidenet.com/data/css/aimages/v146.gif
 
Ce ne sont pas des balises mais des propriétés que tu peux appliquer aux éléments.

Reply

Marsh Posté le 14-12-2008 à 18:05:22    

Je viens de corriger et c'est vrai que c'est mieux avec un margin-left..  :d
 

Reply

Marsh Posté le 14-12-2008 à 18:24:16    

Ils servent à quoi les "<li></li>
 
Parce que je voudrais faire en sorte que mes menus se suivent..

Message cité 1 fois
Reply

Marsh Posté le 14-12-2008 à 18:25:19    

absot77 a écrit :

Ils servent à quoi les "<li></li>
 
Parce que je voudrais faire en sorte que mes menus se suivent..


 
A faire des points :p
 
<ul>
 
<li></li>
 
</ul>
 
liSTER ^^

Message cité 1 fois
Reply

Marsh Posté le 14-12-2008 à 18:27:57    

Pourquoi mes menus se mettent les uns endessous des autres alors que je n'ai pas de "<br/>"?

Reply

Marsh Posté le 14-12-2008 à 18:30:40    

Parce que les li sont de type list-item, du coup c'est normal qu'ils passent à la ligne. Met un display: inline; dessus par exemple.

Reply

Marsh Posté le 14-12-2008 à 18:40:37    

Je l'ai mis dans uns de mes classes seulement l'effet que ça eu c'est qu'ils se sont centrés mais les uns en dessous des autres.
 

Code :
  1. <html>
  2. <head>
  3.  <title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape </title>
  4.  <link rel="stylesheet" type="text/css" href="fichier_style.css">
  6. </head>
  8. <body>
  10. <div class="decaller">
  12. <div class="entete"><h1>EVEREST</h1></div>
  13.      
  14.             <div class="annexe" class="decaller">
  15.   <ul>
  16.   <li><a href="index2.html">Accueil2</a></li>
  17.   <li><a href="camp-base2.html">Camp base2</a></li>
  18.   <li><a href="icefall2.html">Icefall2</a></li>
  19.   <li><a href="camps2.html">Camps2</a></li>
  20.   <li><a href="sommet2.html">Sommet2</a></li>
  21.      </ul>
  22.         </div>
  24.      
  25.              <div class="toto"> <h2>Camp de base</h2></div>
  26.  <p>Situ&eacute; &agrave; 5200 m&egrave;tres d'altitude, le camp de base de l'Everest est la base logistique des diff&eacute;rentes exp&eacute;ditions qui ont lieu chaque ann&eacute;e sur l'Everest.</p>
  27.               <div id="image">  <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
  28.                                          
  29.                <div class="height"><h6>R&eacute;alis&eacute; par </h6></div>
  30.              
  31.                </div>
  33. </body>
  34. </html>


 

Code :
  1. body
  2. {
  3. margin: 10px;
  4. padding: 0;
  5. text-align: center;
  6. background-color:#87CEFA;
  7. }
  9. pre
  10. {
  11. overflow: auto ;
  12. }
  14. h6
  15. {
  16. background-color:#87CEFA;
  17. color:white;
  18. text-align:center;
  19. }
  21. .toto
  22. {
  23. background-color : white;
  24. padding:20px;
  25. width:500px;
  26. height:250px;
  27. margin-left:544px;
  28. }
  30. .annexe
  31. {
  32. height:25px;
  33. width:125px;
  34. color:white;
  35. background-color:#0099FF;
  36. display:inline;
  37. }
  39. .entete
  40. {
  41. background:url(images/everest.jpg);
  42. padding-left:50px;
  43. width:750px;
  44. height:151px;
  45. margin-left:300px;
  46. }
  48. .an
  49. {
  50. background-color:#0099FF;
  51. }
  53. h2
  54. {
  55. text-align: center ;
  56. color:#0099FF;
  57. text-decoration:underline;
  58. }
  60. a
  61. {
  62. color:white;
  63. text-decoration:none;
  64. text-align:center;
  65. }
  67. h1
  68. {
  69. text-align:center;
  70. color:#DDDDDD;
  71. }
  73. div#image
  74. {
  75. text-align:center;
  76. }
  78. .height
  79. {
  80. height:25px;
  81. }
  83. .decaller
  84. {
  85. margin: 0 auto;
  86. }


Message édité par absot77 le 14-12-2008 à 18:40:57
Reply

Marsh Posté le 14-12-2008 à 18:43:28    

FR-DarkRod a écrit :


 
A faire des points :p
 
<ul>
 
<li></li>
 
</ul>
 
liSTER ^^


 
non, à faire des éléments de liste  [:aloy]

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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