[CSS] 1 div met tekst maar 2 backgrounds

[Verwijderd]

Ik zit even met het volgende probleem.
Ik heb aan de linkerkant van mijn site een div met tekst, de hoogte past automatisch aan aan de inhoud.
Nu moet die een background-image hebben die zich naar beneden toe herhaalt.
Aan de bovenkant van de div moet echter ook een background-image komen die zich niet herhaalt.

Iemand een idee hoe je dit het best kunt oplossen?

[TXC]

2 DIV's in de hoofddiv zetten. De bovenste met background-repeat : none en de onderste met background-repeat : y; En als je geen float opgeeft komen ze automatisch onder elkaar..

Je kunt voor zover ik weet niet 2 backgrounds assigenen aan 1 en dezelfde div en dan voor verticale secties ofzo.

edit:
hmm.. wacht ik snap geloof ik het probleem, met dynamische data loopt je tekst dan niet va de ene div door in de andere..

[ Voor 21% gewijzigd door TXC op 01-08-2005 13:24 ]

[Kayz]

Txc was eerder en beschreef het beter

Maar waarom zou je dit willen doen? Misschien kan het ook op een andere eenvoudigere manier?

[ Voor 189% gewijzigd door Kayz op 01-08-2005 13:25 ]

[Verwijderd]

de tekst moet idd kunnen doorlopen.. dus dan zou je er met z-index een div overheen moeten zetten?
weet niet of dit mogelijk is.. je krijgt dan waarschijnlijk een hoogte probleem van de divjes

ik heb dit nodig voor de layout van mijn website, anders kan het namelijk niet..

[Zoefff]

Je kan 2 divs op elkaar zetten, waarbij je 1 div een vaste afmeting geeft en het bovenste achtergondplaatje geeft, en de andere div geen afmetingen zodat hij uitgerekt kan worden door de tekst, met de herhalende achtergond. Zorg wel dat je die achtergrond x pixels naar beneden zet, zodat de achtergrond van de onderliggende div nog zichtbaar is.

Maar, is er geen mogelijkheid om een ander bestaand element (zodat je niet die extra div hoeft toe te voegen) een achtergrond te geven?

Misschien heb je een voorbeeldje of ontwerpje voor ons?

[Verwijderd]

Kun je niet het plaatje wat je bovenaan wilt als border-top opgeven? En dan de tekst in de div een negatieve relatieve positie meegeven?

[Verwijderd]

dit is ongeveer de basic layout van de website:



onder het oranje vlak is nog een gedeelte waarbij je de achtergrond van het blauwe er licht doorheen ziet. dat is in feite het bovenste divje. daaronder is het gewoon wit en kan het herhalen..

[Zoefff]

Dat kan je imho beter oplossen met een transparante PNG, en voor IE een workaround gebruiken zodat het daar ook in werkt: http://homepage.ntlworld.com/bobosola/ .

Of anders inderdaad de kolom in 2en splitsen, boven en onder.

[Verwijderd]

Thx! Ik heb het opgelost met transparante PNG. Voor IE een png hack toegepast. Werkt nu prima!

[edwinistrator]

werkt niet in IE5.01 wel weer in IE5.5

[Zoefff]

Maar het percentage mensen dat 5.01 nog gebruikt is behoorlijk laag. Op een gegeven moment vind ik dat mensen maar gewoon moeten upgraden of een beter alternatief moeten gebruiken, ik ga er in ieder geval geen rekening meer mee houden. Bovendien is het ivm beveiligings-issues ook reuze verstandig om te upgraden

[Verwijderd]

Was ik even zo blij dat het eindelijk werkte met die png hack, blijkt nu dat ik niet meer op bijvoorbeeld linkjes kan klikken

Met Tab kun je nog wel gewoon naar de linkjes toe, maar met de muis is het niet meer aanklikbaar..
heb al met z-index zitten spelen, maar dat wil ook maar niet helpen..

Nu ben ik de oplossing van zoefff om 2 divjes over elkaar heen te zetten maar gaan proberen. Ik heb nu de volgende css code:

Cascading Stylesheet:

#topcolumn
{
    width: 210px;
    height: 18px;
    position: relative;
    top: 0px;
}

#midcolumn
{
    position: relative;
    width: 210px;
    height: 222px;  
    background-image: url(../images/leftcolumn.png);
    background-repeat: no-repeat;
    background-position: 0px 1px;
}

#midcolumn_repeater
{
    position: relative; 
    top: -222px;
    width: 210px;
    padding-left: 10px; 
    background-image: url(../images/leftcolumn_repeater.gif);
    background-repeat: repeat-y;
    background-position: 0px 222px;
    z-index: 2;
}

in de #midcolumn doet ie de backgrounp-position wel goed.. hij schuift 1 px op naar onderen (beetje vaag maar daar gaat het niet om)

gek genoeg wil de background-position van de #midcolumn_repeater echter niet 222px naar beneden opschuiven rarara wat doe ik fout!!?

[ Voor 57% gewijzigd door Verwijderd op 03-08-2005 21:09 ]

[Verwijderd]

als ik de eerste value bijv 10px maak ipv 0px dan schuift de background wel keurig 10px op naar rechts.. maar naar beneden toe wil het maar niet lukken...