[HTML/CSS] background vast, text scrollend eroverheen

[sarinsarin]

Wil iets heel eenvoudigs, de search al helemaal doorgespit, maar het lukt me maar niet.
Ik wil heel simpel in een kolom van een tabel, een background hebben die vaststaat (geen probleem) en dan de text die erover komt, dat die als die langer is dan de background, er met een scrollbar overheen scrollt.

Ik heb in css:

Cascading Stylesheet:

.tdbg {
    background-image: url(monocompilatie_totaal_breed_2.jpg);
    background-repeat: no-repeat;   
    
}

en in html:

code:

 <td colspan="2" class="tdbg">
    
    blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat

Nu is zo dat als de text blaat blaat langer is dan de achterground, er geen scrollbar komt maar er onder de achtergrond nog
blaat

blaat

blaat staat. En ik wil dus dat er dan een scrollbar komt en het beeld niet langer wordt dan mijn achtergrond.
attachment :scroll of fixed mag ook niet baten

[ Voor 23% gewijzigd door sarinsarin op 16-06-2005 18:37 ]

[Rowanov]

Cascading Stylesheet:

background-attachment: fixed;

en

Cascading Stylesheet:

overflow: scroll;

edit:
Dan wel natuurlijk een height opgeven aan je cel

[ Voor 26% gewijzigd door Rowanov op 16-06-2005 14:50 ]

[André]

Zoek eens over overflow-y en je zult vinden hoe je iets een vaste hoogte geeft waardoor bij langere content er een scrollbalk zal komen.

[sarinsarin]

@ rowanov:

in css

Cascading Stylesheet:

.tdbg {
    background-image: url(monocompilatie_totaal_breed_2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: scroll;   
    
}

werkt niet iig. Of moet de overflow buiten de .tdbg class dan?

[ Voor 4% gewijzigd door sarinsarin op 16-06-2005 18:38 ]

[André]

Zo je code blokken tussen [code][/code] kunnen zetten

En heb je nu al gezocht? Hier zijn legio voorbeelden over te vinden.

[Rowanov]

Heb je ook een online testcase? Ik kan zo wel verder gaan raden, maar daar wordt niemand blij van.
Als je wilt weten wat de overflow precies doet: http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow

Je moet dus wel je td een height geven.

[ Voor 1% gewijzigd door Rowanov op 16-06-2005 14:53 . Reden: typ handicap ]

[sarinsarin]

shit moet nu nog weg ook ineens...
tnx voor de tips, ik ga vandaag hier zeker nog naar zoeken en zal dr wel uit komen

[Rowanov]

Misschien ook handig om gelijk hier even te kijken want ik krijg sterk het idee dat je je tabellen voor layout gebruikt.

[sarinsarin]

en toch lukt het nog niet, heb nu mn css zo

Cascading Stylesheet:

.tdbg {
    background-image: url(monocompilatie_totaal_breed_2.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    overflow: scroll;
    height: 740px;
    position: relative;
    visibility: visible;
    z-index: auto;
    width: 600px;
}

ik gebruik idd tabellen voor de layout, heb ook het stuk gelezen over semantiek e.d. wat Rowanov aangaf in zijn link in het andere topic, maar ik heb dit nu eenmaal simpel in tabellen gedaan, en als ik dit probleempje heb opgelost ben ik er vooralsnog klaar mee.
Dan kom ik later nog wel uit om de pagina opnieuw en logisch op een semantische wijze in elkaar te knutselen.

Samenvattend: Ik heb nog steeds hetzelfde probleem, zie heel vereenvoudigd
hier

[Eskimootje]

background-attachment: fixed;

[sarinsarin]

nee, ook met

Cascading Stylesheet:

.tdbg {
    background-image: url(monocompilatie_totaal_breed_2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: scroll;
    height: 740px;
    position: relative;
    visibility: visible;
    z-index: auto;
    width: 600px;
}

precies hetzelfde

[Rowanov]

ik weet al waar het aan ligt / waar je het mee kan oplossen. Gewoon even een display: block; op je td gooien:

Cascading Stylesheet:

.tdbg{ display: block;}

[sarinsarin]

Cascading Stylesheet:

.tdbg {
    background-image: url(monocompilatie_totaal_breed_2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: scroll;
    height: 740px;
    position: relative;
    visibility: visible;
    z-index: auto;
    width: 600px;
    display: block;
}

is nog hetzelfde. ben geen kei in css zoals je merkt, als ik letterlijk zoals jij aangeeft

Cascading Stylesheet:

.tdbg{ display: block;}
    background-image: url(monocompilatie_totaal_breed_2.jpg);
    background-repeat: no-repeat;
etc
etc

doe gaat t helemaal niet.
doe ik nog 1 detail fout dan?

[Rowanov]

Ok, dan even voorkauwen maar op voorwaarde dat je daarna lekker de reference gaat lezen

Cascading Stylesheet:

.tdbg {
    display: block;
    background-image: url(monocompilatie_totaal_breed_2.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: scroll;
    height: 740px;
    position: relative;
    visibility: visible;
    z-index: auto;
    width: 600px;
}

[ Voor 6% gewijzigd door Rowanov op 16-06-2005 19:32 ]

[sarinsarin]

ik wil alles lezen als me dit lukt nu (die reference was sowieso al mijn volgende doel, had ik eigenlijk al veel eerder moeten doen maar ja ), maar letterlijke code van jou is precies hetzelfde beeld wat ik krijg..........

[ Voor 31% gewijzigd door sarinsarin op 16-06-2005 19:36 ]

[Rowanov]

De display block moet bovenaan; bij mij doet hij het gewoon in firefox op het voorbeeld wat jij hebt gegeven. Het kan natuurlijk zijn dat er iets niet klopt in de pagina die jij aan het maken bent, maar dan moet je daar een link naartoe posten. Ik kan natuurlijk wel screenshots gaan neerknallen, maar je kan ook even zelf gaan leren debuggen om het bot te zeggen.
Let op of je alle haakjes heb geopend en gesloten etc.

[sarinsarin]

ik heb geen firefox hier installed alleen ie, maar daar gaat t niet goed dus geen scrollbar.
en doe maar view source op de link die ik gaf, dat is letterlijk alle code, de hele poespas eromheen heb ik uit voorzorg al weggehaald.
kzal firefox eens installen om te kijken wat die geeft, zou toch te gek zijn als die t goed gaf en IE niet, kun jij dan eens proberen mijn link in IE te openen?

[Rowanov]

sarinsarin schreef op donderdag 16 juni 2005 @ 19:39:
ik heb geen firefox hier installed alleen ie, maar daar gaat t niet goed dus geen scrollbar.
en doe maar view source op de link die ik gaf, dat is letterlijk alle code, de hele poespas eromheen heb ik uit voorzorg al weggehaald.
kzal firefox eens installen om te kijken wat die geeft, zou toch te gek zijn als die t goed gaf en IE niet, kun jij dan eens proberen mijn link in IE te openen?

Ik raad je aan ergens op internet een werkend voorbeeld te zoeken en het daarvan te rippen; het is immers niet slecht om van andermans code te leren! Verder zijn er gek veel verschillen in pagina weergave tussen browsers.

[sarinsarin]

WTF!!!!!!!!!!!!
in firefox gaat t wel goed ja!!
en ik maar denken dat IE altijd goed weergaf, en de alternatieve browsers altijd de moeilijkheden gaven, sjonge jonge zeg, sta perplex hiero.
Maarre, nu is de volgende logische vraag, waarom werkt dit niet in IE en nog belangrijker, hoe ga ik dit wel werkend krijgen?

Want de code is goed nu (anders zou firefox toch ook niet moeten doen), maar ja, wat dan wel?

edit: ie geeft dit dus:

plaatje

firefox wel scrollbar

nog plaatje

[ Voor 19% gewijzigd door sarinsarin op 16-06-2005 19:54 ]

[sarinsarin]

ik zit nu op mijn werk de bovenstaande css code te bekijken, komt ie dan nog een keer:

Cascading Stylesheet:

.tdbg { 
    display: block; 
    background-image: url(monocompilatie_totaal_breed_2.jpg); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    overflow: scroll; 
    height: 740px; 
    position: relative; 
    visibility: visible; 
    z-index: auto; 
    width: 600px; 

ik gebruik dus tabellen voor mijn layout. wat ik mij nu ineens afvraag, de regels

Cascading Stylesheet:

    overflow: scroll; 
    height: 740px; 
    position: relative; 
    visibility: visible; 
    z-index: auto; 
    width: 600px; 
}

horen die wel in dezelfde class, is dit niet het probleem dat ik 2 classes zou moeten maken op de een of andere manier?
waarom firefox het dan wel goed weergeeft en IE niet, heb ik dan geen verklaring voor.
maar kan iemand mij vertellen hoe ik dit aan kan passen zodat oko IE het correct weergeeft?

[ Voor 7% gewijzigd door sarinsarin op 17-06-2005 13:56 ]

[Zoefff]

Dat komt simpel doordat IE gewoon brak is, en zich niet aan de regels houd zoals afgesproken door het W3C. FireFox doet dat wel, dus als je volgens de regels een website maakt, zal deze er in FF precies zo uitzien als bedoeld.

[Verwijderd]

Ik wil hier verder niet over gaan discussieren, maar IE is wel de meest gebruikte browser. 'Nou, in FireFox doet ie ut wel hoor' is geen steekhoudend argument voor een klant/opdrachtgever als ie vraagt waarom z'n website er zo vreemd uit ziet.

Het volgende werkt dan weer wel in IE, maar niet in FireFox (athans niet in 1.0.2):

Cascading Stylesheet:

.tdbg 
{  
    display: block;  
    background: url(monocompilatie_totaal_breed_2.jpg) no-repeat fixed;  
    overflow: scroll;  
    height: 740px;  
}

Je zou het classname attribuut van je table in kunnen stellen met JavaScript, expliciet kiezen voor een van de twee major browsers (a.u.b. geen Opera fanposts ) of verder kunnen zoeken naar een crossbrowser oplossing... als die er al is hiervoor.

Ik persoonlijk zou echt eens rondkijken bij google, want hiervoor moet gewoon al een oplossing bestaan. Da's altijd makkelijker dan het zelf bij elkaar puzzelen.

Hier bijvoorbeeld Hebben ze er een goede workaround voor bedacht.

[ Voor 8% gewijzigd door Verwijderd op 17-06-2005 14:00 . Reden: Voorbeeld toegevoegd ]

[Verwijderd]

Waarom maak je er niet gewoon een div van? (van de table) Dan werkt het wel gewoon in IE & FF.

[sarinsarin]

weet niet helemaal wat je bedoelt, wat ik wel heb geprobeerd eerst om met een div de background vast te zetten, en met een layer dan de tekst eroverheen te zetten, vastgezet met zoveel puixels van boven en links zeg maar, maar omdat het geheel ook nog gecentreerd moet worden, kon ik dit goed instellen voor 1 resolutie, maar ging ik dan anar een andere resolutie zit ineens mijn tekst die ik vast gepositioneerd had, helemaal scheef naast de background.

Vandaar dat ik het nu zo ben proberen in een tabel met css

[sarinsarin]

ik wil jullie mijn oplossing niet onthouden, special thanks to websjwans.

css

Cascading Stylesheet:

.tdbg { 
    display: block; 
    background-image: url(monocompilatie_totaal_breed_2.jpg); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    overflow: scroll; 
    height: 540px; 
    width: 600px; 
}

html

Cascading Stylesheet:

<div align="center"> 
<div align="left" class="tdbg">

blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat
    <br><br><br><br>
    blaat<br><br><br><br>
    blaat<br><br><br><br>
    blaat<br><br><br><br>
    blaat<br><br><br><br>blaat
    
</div>
</div>