List items et text-transform: capitalize

J'ai en bas de mon blog les liens vers mes archives. Il s'agit d'une liste non ordonnée, utilisant display: inline. J'ai tenté de mettre un text-transform: capitalize sur les <li> pour que chaque moi ait une majuscule, mais il semble que seul le premier mois en soit doté... chaque <li> n'est pas considéré comme un mot ? C'est le inline qui pose problème ?

Bonjour Sebastien,

Avec ce code ça devrait marcher :

ul {
text-transform: capitalize;
}

Page de test

A+

Merci d'avoir pris du temps pour mettre ton exemple en ligne. Je procède de la même façon, mais ça refuse de marcher, je ne vois vraiment pas pourquoi

Bonsoir Sebastien,

Ca vient du fait que tout est lié sans espace, du style :

<li><a href="#">mars 2006</a></li><li><a href="#">février 2006</a></li>

De ce fait le "capitalize" n'est pas efficace (qu'il soit appliqué à <ul> ou à <li>)

edit:
En revanche sans espace mais avec {float:left} le capitalize sera efficace.
A+
Modifié par Alan (30 Mar 2006 - 22:22)

bonjour,

peut-etre peut tu l'appliquer directement a la balise a ?

Une variante du text transform pour ton cas :

a:first-letter {
font-variant:small-caps;
font-size:120%;
}

++
Modifié par gcyrillus (30 Mar 2006 - 22:28)

Merci à tous je vais tester ce soir ces différentes solutions

Mouais je viens de regarder, et je n'y arrive pas vraiment, la technique du a:first-letter ne semble pas fonctionner dans mon cas

bonjour,

Peut-etre qu'avec un lien ou le code de ta page on arriverrais a mieux cerné ton probleme.

Sous quel navigateur, teste tu ? et avec quel doctype ?

++

Utilise cette déclaration sur les <li> dans ton sélecteur CSS et non sur le <ul>
Modifié par Olivier (02 Apr 2006 - 17:22)

Marche pas ce que j'ai proposé ?

bonjour,

en regardant ton code je ne comprenez pas pourquoi ça ne marchait pas ,

mais en remplaçant ton display:inlline en float left; pour tes li, ça semble fonctionner correctement.

voici ce que j'ai fait :

#archives_footer ul{
	margin: 0;
	padding: 0;
	
margin-left: 25px;
margin-right: 25px;
margin-bottom: 25px;
line-height: 1.6em;

}

#archives_footer li {
float:left;                                 /* modif */
list-style-type:none;                 /* ajout */
margin-right: 0.85em;
}



#archives_footer a {
color: #999;
text-decoration: none;

}

#archives_footer a:hover {
color: #B3322D;
}

#archives_footer a {
text-transform:capitalize;
}

toujours surprenant ces effet de cascades

<edit>info: !? pour appliquer le first-letter il faut ajouter un :

display:block; 

pour la balise a

En relisant le post, alan, t'avais déja donné la reponse.
Il semblerait que text transform (ainsi que :first-blabla) ne s'appliquent qu'a des elements de type block, a verifier sur les docs officiels
</edit>

++
Modifié par gcyrillus (02 Apr 2006 - 21:47)

Bonjour Seb,

Personnellement, j'ai testé la proposition d'Alan et elle fonctionne à merveille.

Voir la page de test.

A+

pourtant : http://www.w3.org/TR/CSS2/text.html#caps-prop
Il est bien spécifié que cela s'applique à tous les éléments, sans contrainte particulière.

Un défaut d'implémentation ?
Ou essaye de faire un test avec un 'xml:lang="en" lang="en"', pour voir, puisque la capitalisation semble être dépendante de ces paramètres, d'après les recommandations CSS.

a écrit :
The actual transformation in each case is written language dependent.

Ce serait étrange voire un peu capilo-tracté, mais bon.
Modifié par an.archi (16 Apr 2006 - 11:37)