[Résolu] Rotation de texte pour affichage de date

Bonjour,

Je cherche à afficher la date à côté d'un article, dans un espèce de petit onglet avec le jour horizontal et le mois en bordure, verticalement.

J'ai essayé de m'en sortir avec des transform: rotate(-90deg) et du positionnement absolu, sans grand succès.

J'arrive à ce résultat : http://jsfiddle.net/zKZP5/6/
Le problème est que le positionnement dépend de la longueur du nom du mois, et que ceci est actuellement très mal pris en compte (comme le montre le fiddle). J'ai essayé pas mal de trucs, sans grand succès...

J'ai trouvé quelques exemples sur le net d'affichage de date sous ce format. Mais à chaque fois, c'est l'année qui est tournée de 90 degrés, et celle-ci a une longueur fixe de 4 caractères, ce qui ne pose pas de problème.

Auriez-vous une solution pour résoudre ce problème ?

Merci !
Modifié par Pod (17 Sep 2013 - 21:49)

transform-origin: xx xx;

pour finaliser l'usage de transform en définissant son point de départ.

ex: http://codepen.io/anon/pen/KaBue

++

Bonjour, j'avais lu cet article à lépoque.
Text Rotation with CSS

http://snook.ca/technical/text-rotation/text-rotation.png
Modifié par loicbcn (16 Sep 2013 - 14:25)

@loicbcn : c'est effectivement l'article que j'avais vu initialement et qui m'a donné cette idée. Mais comme tous les articles traitant de ce sujet, ils utilisent une année, de taille fixe de 4 caractères, à la verticale, donc pas de problèmes particuliers.

@gc-nomade : Effectivement, j'avais vu la solution du transform-origin. La solution semble cool, mais je n'ai trouvé aucun moyen d'avoir un overflow propre...

Je cherche à obtenir ceci (aux positions respectives des éléments près, je cherche juste à avoir le nom du mois entièrement contenu dans l'élément jaune) :


Merci

salut,
pour arriver à ce que tu veux il faudrait avoir l'esprit un peu tordu et un soupçon vicieux .
En partant du principe que tu la hauteur de ton conteneur jaune (sur l'image) est fixe car ne contenant que deux lignes, on peut partir sur le principe inverse qui consiste à faire la rotation totale de ce dernier pour garder une largeur fluide, puis en faire une autre pour le nombre seulement. Ce conteneur jaune serait en position absolue et le conteneur à côté (en rouge sur l'image) aurait une marge à gauche égale à la hauteur du conteneur jaune.
Bon il est un peu tard et je ne sais pas si c'est clair, mais voici un exemple concret.

Ouahou super, merci ! C'est nickel comme solution (et logique en fait, il fallait que les éléments de largeur fixe soient ceux qui sont tournés en CSS.

En adaptant un peu, j'ai réussi à avoir le rendu que je voulais, en centrant verticalement le jour du mois.

Sujet résolu !