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

  FORUM HardWare.fr
  Programmation
  PHP

  bandeau avec actions

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

bandeau avec actions

n°2275742
reyre
Posté le 16-02-2016 à 09:38:28  profilanswer
 

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
mood
Publicité
Posté le 16-02-2016 à 09:38:28  profilanswer
 

n°2275753
mechkurt
Posté le 16-02-2016 à 12:33:07  profilanswer
 

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
n°2275757
reyre
Posté le 16-02-2016 à 13:43:51  profilanswer
 

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

n°2275797
reyre
Posté le 17-02-2016 à 11:16:45  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  bandeau avec actions

 

Sujets relatifs
[CSS] création bandeau avec image.Créer une extension avec des actions automatique
Script animation bandeau déroulant[RESOLU] Creer des actions sur évènement en boucle
Problème bandeau joomlaenregistrer des actions et en faire une "macro"
Actions bouton AccessDétection automatique lien externe >> frame
comment ajouter des actions sémantiques dans yaccLancer 2 actions en meme temps ?
Plus de sujets relatifs à : bandeau avec actions

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.111 secondes

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