Discussion :

[baggie]

Bonjour,

j'affiche un "Prénom Nom - Untruc - 2000" dans un lien.

Pour que mes textes s'affichent correctement, j'ai utilisé les propriétés CSS lowercase et capitalize pour n'avoir que la première lettre en majuscule.
Ce qui m'a fait ajouter une class à chaque partie de mon texte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<a href="unlien.html">
	<strong>
                    <span class="capitalize">Prénom</span>
	            <span class="capitalize">Nom</span> - 
		    <span class="capitalize">Untruc</span> - 
		    2000
	</strong>
</a>

en CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
.capitalize {
	text-transform: lowercase;
	display: inline-block;
}
 
.capitalize:first-letter {
	text-transform: capitalize;
}
 
.capitalize:hover {
	text-decoration: underline;
}

Mon problème : si je passe ma souris sur le prénom, celui-ci va se souligner ainsi que le tiret entre le nom et le truc, et l'année. Si je passe ma souris sur letruc, celui-ci va se souligner ainsi que l'année et l'espace entre le prénom et le nom.

Mais pourquoi tout ne se souligne pas simplement ? Comment puis-je y remédier ?

Merci !

[FirePrawn]

Bonjour,

Parce que ton style sur le hover est défini sur ta class et non sur le lien lui même.
Mets ton style sur a:hover plutôt

[baggie]

Merci pour ta réponse. Cependant, ça ne change rien du tout. J'ai également testé de mettre mon text-decoration sur la class englobant le lien et les span mais rien ne change.

En fait, il n'a pas l'air d'apprécier mes span

[Torgar]

Salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
a:hover, a:hover span {
    text-decoration: underline;
}

Si tu as une double épaisseur sur les textes sur lesquels sont appliqués la classe capitalize, c'est parce que text-transform: capitalize rajoute le gras. A annuler avec un font-weight: normal;

[baggie]

Merci beaucoup Torgar ! C'est nickel

[baggie]

Je me permets de réouvrir mon problème.

Sous Chrome, l'affichage est très bien, aucun soucis.

Par contre sous Firefox, ça ne fonctionne pas comme je le voudrais :

> j'ai un espace entre le prénom et le nom qui n'est pas souligné.
> je me demande si ça ne vient pas du fait que mon texte n'a pas l'air de prendre en compte mon "text-align: left".

> quand j'enlève la propriété display: inline-block; de ma class capitalize, le problème disparaît.

J'ai essayé d'utiliser la propriété spécifique à firefox pour le inline-block, mais rien à faire j'ai toujours le soucis

Pour illustrer :
Je voudrais :
Prénom Nom - UnTruc - 2000

J'obtiens sur Firefox :
Prénom Nom - UnTruc - 2000
OU (oui parce que je n'ai pas toujours le même comportement) :
Prénom Nom - UnTruc ................ - 2000


Donc voilà, comportement relativement étrange sous Firefox, autant au niveau des liens que de l'alignement du texte

[Torgar]

Quelle version de Firefox as-tu ? J'ai la v13 et je n'ai pas de souci.

[baggie]

Je suis en v11 actuellement. Je ne suis pas la seule à avoir ce problème (testé sur plusieurs postes, mais je ne sais pas les versions des autres personnes ).

Je tente en examinant l'élément sur Firefox de modifier le code CSS, quand je décoche simplement mes options de ma CSS, donc comme si je n'avais rien modifié, tout fonctionne nickel, bon affichage. Si je recharge la page en ayant supprimé le code, hop ça revient avec un mauvais affichage Je comprends pas pourquoi !

EDIT : même en v13 j'ai le problème.

[Torgar]

Tu peux montrer le code actuel stp ? (mieux si tu as un lien)

[baggie]

Pas de lien à proposer

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div class="identity-header">
<!-- [ ... ] du code -->
<div class="identity-col infos-col">
	<a href="...">
	<strong>
		<span class="capitalize">prenom</span>
		<span class="capitalize">nom</span> -
		<span class="capitalize">untruc</span> - 
		2010
	</strong>
	</a><br />
</div>
</div>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.capitalize {
	text-transform: lowercase;
	display: inline-block;
}
 
.capitalize:first-letter {
	text-transform: capitalize;
}
 
a:hover span {
	text-decoration: underline;
}
 
.identity-col .infos-col a:hover {
	text-decoration: underline;
}
 
.identity-header .identity-col {
	text-align: left;
}

Et au final, j'obtiens divers comportements suivant la longueur de mon texte : des fois des espaces comme si le texte était justifié, un soulignement individuel par mot et non en un seul "bloc" pour le lien ... Comme j'avais montré dans un message au dessus, le soulignement et l'alignement du texte reste aléatoires suivant sa longueur.

[Torgar]

C'est parce que c'est faux ça. La class infos-col n'est pas située après la classe identity-col, mais au même niveau (je sais pas si c'est clair ?)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.identity-col .infos-col a:hover {
    text-decoration: underline;
}

Voici le CSS corrigé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.capitalize {
    text-transform: lowercase;
    display: inline-block;
}
 
.capitalize:first-letter {
    text-transform: capitalize;
}
 
/* J'ai rajouté ça pour bien voir le hover underline */
a {
    text-decoration: none;
}
 
.identity-col a:hover, .identity-col a:hover span {
    text-decoration: underline;
}
 
.identity-header .identity-col {
    text-align: left;
}

J'ai également fait le test avec en rajoutant des espaces insécables (   ) et ça fonctionne.

[baggie]

Merci beaucoup ... J'ai bien compris pour les classes. Mais ton code n'a strictement rien changé chez moi

Franchement je ne comprends pas.

J'obtiens ceci :
Prénom Nom ...- Untruc .....- 2000

Avec des espaces aléatoires suivant la longueur du texte.

[Torgar]

Montre nous le code généré stp (Ctrl + U / Afficher la source) de firefox. Change les noms et prénoms si besoin, tout en conservant le même nombre de caractères.

Exemple :

Dupond Martin - bidule - 2010
Dcdodo Pldkid - bidule - 2010

Enfin tu vois le genre.

On est d'accord que ce que tu obtiens et que tu nous affiches c'est le hover sur un de tes liens ?

[baggie]

On est d'accord que ce que tu obtiens et que tu nous affiches c'est le hover sur un de tes liens ?

Tout à fait

Voici mon code source (oui les textes sont en majuscules dans le source) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<div class="identity-col infos-col">
	<a href="unenormelien.php">
		<strong>
			<span class="capitalize">AZERTYU-AZERT</span>
			<span class="capitalize">AZERTYUI</span> -
			<span class="capitalize">AZERTYUIOPMLKJHGF</span> - 
			2000
		</strong>
	</a><br />
</div>

J'ai les espacements bizarres tout le temps, pas uniquement sur le hover. Et voici le résultat sur le hover :

Azertyu-azert... Azertyui..... - Azertyuiopmlkjhgf..... - 2000

[Torgar]

Ok, je viens de comprendre ce qu'il se passe.

Lorsque l'on applique un text-transform lowercase, le span garde la longueur du texte d'origine.
Et comme le lowercase réduit la taille des caractères, un espace vide se crée.

Je présume que tes noms et prénoms sont issues d'une base de données et que tu les affiches via PHP ?

Si oui, il est possible de faire ça autrement.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function ucfirstLetter($str) {
    return ( ucfirst(strtolower($str)) );
}
 
while ($resultats) {
    echo '<a href=""><strong>' . ucfirstLetter($resultat['nom']) . ' - ' . ucfirstLetter($resultat['prenom']) . ' - 2000</strong></a><br />';
}

[baggie]

Ok j'ai compris ! Merci pour l'info

J'ai juste un doute par rapport au ucfirst en php : il met le texte directement en minuscule du coup si celui-ci est tout en majuscule ?

[baggie]

J'ai pu résoudre mon problème avec ucfirst (enfin j'utilise une librairie particulière dans mon PHP donc ce n'est pas tout à fait cette fonction mais elle est basée dessus).

Un grand merci Torgar pour ton aide

[Torgar]

Non. Il ne met que la première en majuscule. Tu remarqueras que dans ma fonction j'ai mis strtolower() dans le ucfirst()

confère : http://fr.php.net/manual/fr/function...first-examples

Edit: avec plaisir.

[baggie]

Tu remarqueras que dans ma fonction j'ai mis strtolower() dans le ucfirst()

Ah oui en effet, j'ai pas fait attention !