28172 sujets

CSS et mise en forme, CSS3

Bonjour,
sur du texte en majuscules "text-transform capitalize" ne modifie pas le texte.
Il y a-t-il un moyen uniquement avec du CSS de transformer un texte en majuscules en un texte avec seulement la première lettre en majuscule et le reste en minuscule.
J'ai essayé "text-transform: lowercase capitalize" ou "text-transform: capitalize lowercase" mais cela ne marche pas...

Merci d'avance
Je ne penses pas que ce soit possible en css.

N'est-il pas possible d'avoir le texte en version standard? Où la première lettre est déjà en majuscule et le reste en minuscule.
Modérateur
Bonjour,

Pour une liste HTML par exemple, tu peux utiliser le code suivant, mais il faudra que chaque élément ne possède qu'une phrase.


ul li {
text-transform: lowercase;
}

ul li:first-letter {
text-transform: capitalize;
}


D'autres solutions seraient d'utiliser le Javascript ou un script côté serveur pour formater le texte.

Si je trouve d'autres solutions, je reviendrai.
Ah oui, tiens la solution est intéressante.
Je n'y aurais pas pensé...
Modifié par Corinne S. (23 Feb 2010 - 16:29)
Bonjour,
merci de ta réponse Tony Monast. Je ne connais pas cet "attribut" first-letter.
Il n'existe que pour li? Il est compatible tous navigateurs?

Merci en tout cas, je vais tester.
zvib a écrit :
Il n'existe que pour li?

Non, la pseudo-classe :first-letter peut être utilisée avec n'importe quel élément.

zvib a écrit :
Il est compatible tous navigateurs?

Si j'en crois la documentation de Microsoft, c'est implémenté dans les versions actuelles d'Internet Explorer. Et je ne doute pas que ça soit implémenté dans les autres navigateurs. Donc à priori oui, mais sans garantie. Smiley smile
Florent V. a écrit :
Si j'en crois la documentation de Microsoft, c'est implémenté dans les versions actuelles d'Internet Explorer. Et je ne doute pas que ça soit implémenté dans les autres navigateurs. Donc à priori oui, mais sans garantie. Smiley smile

Le pseudo-élément :first-letter est implémenté par IE depuis la version 6.

Quant à la solution côté serveur, en PHP, il existe les fonctions ucfirst () et ucwords () pour ça.

Soit dit en passant, la propriété text-transform ne permet pas, contrairement à text-decoration, d'appliquer deux valeurs en même temps. Smiley cligne
Modifié par Victor BRITO (23 Feb 2010 - 23:00)