Texte d'un menu à la verticale

Bonjour à tous ami(e)s du web !

je suis en train de mettre en place un site personnel,
mon site
et je suis confronté à un petit problème dans les menus de gauche & de droite .
les textes sont à l'horizontale, et ça m'arrangerai de les mettre à la verticale.

quel est l'attribut qui permet d'arriver à ce résultat ??

je suis tombé sur le post suivant qui traite du même sujet :
sujet
et il donne une solution pour ie.
existe-t'il des solutions pour les autres navigateurs ?

merci à vous !
Modifié par Guim (27 Dec 2007 - 13:56)

Hello,

Ton URL ne fonctionne malheureusement pas, tu l'as rédigée sans tenir compte des explications données dans l'Aide du forum et dans la FAQ

Je te suggère vivement d'éditer ton message afin de corriger ce problème.

no problemo, je ré-édite tout ça tout de suite !

Il n'existe pas de solution standard "toute faite" permettant d'obtenir ce résultat. Le plus simple: créer des images et renseigner convenablement leurs alternatives textuelles.

je viens d'essayer la ligne de code

writing-mode: tb-rl;

,
résultat :
le texte s'écrit à la verticale, mais pas comme je le souhaite,
en effet, le mot apparait tout simplement à 90° sur la droite.

je vais essayer d'être claire :
je souhaite que chaque lettre reste à l'horizontale,
mais que le mot dans son ensemble soit à la verticale.
suis-je précis ?

Guim a écrit :
suis-je précis ?

Absolument.
À nouveau, il n'y a pas de propriété destinée à cet usage. Si tu souhaites éviter l'utilisation d'images, il faudra bidouiller un peu:

[#black][b]HTML[/b][/#]

<p>
<span>M</span><span>o</span><span>t</span>
</p>


[#black][b]CSS[/b][/#]

span {display:block; text-align:center;}

Modifié par Benjamin D.C. (27 Dec 2007 - 14:08)

Guim a écrit :
je suis tombé sur le post suivant qui traite du même sujet :
http://forum.alsacreations.com/topic-4-10520-1-Rsolu-Texte-vertical.html[/url]
et il donne une solution pour ie.
existe-t'il des solutions pour les autres navigateurs ?

Non, pas de solutions pour les autres navigateurs, comme l'indique d'ailleurs le sujet que tu cites.

Une piste intéressante à tout hasard: sIFR permet de remplacer à la volée (via Javascript) un texte dessiné par le navigateur par un texte dessiné en Flash (c'est utile notamment pour le titrage). Par contre, sIFR ne prévoit pas de fonctionnalité pour du texte vertical. On pourrait imaginer en produire une version modifiée, mais pour cela il faut être développeur.

Les librairies graphiques telles que GD ou Image Magick sont peut-être également des pistes à explorer. Là encore, réservé aux développeurs.

très bonne idée !!

et admettons que j'utilise des images,
comment puis-je masquer le texte qui s'affiche. ou tout simplement le rendre transparent ?
j'utilise un switcher,
et je voudrais faire appel aux images seulement pour ce style.
Modifié par Guim (27 Dec 2007 - 15:40)

Si tu utilises une image la logique serait de procéder ainsi (en supposant par exemple qu'il s'agit d'un titre de niveau 1):

<h1>
	<img src="mon_titre_vertical.png" alt="Mon titre" />
</h1>

Maintenant, si tu utilises un style switcher qui ne te permet pas de changer des parties du code HTML, il faudra sans doute adapter une technique dite de remplacement d'image:
- on dimensionne le bloc;
- on cache le texte (par exemple avec un text-indent: -9000px;);
- on affiche l'image en image de fond du bloc.
Mais ce sont des solutions moins accessibles, par contre.

text-indent

c'est parfait, je n'avais jamais utilisé cette fonction,
elle va m'être utile à l'avenir.

merci à vous !
Vous m'avez retiré une sacrée épine du pied !

Bonsoir,

Florent V. a écrit :

Maintenant, si tu utilises un style switcher qui ne te permet pas de changer des parties du code HTML, il faudra sans doute adapter une technique dite de remplacement d'image

L'amusant, c'est que l'une des motivations initiales les plus fortes de CSS était justement d'éviter la généralisation du remplacement de texte par des images...

Mais, dix ans plus tard, il est normal, sans doute, que l'on ait perdu de vue les objectifs fondamentaux...
Modifié par Laurent Denis (27 Dec 2007 - 18:04)

À qui le dis-tu...

J'ai beaucoup hésité avant d'écrire «text-indent: moins un tas de pixels» dans ce sujet, et ça n'a pas loupé: solution miracle, aussitôt adoptée, etc.

Bah...

Pouquoi tu l'as écrit, alors, fichu couillon ?

La moitié du travail d'expert CSS consiste à ne pas donner les supposées solutions.

L'autre moitié consiste à les couler préventivement dans l'oeuf

(tiens, par exemple: il faudra bientôt s'attaquer aux limites du diplay:table, à défaut de pouvoir imaginer ses dérives)

<edit>A chaque fois que l'on écrit: "ce sont des solutions moins accessibles",pensez d'abord en terme de robustesse hors handicapés. Le texte viré avec text-indent (ou autre-chose) et remplacé par une image, j'adore quand je ne cause pas la langue, par exemple, et que je passe par un outil de traduction en ligne.

L'accessibilité, ce qu'elle a a de bien, c'est que, quand on on ne va pas jusqu'à ses excès, elle se contente de rendre le contenu potenitellement manipulable par n'importe quel UA. Ce qui profite à tout le monde, producteur comme consommateur.

Quand on va jusqu'à ses excès, elle devient au choix une erreur ou un choix politiquement assumé, mais c'est une autre histoire, ça.

Alors, évidemment, le tout, c'est de savoir quand est-ce que Madame dépasse les bornes. Mais ça, c'est tout le débat actuel sur WCAG1.0, ses méthodes d'applications, et le devenir de WCAG2.0, par exemple.
</>
Modifié par Laurent Denis (27 Dec 2007 - 20:20)

mince, je n'avais pas lu la dernière ligne "moins accessible".

je vais essayer de trouver une solution annexe,
mais étant donné que mon site contient 4 styles différents (dont 1 seul avec l'attribut "text-indent"),
je pense que ça minimise le problème,
(de plus, ce n'est pas la version par défaut)

promis, je reviendrai sur le problème

@Guim: ne faites pas attention, je passe de temps en temps quand quelque-chose m'agace, pour faire la mouche du coche. ça ne s'adresse que rarement au malheureux qui passait par là à la recherche d'un innocente solution pour un site perso ou similaire
Modifié par Laurent Denis (27 Dec 2007 - 21:10)

no problemo
Ô vous, chef des transylvaniens
Modifié par Guim (30 Dec 2007 - 16:57)