[css] :before absoluut positioneren

[Verwijderd]

note voordat we beginnen: werkt niet in IE, maar dat boeit me niet

ik heb de volgende opzet:

HTML:

<p class="comment"><span class="before"></span>bult tekst<span class="after"></span></p>

en daar wil ik graag blokhaken omheen ([ en ], maar dan zo groot dat ze het hele block omvatten). mijn idee was om de :before en :after pseudoelementen aan 3 kanten een border te geven, hoogte 100%, breedte 4px ofzo en dan absoluut positioneren links en rechts. En dat gaat dus niet

Als ik ipv die :before en :after 2 (lege) spans gebruik die ik vooraan en achteraan in m'n code duw, dan doet ie het wel, precies zoals verwacht.

Vraag is dus: waarom kan ik die pseudoelementen niet absoluut positioneren?

Cascading Stylesheet:

/*werkt niet*/
.comment:before {
border: 1px solid #999999;
border-width: 1px 0px 1px 2px;
width: 3px;
height: 100%;
position: absolute;
top: 0px;
left: -6px;
}
/* werkt wel */
.comment .before {
border: 1px solid #999999;
border-width: 1px 0px 1px 2px;
width: 3px;
height: 100%;
position: absolute;
top: 0px;
left: -6px;
}

[Clay]

Ik geloof dat er in de CSS2.1 spec expliciet stond dat absolute niet mag werken voor generated content met :before en :after. In CSS3 mag het weer wel. Opera doet het b.v. gewoon wel, maar moz idd niet.

[edit]

't is nog mooier. In CSS2 mag het niet:

User agents must ignore the following properties with :before and :after pseudo-elements: 'position', 'float', list properties, and table properties.

Maar in CSS2.1 en CSS3 wordt dat niet meer vermeld, en zou je dus aan mogen nemen dat het moet werken.

[ Voor 58% gewijzigd door Clay op 11-01-2005 21:06 ]

[Verwijderd]

Er is een bug in Mozilla betreffende dit probleem. Opera ondersteund het inderdaad.

[Verwijderd]

hmz, bijzonder jammer allemaal, net ff met Clay zitten babbelen, maar die 100% hoogte die erin staat werkt ook niet omdat de parent geen explicite hoogte heeft (die haak moest de hoogte van de hele p krijgen. Dit werkt in FF overigens wel. Samenvatting

- in FF krijgt ie de hoogte van de p, maar absoluut positioneren wil niet
- in opera werkt absoluut positioneren wel, maar de hoogte blijft 1 lineheight
- in IE werkt niks (maar dat wisten we al )

en ik wil dus graag een oplossing zonder extra elementen (is netter, maar ook in het kader van het CMS, waar ik gewoon xhtml in typ, dan wil ik geen onnodige elementen typen)

heb al zitten denken over een of andere oplossing met een border en een background-image, maar daar kwam ik ook niet echt ver mee.

[Verwijderd]

zo, update,

ik wilde toch graag m'n haken, dus heb nog even verder zitten denken

- ik heb m'n block een linker en rechter border gegeven en een background-image voor de kleine streepjes aan de onderkant.
- vervolgens wat m'n idee om :first-line een zelfde background-image te geven aan de bovenkant, het mooie hiervan zou zijn dat ik goede kans had dat het ook zou werken in IE

ik had hier alleen 1 dingetje over het hoofd gezien en dat was dat ik die haken toch wel een stukje van de content afwilde: dus padding toegevoegd. Dat hield alleen in dat de background-image van de :first-line niet aansloot (zat een padding tussen)

dit was helaas ook niet op te lossen met een negatieve margin en een eigen padding. Met :before lukte dit echter weer wel.

Verder weigert FF iets van de :before weer te geven als er geen content in staat, dus heb ik er maar een \14 ingezet (spatie). Verder display: block en een hoogte van 1px laat de boel weer mooi aansluiten

werkt in FF en opera en dus net niet in IE, dus daar zet ik de boel wel helemaal uit in m'n IE stylesheet.

Tenzij iemand nog een briljante ingeving heeft dus.

Een voorbeeld is te zien: http://www.rikkertkoppes.com/?artist/2004/11/01/1

[Verwijderd]

Witruimte opnemen in het plaatje? Alleen repeat-x gebruiken en positioneren? (Ik heb overigens nog niet echt goed gekeken.)

[Verwijderd]

blijkbaar

ik wil dus [ en ] om een heel block, het moet dus oprekken als het block ook langer wordt, breder wordt het niet want de site is fixed width (anders werkte deze truc ook al niet)

het achtergrondplaatje bestaat uit 1px hoog en dan links en rechts een klein streepje, de verticale strepen zijn border

(voor de FF dev toolbar users: heb het nog even in testing.css staan)

edit: tijdens het spelen ontdekt:
dingen als
- p:first-letter:before
- p:first-line:before
- p:before:after

werken helaas ook niet

[ Voor 27% gewijzigd door Verwijderd op 12-01-2005 15:03 ]

[Verwijderd]

Je kunt geen geneste pseudo elementen hebben. Kun je niet met ::before de haken aan de bovenkant maken (background-image, fixed width, fixed height), door middel van een achtergrondplaatje op de box het repeatend gedeetle naar beneden regelen en met ::after het plaatje beneden (bijna hetzelfde als ::before)?

[Verwijderd]

heb ik nu dus ook ongeveer, heb alleen het repeatend gedeelte gewoon met borders gedaan en het onderste stuk met een achtergrondplaatje van de box, op deze manier werken 2 van de 3 dingen in IE

het plaatje boven wilde ik dus met :first-line doen, maar dat ging dus helaas niet, tenminste, ik heb nu nog even geen idee hoe

als ik er niet uitkom doe ik wel boven en onder met :before en :after, dan laat ie in IE alleen maar de 2 borders zien, maar daar moet ik dan maar mee leven

[ Voor 20% gewijzigd door Verwijderd op 12-01-2005 15:16 ]

[Verwijderd]

::first-line een beetje padding-top geven? Of een andere 'line-height' te combineren met 'vertical-align' en een 'background' property?

[ Voor 16% gewijzigd door Verwijderd op 12-01-2005 15:39 ]