Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2231 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Passer d'un tableau html à un tableau css?

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Passer d'un tableau html à un tableau css?

n°1826684
absot77
Posté le 14-12-2008 à 00:38:14  profilanswer
 

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">
  5. </head>
  6. <body>
  7. <table>
  8.     
  9.     
  10.  <tr>
  11.  <td rowspan="5" width="215"></td>
  12.  <td class="entete" colspan="5" width=930><h1>EVEREST</h1></td>
  13.         <td width="215" colspan="5"></td>
  14. </tr>
  15. <tr>
  16. </tr>
  17. <tr class="an">
  18.  <ul>
  19.             <td class="annexe" class="in"><li><a href="index.html">Accueil</a></li></td>
  20.   <td class="annexe"><li><a href="camp-base.html">Camp base</a></li></td>
  21.   <td class="annexe"><li><a href="icefall.html">Icefall</a></li></td>
  22.   <td class="annexe"><li><a href="camps.html">Camps</a></li></td>
  23.   <td class="annexe"><li><a href="sommet.html">Sommet</a></li></td>
  24.  </ul>
  25.  </tr>
  26.              <tr class="toto"> 
  27.              <td class="marge" colspan="5"> <h2>Camp de base</h2>
  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> </td>
  30.              
  31.                </tr>
  32.              
  33.                <tr>
  34.                <td colspan="5" height="25"><h6>R&eacute;alis&eacute; par </h6></td>
  35.              
  36.                </tr>
  37. </table>
  38. </body>
  39. </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">
  5. </head>
  6. <body>
  7. <div class="entete"><h1>EVEREST</h1></div>
  8.      
  9.             <div class="annexe" class="in"><li><a href="index2.html">Accueil2</a></li></div>
  10.   <div class="annexe"><li><a href="camp-base2.html">Camp base2</a></li></div>
  11.   <div class="annexe"><li><a href="icefall2.html">Icefall2</a></li></div>
  12.   <div class="annexe"><li><a href="camps2.html">Camps2</a></li></div>
  13.   <div class="annexe"><li><a href="sommet2.html">Sommet2</a></li></div>
  14.      
  15.              <div class="toto" class="marge" class="colonne1"> <h2>Camp de base</h2>
  16.  <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>
  17.               <div id=image>  <img src=images/basecamp.jpg alt=camp-de-base /> </div>
  18.              
  19.                </div>
  20.              
  21.                <div height="25"><h6>R&eacute;alis&eacute; par </h6></div>
  22.              
  23.              
  24. </body>
  25. </html>


Message édité par absot77 le 14-12-2008 à 13:55:44
mood
Publicité
Posté le 14-12-2008 à 00:38:14  profilanswer
 

n°1826782
FlorentG
Unité de Masse
Posté le 14-12-2008 à 13:33:56  profilanswer
 

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


---------------
last.fmflickr
n°1826806
absot77
Posté le 14-12-2008 à 14:39:35  profilanswer
 

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">
  5. </head>
  6. <body>
  7. <div class="centrer">
  8. <div class="entete"><h1>EVEREST</h1></div>
  9.      
  10.             <div class="annexe"><li><a href="index2.html">Accueil2</a></li>
  11.             <li><a href="camp-base2.html">Camp base2</a></li>
  12.                                  <li><a href="icefall2.html">Icefall2</a></li>
  13.                                  <li><a href="camps2.html">Camps2</a></li>
  14.                                  <li><a href="sommet2.html">Sommet2</a></li></div>
  15.      
  16.              <div class="toto"> <h2>Camp de base</h2></div>
  17.  <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>
  18.               <div id="image">  <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
  19.                                          
  20.                <div class="height"><h6>R&eacute;alis&eacute; par </h6></div>
  21.              
  22.                </div>
  23. </body>
  24. </html>


 
 
Le fichier CSS.
 
 

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


 
 
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
n°1826807
FlorentG
Unité de Masse
Posté le 14-12-2008 à 14:40:29  profilanswer
 

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>


---------------
last.fmflickr
n°1826813
absot77
Posté le 14-12-2008 à 14:48:51  profilanswer
 

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">
  5. </head>
  6. <body>
  7. <div class="centrer">
  8. <div class="entete"><h1>EVEREST</h1></div>
  9.      
  10.             <div class="annexe"><li><a href="index2.html">Accueil2</a><br/>
  11.              <a href="camp-base2.html">Camp base2</a><br/>
  12.                                  <a href="icefall2.html">Icefall2</a><br/>
  13.                                  <a href="camps2.html">Camps2</a><br/>
  14.                                  <a href="sommet2.html">Sommet2</a></div>
  15.      
  16.              <div class="toto"> <h2>Camp de base</h2></div>
  17.  <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>
  18.               <div id="image">  <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
  19.                                          
  20.                <div class="height"><h6>R&eacute;alis&eacute; par </h6></div>
  21.              
  22.                </div>
  23. </body>
  24. </html>


Message édité par absot77 le 14-12-2008 à 15:02:02
n°1826815
FlorentG
Unité de Masse
Posté le 14-12-2008 à 14:52:40  profilanswer
 

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>


---------------
last.fmflickr
n°1826823
absot77
Posté le 14-12-2008 à 15:02:28  profilanswer
 

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">
  5. </head>
  6. <body>
  7. <div class="centrer">
  8. <div class="entete"><h1>EVEREST</h1></div>
  9.      
  10.             <div class="annexe">
  11.   <ul>
  12.   <li><a href="index2.html">Accueil2</a></li>
  13.   <li><a href="camp-base2.html">Camp base2</a></li>
  14.   <li><a href="icefall2.html">Icefall2</a></li>
  15.   <li><a href="camps2.html">Camps2</a></li>
  16.   <li><a href="sommet2.html">Sommet2</a></li></div>
  17.      </ul>
  18.      
  19.              <div class="toto"> <h2>Camp de base</h2></div>
  20.  <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>
  21.               <div id="image">  <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
  22.                                          
  23.                <div class="height"><h6>R&eacute;alis&eacute; par Aur&eacute;lien Laval</h6></div>
  24.              
  25.                </div>
  26. </body>
  27. </html>

n°1826825
FlorentG
Unité de Masse
Posté le 14-12-2008 à 15:02:53  profilanswer
 

Ouais là c'est mieux :D


---------------
last.fmflickr
n°1826826
FlorentG
Unité de Masse
Posté le 14-12-2008 à 15:03:13  profilanswer
 

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


---------------
last.fmflickr
n°1826827
absot77
Posté le 14-12-2008 à 15:05:27  profilanswer
 

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. }

mood
Publicité
Posté le 14-12-2008 à 15:05:27  profilanswer
 

n°1826831
FlorentG
Unité de Masse
Posté le 14-12-2008 à 15:12:56  profilanswer
 

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 :)


---------------
last.fmflickr
n°1826842
absot77
Posté le 14-12-2008 à 15:30:13  profilanswer
 

Je l'ai changer et mis en decaller".

n°1826844
FlorentG
Unité de Masse
Posté le 14-12-2008 à 15:32:02  profilanswer
 

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...


---------------
last.fmflickr
n°1826847
absot77
Posté le 14-12-2008 à 15:40:36  profilanswer
 

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;"?

n°1826850
FlorentG
Unité de Masse
Posté le 14-12-2008 à 15:45:52  profilanswer
 

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


---------------
last.fmflickr
n°1826861
absot77
Posté le 14-12-2008 à 15:55:20  profilanswer
 

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


Message édité par absot77 le 14-12-2008 à 15:55:36
n°1826902
absot77
Posté le 14-12-2008 à 17:17:49  profilanswer
 

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...

n°1826906
J_D_
Posté le 14-12-2008 à 17:45:18  profilanswer
 

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.

n°1826911
absot77
Posté le 14-12-2008 à 18:05:22  profilanswer
 

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

n°1826914
absot77
Posté le 14-12-2008 à 18:24:16  profilanswer
 

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

n°1826915
FR-DarkRod
Informag€€k
Posté le 14-12-2008 à 18:25:19  profilanswer
 

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 ^^

n°1826917
absot77
Posté le 14-12-2008 à 18:27:57  profilanswer
 

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

n°1826918
FlorentG
Unité de Masse
Posté le 14-12-2008 à 18:30:40  profilanswer
 

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.


---------------
last.fmflickr
n°1826919
absot77
Posté le 14-12-2008 à 18:40:37  profilanswer
 

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">
  5. </head>
  6. <body>
  7. <div class="decaller">
  8. <div class="entete"><h1>EVEREST</h1></div>
  9.      
  10.             <div class="annexe" class="decaller">
  11.   <ul>
  12.   <li><a href="index2.html">Accueil2</a></li>
  13.   <li><a href="camp-base2.html">Camp base2</a></li>
  14.   <li><a href="icefall2.html">Icefall2</a></li>
  15.   <li><a href="camps2.html">Camps2</a></li>
  16.   <li><a href="sommet2.html">Sommet2</a></li>
  17.      </ul>
  18.         </div>
  19.      
  20.              <div class="toto"> <h2>Camp de base</h2></div>
  21.  <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>
  22.               <div id="image">  <img src="images/basecamp.jpg" alt="camp-de-base" /> </div>
  23.                                          
  24.                <div class="height"><h6>R&eacute;alis&eacute; par </h6></div>
  25.              
  26.                </div>
  27. </body>
  28. </html>


 

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


Message édité par absot77 le 14-12-2008 à 18:40:57
n°1826920
Profil sup​primé
Posté le 14-12-2008 à 18:43:28  answer
 

FR-DarkRod a écrit :


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


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

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Passer d'un tableau html à un tableau css?

 

Sujets relatifs
aide tableau de chaines et allocation dynamique !?Trie tableau dans un autre tableau
[HTML] Lien pointant sur un raccourciWYSIWYG - Enregistrer code HTML - Recuperer format interprétée
Passer un tableau 2D vers un threadTri d'un tableau
Importer textes en html sous excel pour les traiter avec vbaC#: Comment faire un tableau de structs ?
Tableau en C [niveau faible ^^][HTML] Passer 1 tableau en parametre d'une page vers une autre ...
Plus de sujets relatifs à : Passer d'un tableau html à un tableau css?


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR