28217 sujets

CSS et mise en forme, CSS3

Faire un contour de texte avec Hack "IE7"

Bonjour tout le monde !!

J'aimerais faire un contour de texte comme indiqué ici mais avec le Hack IE7.
Le problème c'est qu'il y'a le script que pour l'ombre et pas pour le contour. Smiley bawling
Quelqu'un peut me l'arranger pour faire un contour ??

Merci !
pihug12 Smiley langue
Modifié par pihug12 (16 Oct 2005 - 17:05)
Bonjour,

Extrait des règles du forum:
Aide/Règles a écrit :
16- Ceci est une communauté d'entraide, pas de travail à votre place
Ce forum a pour vocation d'échanger des connaissances. Les membres ne sont pas là pour faire le travail à votre place. Il est donc inutile de demander des scripts tout faits, des codes à faire pour vous. On vous donnera les moyens d'y parvenir vous-même, sans vous apporter le code sur un plateau d'argent.

Smiley cligne
J'approuve le règlement du forum, mais j'aimerais que vous m'aiguillez un petit peu pour que je puisse faire ca moi même.
Je débute en CSS et je trouve ce script trés complèxe mais interessant.
Si vous pouviez juste me dire quoi changer pour faire un contour ca serait vraiment suberbe. Smiley biggrin

Je vous remercie d'avance.
pihug12 Smiley langue
Vu les règles du forum n'autorise pas qu'un membre me fasse le script, pouvez-vous me conseiller un forum où l'on pourrait me le faire ??

Merci de me répondre !
pihug12 Smiley murf
Modifié par pihug12 (05 Nov 2005 - 15:44)
Dites-moi juste le nom d'un forum où ils pourrait me le faire rapidement.
Je suis sur que ca ne prend pas de temps quand on est expérimenté dans la chose.

Moi je suis un débutant total et je suis incapable de faire ca tout seul même en avalant des tonnes de tutoriels et de livres..... Smiley decu

+++
pihug12 Smiley langue
Prends un peu ton mal en patience, et surtout evites de faire trop de post, car on croit que ce sujet à beaucoup de réponse Smiley cligne .
Je regarde ce que je peux faire, si j'ai le temps Smiley confus

Tu dis Hack IE 7 ? de quel hack s'agit t'il ?

Pour faire un contour et non qu'un ombre, il suffit que la police de derrière soit plus grande.
Modifié par Super_baloo8 (06 Nov 2005 - 07:04)
J'ai un peu de mal à comprendre ton problème, car la première méthode marche chez moi sur Firefox et IE (FF1.0.7 et IE6SP2). Par contre, effectivement l'emploi de la pseudo-class after n'est pas supporté par IE (on ne voit que le texte gris (pas l'ombre rouge). J'ai regardé la page de Dean Edwards et je n'ai même pas trouvé le hack, j'ai l'impression qu'il s'agit d'un plugin IE7 en version beta, me trompe je ?

Si j'étais toi, en première urgence et en attendant une soluce via le hack, j'implémenterai la première solution (bidouille, comme le dit Raphael, mais qui fonctionne sur IE)

2 petites notes pour les collègues :
- Super_Baloo, je ne pense pas que jouer sur la taille de la police soit une solution, car en dehors du premier caractère tous le texte sera décalé, si je ne m'abuse
- Raphael, pas cool les couleurs des exemples (ombre jaune sous texte rouge) sur le moment j'ai cru à une blague ou que j'étais devenu daltonien (cela me rappelle d'autre post) Smiley cligne . J'ai du passer l'ombre en noir pour voir l'effet désiré (il était 1h00 du mat, j'ai des excuses) Smiley smile
Modifié par Merlin (06 Nov 2005 - 11:11)
Bonjour tout le monde !

Super_baloo8 a écrit :
Tu dis Hack IE 7 ? de quel hack s'agit t'il ?

Merlin a écrit :
J'ai regardé la page de Dean Edwards et je n'ai même pas trouvé le hack, j'ai l'impression qu'il s'agit d'un plugin IE7 en version beta, me trompe je ?

Non non ! Il s'agit de fichiers que l'on doit upload sur le serveur.
Ensuite il faut faire appel à ce hack grâce à ce script :
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script src="/ie7/ie7-standard-p.js" type="text/javascript">
</script>
<![endif]-->

(en adaptant bien sur le répertoire)
Le descriptif de l'installation est disponible ici sur la page de Dean Edwards. Smiley cligne

Merlin a écrit :
J'ai un peu de mal à comprendre ton problème, car la première méthode marche chez moi sur Firefox et IE (FF1.0.7 et IE6SP2).

Je crois que je vais me rabattre sur cette solution "de bidouillage" le temps que je trouve le script avec l'emploi de la pseudo-class after.

Merci de m'avoir répondu !
pihug12 Smiley langue
Modifié par pihug12 (06 Nov 2005 - 13:13)
Qu'est-ce-que je rame aujourd'hui ....

Merci pihug12 de tes explications, j'ai téléchargé tout le bazard et ai pu tester le fonctionnement que tu décrits. Je suis donc maintenant en ligne avec toi et vais tenter de trouver une soluce. Tenter seulement, car je suis plutôt débutant. Mais bon, c'est comme cela que l'on apprend Smiley smile
Bon, pour avoir un contour, le style devrait ressembler à cela:
<!--
h1 {
	font: bold 25px/25px verdana, sans-serif;
	text-align:center;
	color: gray;
}

h1:before {
	display: block;
	color: green;
	margin-left: -4px;
	margin-bottom: -24px;
	content: attr(title);
}

h1:after {
	display: block;
	margin-left: -2px;
	margin-top: -26px;
	color: red;
	content: attr(title);
}


En fait, on ajoute la pseudo-classe :before et on règle le tout.

Par contre, il y a un super-inconvénient à cette solution, si on utilise la loupe (+ ou -), sous FF par exemple on a plus une ombre agrandie, mais n'importe quoi, le rouge se retrouve au-dessous des 2 gris ou le contraire, bref pas cool du tout.

Moi j'arrête là, mais si quelqu'un a mieux, je serai aussi preneur
Modifié par Merlin (06 Nov 2005 - 18:38)
Merci bien pour ton script !!

J'attend un peu que quelques-uns proposent des améliorations sinon j'utiliserais surement le tien.

Merci beaucoup !
pihug12 Smiley langue
Bonjour tout le monde !!

J'ai deux questions pour le script que propose Merlin :
1- C'est pas plus logique d'utiliser deux fois la pseudo-classe:after ?? (en essayer de comprendre comme marcher le contour avec les span j'ai constaté que les span fonctionnait tout les deux "aprés" ou alors j'ai mal compris...)
2- J'aimeriais mettre ce contour dans un menu déroulant. Or ca ne fonctionne pas avec un h1. Le concepteur du menu m'a donc indiqué sur son forum d'utiliser .menu:after.
Ensuite il s'est aperçu que c'était le "attr(title)" qui fait planter.
Et il m'a sorti un code un peu tiré par les cheuveux (c'est lui qui le dit Smiley lol ) :
#menu1 a:after {
display: block;
margin-left: -2px;
margin-top: -13px;
color: black;
content: "le texte du lien";
}

Vu que j'ai 3 menus comme ca je susi obligé de mettre 3 fois ce code.
Il y'a t'il un moyen d'éviter ce bug ??

Merci à ce qui vont me répondre !
pihug12 Smiley langue


Modifié par pihug12 (11 Nov 2005 - 19:15)
Sujet clos
Aller à