[css] border inside/background over border/..?

[r0bert]

Probleem is als volgt.

Ik wil de border van een pagina bijwerken met een bepaald patroon, door het eroverheen te laten vallen (dit patroontje). Nu dacht ik, maak ik gewoon even een border (border: kleur 50px solid) en dan pleur ik daar de achtergrond overheen. Maar toen ik eenmaal aan het schrijven was, bedacht ik me ineens dat ik de achtergrond helemaal niet over de border heen kan leggen ja?

Iemand een idee hoe ik dit op ga lossen? (had al geprobeerd de border te vervangen door een extra element, maar heb ik nog niet zo soepel werkend gekregen)

[André]

Je zult het betreffende element moeten omringen met andere elementen die je een achtergrond geeft.

[r0bert]

Dat heb ik dus geprobeerd, maar krijg ik echt niet voor elkaar..

code:

+---+-----+
| 1 |  2  |
+---+-----+
|   |     |
| 3 |  4  |
|   |     |
+---+-----+

Zo zit mijn pagina in elkaar nu, en de border moet nu dus onder 4 komen, maar rechts naast 3 (niet 'ronder)

4. kan in hoogte verschillen omdat hier de content in geplaatst wordt (wordt dus overflow-y: scroll bij bepaalde hoogte)

2 staat naast in mbv float: left;
zelfde geldt voor 4 naast 3

_{hier staat de pagina}

[ Voor 4% gewijzigd door r0bert op 09-02-2004 16:58 ]

[André]

code:

+---+-+-----+
| 1 | |  2  |
+---+-+-----+
|   | |     |
| 3 |b|  4  |
|   | |     |
+---+-+-----+
|   |b|  b  |
+---+-+-----+

Zo ongeveer?

[r0bert]

code:

+---+-----+
| 1 |  2  |
+---+-----+
| 3 |  4  |
|   +-----+
| b |  b  |
+---+-----+

Zo ongeveer..

[edit]
Kleine toelichting:
- Zoals je op de pagina ook kunt zien, zit de background/border er bij 3 al onderin ingebakken (als normale background -> bottom)
- Nu moet het element 4b (zo noem ik het maar even, dus de background/border die onder 4 komt) aansluiten op de background van 3, over de gehele breedte doorlopen (dus van de linkerkant van element 4, dat is tegen de border 3b aan, tot aan de rechterkant van element 4)

[ Voor 66% gewijzigd door r0bert op 09-02-2004 12:06 ]

[evaarties]

Ik kan je niet helpen, maar wel 1 opmerking:

Je site ziet er in opera 7.21 100% anders uit dan in IE.

[r0bert]

<sup>Kan wel kloppen, heb alleen nog maar met IE gekeken

Oei.. Mozilla springt 'r ook hopeloos mee om</sup>
Maar het probleem blijft sowieso in IE bestaan, iemand?


[edit]
Ik heb het nu ong. zo opgelost:

code:

+----+------+
|+---+-----+|
|| 1 |  2  ||
|+---+-----+|
|| 3 |     ||
||   |  4  ||
||   |     ||
|| b +-----+|
++---+------+

Zoals je ziet, heb ik 2 divjes om de andere heen laten vallen

1 & 3, zitten in DIV-5
2 & 4 zitten in DIV-6

DIV-6 heb ik een achtergrond kleur (kleur van de border) + een achtergrondimage gegeven. Vervolgens heb ik de div uit laten steken (oftewel div 2 & 4 kleiner gemaakt) en nu zie je dus DIV-6, met de goede kleur en achtergrond uitsteken, waardoor het net een border lijkt..

Problem solved.. at last..

[ Voor 123% gewijzigd door r0bert op 09-02-2004 17:04 ]