[xhtml/css] Twee background-plaatjes in één div

[oscarvdb]

Ik wil het volgende realiseren:


En dan wel in XHTML 1.0 Transitional met CSS.

Het blauwe kan ik simpelweg een container maken met wat padding. Ik dacht eraan om de aanhalingstekens in een container buiten containerA te gooien, met een iets grote width en height. Nu kan je niet twee achtergrondplaatjes in één div gooien. Nu dacht ik slim te zijn door nóg een div eromheen te gooien, dan heb je er eentje voor elke set aanhalingstekens. Het lukt me maar niet twee divs over elkaar heen te zetten. Wat doe ik fout? Kan dat überhaupt wel?

[Verwijderd]

en anders 3 divs ?

div met plaatje 1
div met tekst
div met plaatje 2

En wat is er in dit geval mis met aan table ?

[Verwijderd]

A list apart heeft daar net een mooi artikel over uitgegeven:
http://www.alistapart.com/articles/mountaintop/

[oscarvdb]

Verwijderd schreef op 05 mei 2004 @ 14:57:

En wat is er in dit geval mis met aan table ?

Tables zijn niet echt bedoeld voor layout-issues, meer voor tabulaire data. Ik houd me liever even aan de regeltjes cq richtlijnen van w3c.

[faabman]

is het de bedoeling dat het achtgrondplaatje meeschaald? zoniet dan geef je je div gewoon een transparant achtergrondplaatje en een achtergrondkleur mee....

[oscarvdb]

faabman schreef op 05 mei 2004 @ 15:01:
is het de bedoeling dat het achtgrondplaatje meeschaald? zoniet dan geef je je div gewoon een transparant achtergrondplaatje en een achtergrondkleur mee....

Het blauwe vak moet uiteraard meeschalen met de inhoud. De aanhalingstekens moeten dezelfde grootte houden.

[disjfa]

Cascading Stylesheet:

div{
   background:transperant url('url') no-repeat top right;
}
div p{
   background:transperant url('url') no-repeat bottom left;
}

HTML:

<div>
 <p>
 </p>
</div>

Voila.

edit:
ik ben wel weer een spuit 11 hier geloof ik verder, maarja

[ Voor 27% gewijzigd door disjfa op 05-05-2004 15:11 ]

[Bosmonster]

Je kunt een div nemen met de achtergrond (blauw) en gewoon twee plaatjes boven en onder neerzetten.

Andere mogelijkheid (maar beetje nutteloos in dit geval) is 3 geneste divs met eentje een achtergrond plaatje bovenuitgelijnd, eentje met een achtergrond onder uitgelijnd en eentje met de herhalende achtergrond. Dit is eigenlijk alleen nodig als de tekst over alle 3 de achtergronden heen moet vallen.

Je gaat in ieder geval meer dan 1 element nodig hebben

[oscarvdb]

Ik heb nu dit:
http://oscarvdb.nl/zooi/citaat.htm

(zie source).

Ik krijg die aanhalingstekens alleen niet over het blauwe heen. Dan toch maar met img werken? Of kan het ook met CSS? Dat heeft dan namelijk wel de voorkeur.

[Verwijderd]

BLOCKQUOTE gebruik je voor 'block' citaten . In BLOCKQUOTE moet sowieso 1 P. Als je dat combineert met 'padding', 'margin' en 'background' moet het lukken denk ik.

[oscarvdb]

Verwijderd schreef op 05 mei 2004 @ 16:41:
BLOCKQUOTE gebruik je voor 'block' citaten . In BLOCKQUOTE moet sowieso 1 P. Als je dat combineert met 'padding', 'margin' en 'background' moet het lukken denk ik.

Ah ok, zal eens met blockquote aan de gang gaan.

Volgens mij heb je dan trouwens nog steeds het probleem dat zowiezo één van de plaatjes dan 'over' het onderliggende element moet vallen, omdat die aanhalingstekens er anders onder liggen. Of heb ik het nu fout?

[Verwijderd]

Beetje

Stel je zoiets voor:

code:

blockquote{
 background:lime url(66.gif);
}
blockquote p.last{
 background:url(99.gif);
}

Dan moet je het natuurlijk nog wel even op de juiste plek zetten. Wat margin gebruiken etc. Maar het zal perfect werken hoor. Hiervoor zijn trouwens al diverse dingen uitgewerkt, wellicht dat je kant en klare dingen kunt vinden op Google

[Blaise]

http://media.zopp.nl/Citaten.htm
Het werkt in IE6 en Firefox, verder nog niet getest.

edit:

Dan moet je het natuurlijk nog wel even op de juiste plek zetten.

Dat lukt niet (denk ik ), want hij wil de quotes iets over de <p> heen en je kan niet van een geneste tag met een achtergrondkleur verwachten dat dat quote-plaatje er doorheen komt.

[ Voor 62% gewijzigd door Blaise op 05-05-2004 17:00 ]

[Verwijderd]

Argh je hebt gelijk.

* Anne slaat IE voor het niet ondersteunen van ::before en ::after

[oscarvdb]

Verwijderd schreef op 05 mei 2004 @ 17:07:
Argh je hebt gelijk.

* Anne slaat IE voor het niet ondersteunen van ::before en ::after

Blaise schreef op 05 mei 2004 @ 16:58:
http://media.zopp.nl/Citaten.htm
Het werkt in IE6 en Firefox, verder nog niet getest.

Ik heb even verder getest, alleen IE5.2 in Mac doet raar. Opera, FF, Safari, IE5, IE6, alles (bijna alles dus) werkt perfect.

Het ziet er goed uit. Even de code bestuderen, dan steek ik er ook nog wat van op

Bedankt!