[résolu] Positionement de contenu généré (:before, content: url(...);)

Salut à tous

Un petit soucis m'amène, je chercher à positioner un contenu généré via CSS et la propriété content en parallèle de :before

Il me semblait que l'on pouvait positioner (marge négatives, positionement absolue...) ces éléments, il semble pourtant que non avec les tests que j'ai effectué :

div#contenu pre:before
{
	content: url(design/code.png);
	position: relative;
	top: -21px;
/* margin-top: -21px; */
}

div#contenu pre
{
	overflow: auto;
	width: 550px;
	max-height: 200px;
	margin: 10px;
	border: 1px solid #bbb;
	background: #fff;
}

Ca ne fonctionne pas mon image reste callée à l'intérieur de mon <pre>
J'aimerais qu'elle passe juste au dessus.
Possible ?
Modifié par Olivier (24 Jul 2005 - 22:38)

Il y'a plusieurs propriétés de positionnement qui ne fonctionnent pas avec le contenu généré.
Il me semble également qu'il faille déclarer le contenu en block pour le positionner (peut-être une grosse bêtise que je dis là)

Slt,

j'ai eu un peu près le même problème (sauf qu'il s'agissait de texte pour moi) il y a quelques moments et d'après mes recherches, il n'y a pas de solutions .
Explications :
ce que tu veux faire, c'est faire sortir le contenu généré de ton bloc. Tu peux essayer pleins de propriétés, tu n'y arriveras pas.
Il y a avait en CSS2 une valeur de display qui était "marker". Elle servait à faire sortir du contenu généré d'un bloc, en le plaçant avant ou après. Malheureusement, elle n'est pas présente dans la spécification CSS2.1 et n'est pas gérée par Firefox.
Le pire, c'est qu'apparemment, elle n'est pas réintroduite avec CSS3.

J'espère vraiment me tromper car j'aimerais vraiment faire sortir mon contenu généré...

a+

EDIT : la spec
Modifié par SirWam (24 Jul 2005 - 22:22)

Avec le display: block; dans le contenu généré, je peux en effet utiliser margin-top: -21px; ça décalle bien l'image vers le haut.
Seul soucis, ça le décalle comme un background, à savoir que lorsque c'est hors des limites de ma balise <pre> et bien on ne le voit plus

Moi qui pensait qu'avec :before le contenu serait placé avant la balise

<edit>

SirWam a écrit :

il n'y a pas de solutions .

Mwarf, tu me déprimes
Je vais donc être obligé de générer ce contenu purement visuel avec JavaScript
</edit>

<edit2>
Ahh bah vui, c'est clair et net là :

La vilaine méchante Spec a écrit :

On crée un marqueur en spécifiant la valeur 'marker' à la propriété 'display' dans un pseudo-élément :before ou :after. Alors que les contenus de ces pseudo-éléments, ayant les valeurs 'block' et 'inline', font partie de la boîte principale générée par l'élément, un contenu avec la valeur 'marker' est mis en forme dans une boîte indépendante, en dehors de la boîte principale.

</edit2>
Modifié par Olivier (24 Jul 2005 - 22:25)

Ce qui t'empêche de placer ton contenu généré de manière visible au dessus de ton <pre>, c'est l'overflow:auto de celui-ci : le contenu généré se comporte un élément enfant du <pre>. Il ne peut donc apparaître au dessus de ton élément <pre> que si celui-ci a un overflow:visible;

Ahh oui en effet !
L'explication de Laurent est vérifiée (qui en doutait !)

Bon... et bien je me vois mal me passer de l'overflow dans mon cas, je vais donc passer par JavaScript pour placer le bidule !

Merci pour les infos

Mwarf, j'ai pas la possibilité de gérer ça via JS ne pouvant pas déterminer le chemin vers l'image ...

Snif

Je vais peut être dire une bêtise mais je ne vois pas trop le problème.

Qu'est ce qui empêche de coder le html comme suit :

<div id="contenu">
<div id="conteneur_pre">
<pre>...</pre>
</div>
</div>

et du coup css =

div#contenu div#conteneur_pre:before
{
content: url(design/code.png);
position: relative;
top: -21px;
/* margin-top: -21px; */
}

div#contenu div#conteneur_pre
{
width: 550px;
max-height: 200px;
margin: 10px;
border: 1px solid #bbb;
background: #fff;
}

div#contenu div#conteneur_pre pre
{
width: 100%;
height: 100%;
overflow:auto;
}

Modifié par clb56 (25 Jul 2005 - 07:51)

clb56 > rien ne l'empeche, c'est en fait ce que je projette d'utiliser suite au fait que je ne puisse pas le gérer via JS pour des raisons un peu compliquées

Mais ça m'embettait d'utiliser un <div> inutile juste pour ça.
Enfin pour me consoler, ça fera marcher la mise en forme très simplement et sur tous les navigateurs

Par contre, ça sera <div class="code"><pre class="$langage"> mais ça on s'en fout c'est moi que ça regarde lol

En fait, je sais pas trop comment je vais pouvoir me débrouiller, c'est un <pre> généré par GeSHi (class de coloration syntaxique) et va falloir que je trouve comment ajouter un <div> et je crois que c'est pas si simple snif...

Perso j'ai résolu le problème en déplaçant le contenu d'1.5em vers le bas, mais pas le contenu généré.

++