28198 sujets
CSS et mise en forme, CSS3
Hello Sam
,
si l'UA les implémente (ce qui n'est pas le cas d'IE) on peut effectivement générer du code html à l'aide des pseudo-éléments :before et :after associés à la propriété content.
A noter qu'il ne faudrait pas pour autant perdre tout l'intérêt de la séparation du contenu (html) et de la présentation (css) ! Lire à ce sujet cet article de Blog & Blues.
A+
Modifié par Heyoan (18 Aug 2008 - 05:35)

si l'UA les implémente (ce qui n'est pas le cas d'IE) on peut effectivement générer du code html à l'aide des pseudo-éléments :before et :after associés à la propriété content.
A noter qu'il ne faudrait pas pour autant perdre tout l'intérêt de la séparation du contenu (html) et de la présentation (css) ! Lire à ce sujet cet article de Blog & Blues.
A+
Modifié par Heyoan (18 Aug 2008 - 05:35)
Salut,
je pense que yellowmonkey faisait allusion au fait qu'opera 9.5 implémente déjà certaines propriétés de CSS3 et notamment :
A+
Edit: voir également cette page.
Modifié par Heyoan (18 Aug 2008 - 12:38)
je pense que yellowmonkey faisait allusion au fait qu'opera 9.5 implémente déjà certaines propriétés de CSS3 et notamment :
a écrit :
# content applicable on all elements, not just on the :before and :after pseudo-elements
A+
Edit: voir également cette page.
Modifié par Heyoan (18 Aug 2008 - 12:38)
Bonjour,
Tout d'abord, merci pour vos réponses
J'ai lu les liens que vous m'avez fourni, et je dois avouer que c'est un peu complexe
Si j'ai bien compris, si je fais :
Cela affichera "Texte à afficher" après le saut de ligne ?
Merci !
Sam
Tout d'abord, merci pour vos réponses

J'ai lu les liens que vous m'avez fourni, et je dois avouer que c'est un peu complexe

Si j'ai bien compris, si je fais :
<head>
<style>
br.texte:after
{
content: "Texte à afficher";
}
</style>
</head>
<body>
<p> bla bla bla </p>
<br class="texte />
Cela affichera "Texte à afficher" après le saut de ligne ?
Merci !
Sam
sam_1421 a écrit :Le mieux est de faire des tests !
Cela affichera "Texte à afficher" après le saut de ligne ?

Comme je ne m'en sers jamais je ne suis pas le mieux placé pour te renseigner mais quoi qu'il en soit ça ne fonctionne pas avec BR. Peut-être parce que cet élément n'est pas fait pour contenir du texte.
Un exemple qui fonctionne avec FF2 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!--
p.note:before { content: "Du texte avant... " }
p.note:after { content: " ...Et encore du texte." }
-->
</style>
</head>
<body>
<p class="note">Blabla</p>
</body>
</html>
Modifié par Heyoan (18 Aug 2008 - 22:45)
Je t'invite à utiliser l'extension Firebug. Elle me permet de te répondre sans le moindre doute que c'est bien à l'intérieur de l'élément.
