bandeau avec actions

bandeau avec actions - PHP - Programmation

Marsh Posté le 16-02-2016 à 09:38:28    

Bonjour ,
 
Je souhaite mettre en place un bandeau chronologique avec des actions possible, selon la période sur laquelle clic l’utilisateur (2 période possible, voir code)
J’ai actuellement réussi à faire le visuel que je recherche seulement je n’ai AUCUNE idée de comment réaliser cela.
 
Je suis du genre débrouillard mais sans aucune compétence dans le développement.. je vous passe déjà le code que j’ai réalisé pour que vous vous fassiez une idée.
 
Je suppose que c’est pas optimisé mais j’ai pas réussi à faire autrement.  
 
HTML

Code :
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link rel="stylesheet" href="style.css" media="all">
  6. <title></title>
  7. </head>
  8. <body>
  9. <table class="bandeautable">
  10.  <tr>
  12.  bandeau chronologique avec actions
  15.   <td class="bandeaulargeur1"></td>
  16.   <td colspan="2" class="bandeauTextCenter">PERIODE1<br /><span class="bandeauDate">DATE<span></td>
  17.   <td class="bandeaulargeur2"></td>
  18.   <td colspan="2" class="bandeauTextCenter">PERIODE2<br /><span class="bandeauDate">DATE<span></td>
  19.   <td class="bandeaulargeur2"></td>
  20.   <td colspan="2" class="bandeauTextCenter">PERIODE3<br /><span class="bandeauDate">DATE<span></td>
  21.   <td class="bandeaulargeur1"></td>
  22.  </tr>
  23.  <tr class="bandeauHauteurLigne">
  24.   <td class="bandeaulargeur1"></td>
  25.   <td class="bandeauBorderR bandeauBorderB bandeaulargeur3"></td>
  26.   <td class="bandeauBorderB bandeaulargeur3"></td>
  27.   <td class="bandeauBorderB bandeaulargeur2"></td>
  28.   <td class="bandeauBorderR bandeauBorderB bandeaulargeur3"></td>
  29.   <td class="bandeauBorderB bandeaulargeur3"></td>
  30.   <td class="bandeauBorderB bandeaulargeur2"></td>
  31.   <td class="bandeauBorderR bandeauBorderB bandeaulargeur3"></td>
  32.   <td class="bandeauBorderB bandeaulargeur3"></td>
  33.   <td class="bandeaulargeur1"></td>
  34.  </tr>
  35.  <tr class="bandeauHauteurLigne">
  36.   <td class="bandeaulargeur1"></td>
  37.   <td class="bandeauBorderR bandeaulargeur3"></td>
  38.   <td class="bandeaulargeur3"></td>
  39.   <td class="bandeaulargeur2"></td>
  40.   <td class="bandeauBorderR bandeaulargeur3"></td>
  41.   <td class="bandeaulargeur3"></td>
  42.   <td class="bandeaulargeur2"></td>
  43.   <td class="bandeauBorderR bandeaulargeur3"></td>
  44.   <td class="bandeaulargeur3"></td>
  45.   <td class="bandeaulargeur1"></td>
  46.  </tr>
  47. </table>
  48. <table class="bandeautable">
  49.   <tr class="bandeauAHauteurLigne">
  50.   <td class="bandeauA1largeur1 bandeauBorderR bandeauABorderB"></td>
  51.   <td class="bandeauA1largeur2 bandeauBorderR">CLIC1</td>
  52.   <td class="bandeauA1largeur3 bandeauABorderB">CLIC2</td>
  53.  </tr>
  54.  <tr class="bandeauAHauteurLigne">
  55.   <td class="bandeauA1largeur1 bandeauBorderL"></td>
  56.   <td class="bandeauA1largeur2"></td>
  57.   <td class="bandeauA1largeur3 bandeauBorderR"></td>
  58.  </tr>
  59. </table>
  60. <table class="bandeautable">
  61.  <tr>
  62.   <td class="bandeauE1largeur1 bandeauBorderL"></td>
  63.   <td colspan="2" class="bandeauTextCenter">Etape1</td>
  64.   <td class="bandeauE1largeur1"></td>
  65.   <td colspan="2" class="bandeauTextCenter">Etape2</td>
  66.   <td class="bandeauE1largeur1"></td>
  67.   <td colspan="2" class="bandeauTextCenter">Etape3</td>
  68.   <td class="bandeauE1largeur1"></td>
  69.   <td colspan="2" class="bandeauTextCenter">Etape4</td>
  70.   <td class="bandeauE1largeur1"></td>
  71.   <td colspan="2" class="bandeauTextCenter">Etape5</td>
  72.   <td class="bandeauE1largeur1"></td>
  73.   <td colspan="2" class="bandeauTextCenter">Etape6</td>
  74.   <td class="bandeauE1largeur1"></td>
  75.   <td colspan="2" class="bandeauTextCenter">Etape7</td>
  76.   <td class="bandeauE1largeur1"></td>
  77.   <td colspan="2" class="bandeauTextCenter">Etape8</td>
  78.   <td class="bandeauE1largeur1 bandeauBorderR"></td>
  79.  </tr>
  80.  <tr class="bandeauHauteurLigne">
  81.   <td class="bandeauE1largeur1 bandeauBorderL bandeauBorderB"></td>
  82.   <td class="bandeauBorderR bandeauE1largeur1 bandeauBorderB"></td>
  83.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  84.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  85.   <td class="bandeauBorderR bandeauE1largeur1 bandeauBorderB"></td>
  86.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  87.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  88.   <td class="bandeauBorderR bandeauE1largeur1 bandeauBorderB"></td>
  89.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  90.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  91.   <td class="bandeauBorderR bandeauE1largeur1 bandeauBorderB"></td>
  92.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  93.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  94.   <td class="bandeauBorderR bandeauE1largeur1 bandeauBorderB"></td>
  95.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  96.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  97.   <td class="bandeauBorderR bandeauE1largeur1 bandeauBorderB"></td>
  98.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  99.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  100.   <td class="bandeauBorderR bandeauE1largeur1 bandeauBorderB"></td>
  101.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  102.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  103.   <td class="bandeauBorderR bandeauE1largeur1 bandeauBorderB"></td>
  104.   <td class="bandeauE1largeur1 bandeauBorderB"></td>
  105.   <td class="bandeauE1largeur1 bandeauBorderB bandeauBorderR"></td>
  106.  </tr>
  107.  <tr class="bandeauHauteurLigne">
  108.   <td class="bandeauE1largeur1 bandeauBorderL"></td>
  109.   <td class="bandeauBorderR bandeauE1largeur1"></td>
  110.   <td class="bandeauE1largeur1"></td>
  111.   <td class="bandeauE1largeur1"></td>
  112.   <td class="bandeauBorderR bandeauE1largeur1"></td>
  113.   <td class="bandeauE1largeur1"></td>
  114.   <td class="bandeauE1largeur1"></td>
  115.   <td class="bandeauBorderR bandeauE1largeur1"></td>
  116.   <td class="bandeauE1largeur1"></td>
  117.   <td class="bandeauE1largeur1"></td>
  118.   <td class="bandeauBorderR bandeauE1largeur1"></td>
  119.   <td class="bandeauE1largeur1"></td>
  120.   <td class="bandeauE1largeur1"></td>
  121.   <td class="bandeauBorderR bandeauE1largeur1"></td>
  122.   <td class="bandeauE1largeur1"></td>
  123.   <td class="bandeauE1largeur1"></td>
  124.   <td class="bandeauBorderR bandeauE1largeur1"></td>
  125.   <td class="bandeauE1largeur1"></td>
  126.   <td class="bandeauE1largeur1"></td>
  127.   <td class="bandeauBorderR bandeauE1largeur1"></td>
  128.   <td class="bandeauE1largeur1"></td>
  129.   <td class="bandeauE1largeur1"></td>
  130.   <td class="bandeauBorderR bandeauE1largeur1"></td>
  131.   <td class="bandeauE1largeur1"></td>
  132.   <td class="bandeauE1largeur1 bandeauBorderR"></td>
  133.  </tr>
  134. </table>
  135. </body>
  136. </html>


 
 
CSS

Code :
  1. table, tr, td{
  2. }
  4. .bandeautable{
  5. border-collapse: collapse;
  6. }
  8. .bandeauColor{
  9. background: #5709DC;
  10. }
  12. .bandeauBorderR{
  13. border-right: 2px solid #000;
  14. }
  15. .bandeauBorderL{
  16. border-left: 2px solid #000;
  17. }
  18. .bandeauBorderB{
  19. border-bottom: 2px solid #5709DC;
  20. }
  21. .bandeauHauteurLigne{
  22. height: 5px;
  23. }
  25. .bandeauTextCenter{
  26. text-align: center;
  27. margin: 0;
  28. }
  30. .bandeaulargeur1{
  31. width: 300px;
  32. }
  33. .bandeaulargeur2{
  34. width: 80px;
  35. }
  36. .bandeaulargeur3{
  37. width: 40px;
  38. }
  39. .bandeaulargeur4{
  40. width: 150px;
  41. }
  43. .bandeauDate{
  44. font-size: 10pt;
  45. }
  47. .bandeauA1largeur1{
  48. width: 342px;
  49. }
  50. .bandeauA1largeur2{
  51. width: 164px;
  52. }
  53. .bandeauA1largeur3{
  54. width: 553px;
  55. }
  56. .bandeauABorderB{
  57. border-bottom: 2px solid #000;
  58. }
  60. .bandeauAHauteurLigne{
  61. height: 15px;
  62. }
  64. .bandeauE1largeur1{
  65. width: 40px;
  66. }


Message édité par reyre le 16-02-2016 à 13:42:18
Reply

Marsh Posté le 16-02-2016 à 09:38:28   

Reply

Marsh Posté le 16-02-2016 à 12:33:07    

Tu as des balises "pour le code" qui conviendront mieux que des spoilers c'est l’icône avec C/c++.
 
Tu peux aussi faire un codepen ou un jsfiddle, c'est bien pratique :
http://codepen.io/anon/pen/Bjbvrz
 
Maintenant je supposes que tu t’interroges pour le Javascript, lit des tutoriaux sur Jquery et revient poser tes questions quand tu bloqueras...


---------------
D3
Reply

Marsh Posté le 16-02-2016 à 13:43:51    

Très bonne idée le codepen je ne connaissais pas.  
Merci.
 
D'accord je vais regarder du côté de JQUERY

Reply

Marsh Posté le 17-02-2016 à 11:16:45    

ca me parait trop compliqué.. je voudrais simplement "decouper" la partie clic2 et lorsqu'on clique dessus le tableau s'adapte

Reply

Sujets relatifs:

Leave a Replay

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