[CSS / HTML] Planning journalier

**shaun_the_sheep** · 13/03/2008, 10h17

Bonjour,

je cherche à faire une vue journalière pour un planning sur lequel je dois crée des taches.

Je m'explique, j'aimerai avoir par exemple sur une disposition verticale, les heures à gauches et le cadriallage à droite

Exple:
08:00 -----------------------
15 -----------------------
30 ------------------------
45 ------------------------
09:00 -------------------------
........

Quelqu'un à t'il une idée ?

Merci

**Deallyra** · 13/03/2008, 10h25

Bonjour,

Alors là... Un tableau en brut?

mais ton créer des tâches m'interpelle...
combien de colonnes?

**shaun_the_sheep** · 13/03/2008, 10h29

Bien possible ou des balises type <span>, mais c'est pour les Styles que je ne vois pas comment faire pour faire le quadrillage et pour que celui-ci soit en arrière plan ?

En faite le calendrier ne concerne qu'une ressource donc en gros une seule colonne (hormis les heures)

merci

**Deallyra** · 13/03/2008, 10h32

le quadrillage?

o_O on ne doit pas se comprendre car un border : 1 aux élément de ton tableau doit te l'afficher ce quadrillage.

**shaun_the_sheep** · 13/03/2008, 10h36

oui possible mais je veux jouer sur l'épaisseur de la bordure pour mettre en evidence les heures / 1/4 h et ne pas avoir de quallidrage dans la colonne des heures.

**Deallyra** · 13/03/2008, 10h43

ok

en ce cas, je ne sais pas si tu gères ton tableau en dynamique ou pas mais tout les tout les quatres tr, tu met un style = " border : 2px solid #000000"

pour les autres, style = " border : 1px solid #000000"

enfin gère ça dans une feuille css

**shaun_the_sheep** · 13/03/2008, 11h03

peut on jouer sur les proprietes des bords haut ou bas d'une celllule de tableau ?

**shaun_the_sheep** · 13/03/2008, 11h08

question à oublier je viens de trouver.

**shaun_the_sheep** · 13/03/2008, 11h25

Bon j'arrive à cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
<html>
 <head>
 
 <style>
 
 .zoneCalendrier {
    border: 2px solid #032D57;
    height : 400px;
    width : 300px; 
    margin :5px;
    padding : 10px;
   }
 .calendrier {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 20x;
	color: #032d57;
	font-weight: normal;
	background-color: #FFFFFF; }
 
 .calendrier_heure{
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #032d57;
	font-weight: normal;
	border-top: 2px solid #032D57;
	border-left: 1px solid #032D57;
	border-right: 1px solid #032D57;
	background-color: #FFFFFF; 
    }	
  .calendrier_quartheure{
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #032d57;
	font-weight: normal;
	border-top: 1px solid #032D57;
	border-left: 1px solid #032D57;
	border-right: 1px solid #032D57;
	background-color: #FFFFFF; 
    }
 
   .calendrier_bas{
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #032d57;
	font-weight: normal;
	border-top: 1px solid #032D57;
	border-left: 1px solid #032D57;
	border-right: 1px solid #032D57;
	border-bottom: 2px solid #032D57;
	background-color: #FFFFFF; 
    }
 
 </style>
 
 </head>
 
 <body>
 
  <div id="zoneCalendrier" class="zoneCalendrier">
 
	  <table border=0 CELLPADDING=0 CELLSPACING=0 class='calendrier'>
	    <tr>
	    <td width="60px" rowspan=4 align='center' valign='top'>08:00</td>
	    <td width="200px" class='calendrier_heure'>1&nbsp;</td>
 
	    </tr>
	    <tr>
	    <td class='calendrier_quartheure'>2&nbsp;</td>
	    </tr>
	    <tr>
	    <td class='calendrier_quartheure'>&nbsp;</td>
	    </tr>
	    <tr>
	    <td class='calendrier_quartheure'>&nbsp;</td>
	    </tr>
	    <tr>
	    <td rowspan=4 align='center' valign='top'>09:00</td>
	    <td class='calendrier_heure'>&nbsp;</td>
	    </tr>  
	    <tr>
	    <td class='calendrier_quartheure'>&nbsp;</td>
	    </tr>
	    <tr>
	    <td class='calendrier_quartheure'>&nbsp;</td>
	    </tr>
	    <tr>
	    <td class='calendrier_bas'>&nbsp;</td>
	    </tr>
	  </table>
 
    </div>
 
 </body>
 
</html>

quelqu'un peut il m'aider pour que cela soit plus beau visuellement ?

Merci

[CSS / HTML] Planning journalier

CSS

Discussions similaires

Partager

Partager