Calendrier : écrire entre deux cases

Bonjour à tous,

je suis face à un petit problème que je ne sais pas comment aborder.
J'ai un calendrier de plusieurs lignes avec une colonne par heure de la journée. J'aimerais pouvoir afficher l'heure à laquelle correspond une colonne mais avec le texte centrer au dessus du début de la colonne :


(dans cette image l'heure est afficher toutes les 2 heures)

La table me semble la structure la plus adaptée à ma problématique de calendrier , mais pas moyen d'arriver à positionner les entêtes comme sur l'image.
J'ai essayer de ruser en créant un tableau avec uniquement les entête que je décale mais le positionnement n'est pas parfait car change selon la taille de l'heure (9h00 moins long que 23h00).

Comment procéderiez vous pour avoir un placement à correct quelque soit le type de police et la taille des heures ?

Merci pour vos suggestions
Modifié par grunky (17 Dec 2010 - 10:37)

Bonjour, un bout de code serait plus facile pour t'aider.

Salut , j'avais pas mis de code car pour le moment j'en suis juste à l'ébauche qui ne donne rien :

<table border="1" style="width:960px;"> 
<thead> 
	<tr> 
		<th style="width:65px"></th> 
		<th style="text-align:left;">0h</th> 
		<th style="text-align:left;">1h</th> 
		<th style="text-align:left;">2h</th> 
		<th style="text-align:left;">3h</th> 
		<th style="text-align:left;">4h</th> 
		<th style="text-align:left;">5h</th> 
		<th style="text-align:left;">6h</th> 
		<th style="text-align:left;">7h</th> 
		<th style="text-align:left;">8h</th> 
		<th style="text-align:left;">9h</th> 
		<th style="text-align:left;">10h</th> 
		<th style="text-align:left;">11h</th> 
		<th style="text-align:left;">12h</th> 
		<th style="text-align:left;">13h</th> 
		<th style="text-align:left;">14h</th> 
		<th style="text-align:left;">15h</th> 
		<th style="text-align:left;">16h</th> 
		<th style="text-align:left;">17h</th> 
		<th style="text-align:left;">18h</th> 
		<th style="text-align:left;">19h</th> 
		<th style="text-align:left;">20h</th> 
		<th style="text-align:left;">21h</th> 
		<th style="text-align:left;">22h</th> 
		<th style="text-align:left;">23h</th> 
		<th style="text-align:left;">24h</th>  
	</tr> 
</thead> 
<tbody> 
	<tr id="camr_0" class="day"> 
			<td style="width:80px;">bulle</td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
			<td style="width:31px;"></td> 
		</tr> 
	</tbody> 
</table>

En gros je souhaite pouvoir décaler le thead de telle manière à ce que les heures soit située comme sur l'image de mon premier post.
Mais peut être que l'utilisation d'un thead et de th n'est pas la solution la plus adaptée

Si j'ai bien compris ce que tu cherches, c'est "colspan" que tu dois utiliser.
http://fr.selfhtml.org/html/tableaux/relier_cellules.htm#par_colonne

Avec un colspan on s'approche de ce que je souhaite mais ce n'est toujours pas cela :
L'heure est ici aligné à gauche mais dans l'idéal elle devrait être au dessus de la bordure de la colonne et non pas juste à droite

Je suis pas trop certaine de comprendre ton problème.
Dans ton code, tu as mis un text-align: left sur les cellules <th> mais tu dis que tu veux que le texte dans celles-ci soit centré ?

C'est quoi "bulle" ?

Quand je dis que je veux qu'il soit centré c'est pas centré dans la case.
Sur mon image précédente , si tu prend la ligne bulle (juste un nom rien de plus) , je voudrais que le 0h soit centrer au dessus de la bordure correspondante et non qu'il soit à gauche dans la case comme c'est le cas actuellement.

Pour te donner une idée :

Ce qui est encadré en vert est bien placé car au dessus de la bordure , le reste ne l'ai pas ca rdans la case.

Bonjour,

Je ne pense pas que cela soit possible (du moins, pas sans chippoter).

Ce qui tu souhaites faire c'est sortir les contenus du tableau, il n'y a pas beaucoup de solutions pour faire ça : JavaScript pour déplacer des éléments, positionner les éléments (extérieur au tableau) à l'endroit souhaité (accessibilité = zéro).

Ou alors, comme le problème est uniquement esthétique, il y a peut-être moyen d'appliquer une image de fond simulant la bordure verticale à l'endroit souhaité (avec un padding sur le contenu des cellules) (mais cela ne sera pas très robuste face à un aggrandissement des caractères).

Une idée (mais comme le dit Laurie-Anne, ce n'est pas idéal), ça serait :

- de mettre un div (ou autre block) autour de tes heures
- y mettre un fond de la même couleur que celui que tu as dans ton tableau
- y mettre border en haut et bas avec la même couleur que tes bordures de tableau
- placer ce div en padding:absolute puis un left: négatif pour passer au dessus de ta ligne et donc la cacher avec le fond de la même couleur (ça nécessite de régler la hauteur du div pour qu'elle soit identique au tableau).

ça reste à priori accessible mais un poil barbare

Merci pour vos réponses , je vais voir ce que je peux faire en bidouillant tout ça