28173 sujets

CSS et mise en forme, CSS3

First-letter + hover

Pages :
Bonjour,

Je souhaite utiliser le pseudo-format first letter combiné avec hover mais je ne vois pas comment ça marche.

Voilà le code que j'ai utilisé :


div:first-letter /* La première lettre de chaque paragraphe */
{
   font-weight: bold; /* En gras */
   font-size: 3em; /* Ecrit légèrement plus gros que la normale */
   color: blue; /* En bleu */
}

div:first-letter:hover 
{
   font-weight: bold;
   font-size: 3em;
   color: red;
}


J'aimerai que la premiere lettre soit en bleue et grosse, et lorsque je passe la souris sur le lien (c'est un lien qui se trouve dans le div), la première lettre devient rouge.

Donc en gros je dois combiner hover et first-letter, mais comment faire ??

Merci beaucoup
Salut,

excuse moi mais comme il n'y a que deux combinaisons possibles, si l'une :

div:first-letter:hover {...


Ne marche pas. Ben tu devrais essayer l'autre :

div:hover:first-letter {...


Smiley lol

Même si pour ce qui est d'Internet Explorer c'est raté de toute façon puisqu'il n'applique le :hover que pour l'élément <a>

tiens au passage j'avais pas du tout capté que le first -letter ne fonctionnait pas avec les éléments de type inline.
clb56 a écrit :
tiens au passage j'avais pas du tout capté que le first -letter ne fonctionnait pas avec les éléments de type inline.

Vu qu'à la base c'est fait pour faire des lettrines, et que les lettrines c'est pour les paragraphes, c'est bien normal.
Mais ça limite les possibilités de détournement créatif de la propriété Smiley biggol

Au passage, la première combinaison utilisée ne pouvait que difficilement marcher, vu que ça visait le survol de la première lettre du paragraphe… la première lettre du paragraphe n'étant pas un élément.
Alors que l'inverse, ça vise le paragraphe lors du survol, tout en lui appliquant une propriété pour la première lettre.
Modifié par mpop (24 Apr 2006 - 23:53)
pekka a écrit :
J'avais déjà essayé d'inverser mais sans succés Smiley decu
Vous avez d'autres pistes ?

Déjà, est-ce théoriquement possible de combiner deux pseudo-classes ?
Oui tout à fait,

css

div:first-letter {
font-size:2em;
}

div:hover:first-letter {
font-size:4em;
}


pour html

<div>
Blablabla ...
</div>


Fonctionne parfaitement (avec firefox et opera évidemment et pas IE)

un exemple du genre de petit délire que l'on peut faire avec ça (la combinaisonde pseudo classe dont hover) :
http://www.ecoledemusique.concarneau.fr/rubrique_infosite/testcssviewer.php

(css dans le code source du document)

<edit>
Mais c'est vrai que j'ai un souvenir, un peu lointain maintenant, d'un patakes pas possible dans l'utilisation du first-letter dans le cas :

<element_block><a href=""></a></element_block>

Je me souviens vaguement que je m'en tirais mais je ne sais plus comment. En plus ce n'était pas exactement la même circonstance.
</edit>
Modifié par clb56 (25 Apr 2006 - 00:24)
Je comprends pas... ça marche pô

Bon je vous donne le code complet de ma page (il y a pas gd chose)
et si vous pouvez essayer de trouver une solution ce serait super !


<html>

<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><head>
<style>
body {
	font-family:Georgia, "Times New Roman", Times, serif;
	letter-spacing: 8px;
	margin: auto;
	text-align: center;
	}
	
div.style1 {
	margin: auto;
	width: 70%;
	padding: 50px;	
	text-align:left;
	font-size:18px;
	font-weight:900;
	}
div.style2 {
	margin: auto;
	width: 70%;
	padding: 50px;
	text-align: right;
	font-size:18px;
	font-weight:900;	
	}

div:first-letter /* La première lettre de chaque paragraphe */
{
   font-weight: bold; /* En gras */
   font-size: 3em; /* Ecrit légèrement plus gros que la normale */
   color: blue; /* En bleu */
}

div:hover:first-letter
{
   font-weight: bold;
   font-size: 3em;
   color: red;
}

a {
	color: #000000;
	text-decoration: none;
}

</style>
<body>
<div class="style1">
<a href="cv.php">Mon CV</a>
</div>
<div class="style2">
<a href="explorer-7.15">Gestionnaire de fichiers</a>
</div>
<div class="style1">
<a href="phpMyAdmin-2.8.0.3">Admin MySQL</a>
</div>

</body>

</html>


Merci !
pekka,

il y a deux choses :

Tout d'abord j'espère pour toi que tu te rends compte que comme ton :hover s'applique à autre chose qu'un <a>, tu n'obtiendras pas de toute façon le rendu que tu souhaites avec Internet Explorer. Cet aspect des choses est incontournable d'un point de vue strictement css. Si ce n'est pas clair pour toi tu risques d'être vraiment très déçu.

Sinon, si j'étais à ta place je contournerais le problème de la manière suivante :

/* extrait de ton html */
<div class="style2">

<a href="explorer-7.15">Gestionnaire de fichiers</a>

</div>

/* devient */
<div class="style2">

Aller à : <a href="explorer-7.15">gestionnaire de fichiers</a>

</div>


Et dans ce cas je pense que ça doit fonctionner (mais pas avec IE comme déjà indiqué).
Merci bcp pour la réponse.
Effectivement ça marche bien en mettant un texte avant l'ouverture de la balise <a>
Cependant j'obtiens pas l'effet que je désirai... Il y a t il un moyen de contourner ce pb ?
Par exemple, si j'insère un gif transparent avant la balise <a>, est ce que le pb serait contourner ?

Autre chose : pour que ça fonctionne sous IE, il faudrait mettre le hover sur a, mais dans ce cas ça ne marche plus du tout....
le first-letter ne fonctionne pas pour les balises de type <a> ?

Merci
Je viens d'arranger un peu sous FireFox : j'ai inversé la position de div et a.
Le lien est sur le div et non plus le contenu du div.
Et ça marche très bien... sauf sous IE bien entendu! Mais je compte sur vous pour me donner LA solution Smiley cligne
Oula !

tu peux donner le code html tel que tu l'as modifié parce que si j'ai bien compris ce que tu viens d'écrire il y a un petit problème en vue...
Excuse du petit retard !


<html>

<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><head>
<style>
body {
	font-family:Georgia, "Times New Roman", Times, serif;
	letter-spacing: 8px;
	margin: auto;
	text-align: center;
	background-color:#F9E8C1;
	}
	
div.style1 {
	margin: auto;
	width: 70%;
	padding: 50px;	
	text-align:left;
	font-size:18px;
	font-weight:900;
	}
div.style2 {
	margin: auto;
	width: 70%;
	padding: 50px;
	text-align: right;
	font-size:18px;
	font-weight:900;	
	}

div:first-letter /* La première lettre de chaque paragraphe */
{
   font-weight: bold; /* En gras */
   font-size: 3em; /* Ecrit légèrement plus gros que la normale */
   color: blue; /* En bleu */
}

div:hover:first-letter
{
   font-weight: bold;
   font-size: 3em;
   color: red;
}

a:hover {
	color:#000000;
	}

a {
	color:#818181;
	text-decoration: none;
}

</style>
<body>
<a href="cv.php">
<div class="style1">Mon CV</div>
</a>
<a href="explorer-7.15">
<div class="style2">Gestionnaire de fichiers</div>
</a>
<a href="phpMyAdmin-2.8.0.3">
<div class="style1">Admin MySQL</div>
</a>

</body>

</html>


Un problème ? Sous Firefox ça roule !
Par contre sous IE ....
J'ai aussi des problèmes d'alignement sous IE mais ça je pense que c'est juste un "text-align: center" à placer au bon endroit.
Bon tu es assis j'espère Smiley lol

ceci :

<a href="cv.php">

<div class="style1">Mon CV</div>

</a>


est formellement interdit d'un point de vue html. "div" est un élément de type block et "a" un élément de type inline. On ne doit pas insérer un type block dans un type inline.
Modifié par clb56 (25 Apr 2006 - 01:44)
clb56 a écrit :
ceci :
<a href="cv.php">
	<div class="style1">Mon CV</div>
</a>

est formellement interdit d'un point de vue html. "div" est un élément de type block et "a" un élément de type inline. On ne doit pas insérer un type block dans un type inline.

Vite fait (sans prendre le temps de vérifier que ça soit utile dans le cas présent), une lien étendu à tout un élément de type bloc :
http://web.covertprestige.info/test/01-zone-cliquable-graphique-et-accessible.html

PS: j'aurais peut-être dû intituler ça « zone cliquable valide »…
Modifié par mpop (25 Apr 2006 - 21:15)
clb56 a écrit :
c'est ici :
http://clb56.freezee.org/conteneur_lien.php

L'astuce est sympathique. Par contre, ça ne peut pas marcher si la hauteur n'est pas fixée ?

Autre chose à propos de cet exemple, je ne suis pas sûr de comprendre le comportement du bloc (lien) en positionnement absolu. Le left:0 et top:0 ne devraient pas le placer sur les bords de la page ?
J'ai encore des lacunes sur le comportement des éléments en positionnement absolu. Tu aurais une bonne référence sur le sujet ?
Modérateur
Bonjour,

un raccourci:
Pour positionner un element en absolute dans son conteneur a partir des coordoné haut/gauche de celui-ci , il faut "positionner" le conteneur en "position:relative;".

Dans ce cas le haut/gauche de la fenetre ne sera plus la reference de positionement mais bien le conteneur.

C'est le "truc" des pied de page toujours en bas de la page et pas de la fenetre , il me semblait que tu connaisais la technique !?

(ne pas oublier un doctype valide pour que ça marche )

++
mpop a écrit :

L'astuce est sympathique. Par contre, ça ne peut pas marcher si la hauteur n'est pas fixée ?


Il faut effectivement que la hauteur soit déterminée, c'est d'ailleurs une sévère restriction à l'utilisation de cette technique. Pour ma part ça ne me gène pas trop puisqu'il s'agit plus d'une petite jonglerie css amusante qu'autre chose Smiley smile
Pages :
Sujet clos
Aller à