[CSS] generated content correct plaatsen

[Verwijderd]

ik heb de vogende setup:

HTML:

<blockquote>
  <p>- lap text -</p>
  <p>- lap text -</p>
  <address>- bron -</address>
</blockquote>

nu wil ik de quote omringen door plaatjes van quotation marks (66 en 99 zeg maar) als plaatje, het liefste met CSS, dus met generated content. Boeit me niks dat het niet werkt in IE.

Ik heb dus:

Cascading Stylesheet:

blockquote p:first-child:before {
  content: url('quote_66.gif');
}

dit komt nu heel mooi inline voor de eerste <p>. En dat wil ik ook na de laatste (ook inline)

mijn allereerste poging was overigens:

Cascading Stylesheet:

blockquote:before {content: url('quote_66.gif')}
blockquote:after {content: url('quote_99.gif')}

probleem hiermee is dat de <p>'s blockelementen zijn en die quotes dus niet inline worden vertoond. Een oplossing met display: run-in; zou alleen voor de eerste werken en dat heb ik eigenlijk al opgelost.

Iemand slimme ideeen?

[Rowanov]

Deze link heb ik gevonden:
http://simon.incutio.com/.../05/21/stylingBlockquotes

[Verwijderd]

Dit weet je:

code:

<p><::before/>Normal content<::after/></p>

... of niet?

[Verwijderd]

Bij mij werkt het prima, kun je een screenshot posten van je probleem of meer code?

[AkaXakA]

probleem is dat before en after niet werken in IE zonder hulp*

*IE7 css3 javascript lib dus.

[Verwijderd]

AkaXakA schreef op 03 november 2004 @ 14:41:
probleem is dat before en after niet werken in IE zonder hulp*

*IE7 css3 javascript lib dus.

Verwijderd schreef op 03 november 2004 @ 13:34:
Boeit me niks dat het niet werkt in IE.

[Verwijderd]

Rowanov schreef op 03 november 2004 @ 13:42:
Deze link heb ik gevonden:
http://simon.incutio.com/.../05/21/stylingBlockquotes

daar ben ik er niet mee. Bovendien is dit een beetje raar voorbeeld imho, die div had gewoon een p moeten zijn. Verder wel een aardige truc om van 2 elementen gebruik te maken, maar ik zoek een inline oplossing

Verwijderd schreef op 03 november 2004 @ 13:42:
Dit weet je:

code:

<p><::before/>Normal content<::after/></p>

... of niet?

eehm nee wat bedoel je daarmee?

verder: before en after werkt wel, maar da's niet inline omdat ze door die p's blockelementen zijn.

zal even een voorbeeld bouwen...
http://www.rikkertkoppes.com/tests/blockquote.htm

[ Voor 17% gewijzigd door Verwijderd op 03-11-2004 17:30 ]

[Verwijderd]

Dat de "elementen" die je genereert binnen het P element vallen en niet "ervoor" en "erachter" wat je wellicht zou kunnen denken door de naamgeving.

[Verwijderd]

Anne: ja dat weet ik, maar dat lost m'n probleem niet op
heb even een voorbeeld online gezet, zie edit hierboven

[Verwijderd]

Als je hier

Cascading Stylesheet:

blockquote.emp2 p:last-child:after {
    content: url('../images/blockquote_99.gif');
}

aan toevoegt ben je toch klaar?

[MBV]

als jouw probleem is dat een <p> niet inline is, dan maak je hem toch inline? dat kan toch met CSS?
Daarnaast, als je zo gebrand bent op nette html, dan zou ik eens gaan kijken naar xhtml. Dan moet je wat netter werken, en zorgt ervoor dat je pagina er in mozilla wat sneller mooi uitziet (nu IE nog...)

[Verwijderd]

klets
nette html kan ook in html 4, sterker nog, da's netter en het maakt geen fluit uit voor je layout

@Blues :last-child is zit niet in css 2.1, maar het werkt wel ik had dat nog helemaal niet geprobeerd ervan uitgaande dat niet zo werken. Lost het wel op idd

ownee, want na de laatste <p> komt (soms) nog een <address>, dus hij is niet de laatste child. CSS3 last-of-type is wel leuk, maar ja...

Wat zeggen jullie ervan als ik die <address> na de <blockquote> doe. Voor m'n gevoel hoort ie erin, maar als ik aan de andere kant naar <q> en <cite> kijk zet ik die ook vaak na elkaar.

[ Voor 60% gewijzigd door Verwijderd op 03-11-2004 18:06 ]

[Verwijderd]

blockquote+address lijkt me geen goed idee. Tenzij je ze op een of andere manier toch nog gaat groeperen. Erin lijkt me beter. Merk op dat CITE verschilt van ADDRESS als je het op deze manier gebruikt. De relatie tussen BLOCKQUOTE en ADDRESS is, mits ADDRESS is genest, is dat ADDRESS de locatie aangeeft waar het citaat vandaan komt. CITE wordt echter gebruikt om aan te geven welk persoon dit heeft gezegd. Bijvoorbeeld:

code:

<cite>Anne</cite> zei laatst: <q><abbr>XHTML</abbr> heeft enkel nadelen als het verzonden wordt als <code>text/html</code>.</q>

[Verwijderd]

cite kan ook best een locatie aangeven, als we even de definities naast elkaar leggen:

CITE: Contains a citation or a reference to other sources.

The ADDRESS element may be used by authors to supply contact information for a document or a major part of a document such as a form. This element often appears at the beginning or end of a document.

dus zo heel veel verschil zie ik er niet tussen als het om een referentie naard e auteur van een gequote stuk tekst (blockquote of q) gaat.

Dan nog ben ik het met je eens dat address eigenlijk in de blockquote hoort, want op deze manier worden ze semantisch verbonden. Maar zoals je gezien hebt levert dat een probleem op met styling, dat ik op zou kunnen lossen door ze na elkaar te gebruiken. De verbinding is nu wat minder sterk maar nog steeds wel aanwezig imho (net zoals een h1 kop is voor de elementen die erna komen)