Positionnement du contenu généré.

[calimo]

J'ai décidé de mettre un joli bouton pour Firefox sur http://smilissimo.free.fr/
C'est très joli, il est correctement positionné, bref, je suis content !
Sauf que si je pose une question c'est sans doute que je ne le suis pas... en effet, si vous mettez le thème "technique" et que vous pointez votre souris sur le logo dans votre navigateur, vous avez un joli texte qui s'affiche... après l'image. Logique puisque je l'ai généré avec :

Code : Tout sélectionner

#GetFirefox:hover a:after {
	content:"Firefox : le meilleur navigateur du moment. Essayez-le !";

sauf que j'ai aussi mis :

Code : Tout sélectionner

	display:block;
	position:fixed;
	font-weight: bold;
	font-size:13px;
	top:300px; 
	left:10px;
	text-align: center;
	background:white;
	color:black;
}

Pourquoi est-ce qu'il n'a pas une position fixe (en dehors du flux) Quelqu'un réussira-t-il a éclairer ma lanterne ?

[Bobe]

Je sais pas, mais en tout cas, c'est une mauvaise idée d'utiliser la génération de contenu via css pour ajouter du contenu textuel.

P.S: la déclaration position: fixed; met implicitement la propriété display à 'block' donc il est inutile de la déclarer.

[jv2759]

Je ne comprend pas trop le probléme, chez moi quand je passe sur ton image, il y as le text qui apparer à coter qu'elle que soit la possition dans la pages est le logo ne bouge pas, il reste toujours au même endroit...

J'ai du mal à voir ce qui ne vas pas...

[SB]

Est-ce seulement possible ? Par définition le a:after doit être après le a. Il n'est pas évident qu'on puisse le balader même avec un position fixed.

[calimo]

Bon, je pense que je vais plutôt utiliser la même technique que pour mon menu... mais quand-même ça m'intrigue.
Pourquoi ne pourrait-on pas ? C'est un bloc comme un autre, et je n'ai rien vu disant le contraire dans les specs

[martin]

http://www.yoyodesign.org/doc/w3c/css2/ ... f-position

S'applique à : tous les éléments, sauf à un contenu généré

Et je trouve aussi que ce n'est pas trés élégant de générer du contenu textuel via css. Un span dans le a avec display none ou block suivant le contexte (et les autres propriétés) me semble plus correct.

Sinon ton site devient de plus en plus "touffu", c'est super chouette .

[calimo]

Ah oui en effet... je n'avais regardé que du côté des after et before où rien de tel n'était écrit !

En fait je préférais faire ça via CSS parce que c'est redondant par rapport au titre du lien et au contenu alternatif, et on dépasse allègrement le nombre de caractères maximal "autorisé" dans un lien (80)... je vais voir comment je peux gérer ça

Merci !

[martin]

nombre de caractères maximal "autorisé" dans un lien (80)...

Hein ! Tu as un lien qui confirme çà, je tombe des nues..

Si c'est vrai, il ya aurait une autre solution, placer le span dans le div #GetFirefox, mais pas dans le <a>, et faire une règle d'enfant adjacent:

Code : Tout sélectionner

#GetFirefox span{
	display: none;
}
#GetFirefox a:hover + span{
	display: block;
}

ou plus simple

Code : Tout sélectionner

#GetFirefox:hover span{
	display: block;
}

Mais c'est pas compris par IE . Or c'est la cible privilégié, non ? Donc poubelle ...

[martin]

Euh, si , pour la 2e solution, il y a un moyen via un hack (par fichier htc), léger. Je m'en sers en ce moment, je pense utiliser une méthode "correcte" de l'inclure, uniquement pour les utilisateurs de IE. Mais bon, c'est vrai que je suis pas chaud pour ces hacks. Plus d'info si çà t'intéresse..

[calimo]

nombre de caractères maximal "autorisé" dans un lien (80)...

Hein ! Tu as un lien qui confirme çà, je tombe des nues..

Non je ne le retrouve plus mais des liens trop longs peuvent poser des problèmes s'ils ne sont pas affichés en entier sur une ligne, surtout dans le cas des plages braille. 80 caractères c'est le contenu d'une ligne.

Cela dit je crois que ce ne serait pas le seul lien dans ce cas-là

Si c'est vrai, il ya aurait une autre solution, placer le span dans le div #GetFirefox, mais pas dans le <a>, et faire une règle d'enfant adjacent:

Code : Tout sélectionner

#GetFirefox span{
	display: none;
}
#GetFirefox a:hover + span{
	display: block;
}

ou plus simple

Code : Tout sélectionner

#GetFirefox:hover span{
	display: block;
}

Mais c'est pas compris par IE . Or c'est la cible privilégié, non ? Donc poubelle ...

Je vais garder le cohérence avec mon menu qui a ses span inclus dans les a.
En théorie IE devrait donc les afficher... mais il ne le fait pas
Question bonus : trouver pourquoi ! (je ne sais vraiment pas, en plus le menu en lui-même est tout moche )

Je connais IE 7 mais il n'est pas question de faire croire aux utilisateurs d'IE qu'ils ont un bon navigateur

[martin]

Je pensais à http://www.xs4all.nl/~peterned/csshover.html, beaucoup plus léger que IE7 (puisqu'il corrige que le hover), mais que personnellement j'intègre d'une manière similaire à celle proposé par IE7.

mais il n'est pas question de faire croire aux utilisateurs d'IE qu'ils ont un bon navigateur

Ok, je ne vais pas insisté, de toute façon je l'ai dit, je ne suis pas trés chaud pour ces trucs ...(même ci actuellement je m'en sers).

En théorie IE devrait donc les afficher... mais il ne le fait pas

Désolé, je viens d'aller voir avec IE, impossible de changer de feuille de style, seule celle par défaut marche. Dès que je change, je me retrouve sans feuille de style, et impossible de revenir à celle par défaut tant que je ne ferme pas IE, et que je le réouvre...

[calimo]

Oui je sais qu'il a de la peine avec mes importations... mais avec la feuille par défaut (sur laquelle tu pourrait revenir depuis n'importe quelle autre normalement ), le texte ne s'affiche pas

[martin]

effectivement, çà marche pas

Et la solution est

rajoute à ta css :

Code : Tout sélectionner

#GetFirefox a:hover{
background:white;
}

Logique ? Ben non, mais çà marche.

http://www.tanfa.co.uk/css/articles/pur ... ps-bug.asp

[calimo]

Excellent ! Incroyable ! Je me demande comment le gars à trouvé ça
Par contre, j'ai été obligé de mettre un hack à la position fixe (parce que le texte s'affichait au-dessous)... du coup en position absolute, dieu sait où le texte s'affiche
Mais il s'affiche c'est déjà ça de gagné

[SB]

Ben chez moi il s'affiche trop haut. Firefox disparait sous le menu.