[CSS] Pb avec les display:block ..

**sokette** · 09/12/2005, 15h49

Bonjour,

Voici ce que je dois réaliser mais je n'y arrive pas ..

J'ai 1 à plusieurs mots provenant d'une DB, ils sont tous sur la même ligne espacés par un ">".

Donc comme ceci : "Mot1 > Mot 2 > Mot3"

Je dois faire un Css qui me permet de mettre chaque mot en minuscule sauf la 1ere lettre en Maj.
Les mots sont également des liens qui changent quand la souris passe dessus.

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
22
23
24
25
26
 
.pagetitlelink
{
	font-size: 14pt; 
	text-align: left;
	color: #666666;
	text-transform:lowercase;	
	display:block;
}
 
.pagetitlelink:first-letter
{
	text-transform:uppercase;	
}
 
a, a:link, a:active	,a:visited
{	
	color:#666666;
	text-decoration:none;
}	
 
a:hover
{
	color:Black;
	text-decoration:underline;
}

Ceci me donne le résultat voulu mis à part 2 choses :

1. Lorsque ma souris passe sur un lien, la 1ere lettre ne change pas (la couleur ne passe pas en black), si je retire le display:block ca fonctionne mais alors la je n'ai plus le capitalize des mots..

2. Je dois mettre tout mes mots dans le même span car si j'en ai plusieurs ils sont 1 par ligne, vu le display:block ...

Quelqu'un aurait il une solution?

Merci d'avance

**franculo_caoulene** · 09/12/2005, 16h27

Salut,

1) Peux-tu donner le code html qui va avec? Sinon je ne suis pas sûr de la syntaxe mais tu peux essayer de mettre ça à la fin :

Code :

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

1
2
3
4
5
.pagetitlelink:first-letter:hover
{
color:Black;
   text-decoration:underline; 
}

Mais comme je t'ai dit je ne suis pas certain.

2) Apparemment pour utiliser le pseudo-élément :first-letter l'élement doit obligatoirement être de type bloc. Puisque tu récupères les mots d'une base de données fais le traitement à la récupération des mots.

**francis m** · 09/12/2005, 20h19

le first-letter ne fonctionne pas sur tous les navigateurs !

**Loceka** · 10/12/2005, 10h32

le hover non plus...

Du moins pas quand il est appliqué sur d'autres balises que "a" pour IE (ou firefox je sais plus).

**javatwister** · 10/12/2005, 13h17

ce code marche sous IE et Ffx:

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
 
<title>...</title> 
 
<style type="text/css">
 
#cadre a {
text-decoration:none;
font-weight:bold;
color:#000000;
float:left;
display:block;
padding:5px;
}
 
#cadre a:hover {
color:#ff0000;
}
 
.lien:first-letter {
text-transform: capitalize;
}
 
 
</style>
 
</head> 
 
<body> 
<div id="cadre">
 
<a class="lien" href="">truc</a>
<a class="lien" href="">machin</a>
<a class="lien" href="">bidule</a>
 
</div>
 
</body> 
</html>

ce qui zarbi c'est que le mode de désignation des éléments visés change considérablement le résultat sous IE;

si on appelle la première lettre dess liens du cadre via:

Code :

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