12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)
  • Q:
    Bijdrager
    kluivers

    CSS 100% background probleem bij scrollen.

    Beste mensen,

    vraagje. Ik heb een site waarop ik html, body, en een div met een background op 100% heb staan. Binnen de div zit een stuk text die vaak groter is als de pagina. Na het laden krijg ik een scroll bar en als je dan naar beneden scrolled dan wordt de background verder niet meer getoond.

    iemand een idee wat dit is ??

    tnx

    Bijdrager
    Marresc

    En aan welk element heb de achtergrond precies gekoppeld? Kan je anders even de code posten?

    Bijdrager
    patrick68

    Heb je de background op repeat staan?

    Bijdrager
    inactiveaccount
    ”kluivers”

    Beste mensen,

    vraagje. Ik heb een site waarop ik html, body, en een div met een background op 100% heb staan. Binnen de div zit een stuk text die vaak groter is als de pagina. Na het laden krijg ik een scroll bar en als je dan naar beneden scrolled dan wordt de background verder niet meer getoond.

    iemand een idee wat dit is ??

    tnx

    Ik gok dat je height: 100%; hebt gezegd. Maar wat je MOET doen is de min-height op 100% zetten in css. De reden? Nou met height defineer je een vaste hoogte, tekst die er niet meer in past doet wat je zegt met het overflow type, en standaard gaat het gewoon verder.

    Probleem is, Microsoft’s Internet Explorer, dat geweldige product ja, ondersteund min-height niet. Wat MS heeft gedaan, is als het niet in de container van 100% past, laat het meestretchen. oftewel height = min-height in Internet Explorer.

    De simpelste oplossing is hier de css underscore hack, en dan krijg je dus zoiets:

    height: auto; /* voor de goede browsers */
    _height: 100%; /* underscore hack voor IE6 */
    min-height: 100%; /* 100% voor GOEDE browsers:) */

    –edit:
    alvast een reply op hieronder, het zijn dus firefox en safari die GOED luisteren naar de regels.
    Maar de meeste mensen doen het fout hoor:)

    Bijdrager
    kluivers

    het zijn twee backgrounds. De eerst hangt aan de html, de tweede aan de body. De eerst gaat goed, de tweede niet.

    de tweede hangt over de eerste achtergrond. Het lijkt er op dat bij het laden de pagina body 100% wordt genomen en na het “schalen” / scrollen wordt er dus een stukje vergeten. Bugje ??

    ps, firefox en safari hebben dit probleem.

    Bijdrager
    inactiveaccount

    Mocht wat ik hierboven zei trouwens niet werken, kun je dan misschien een voorbeeld geven van hoe je hebt in zitten in de vorm van code of een linkje?:)

    Bijdrager
    roberttt

    Ik denk dat ik weet wat het probleem is, maar kan je inderdaad even een link geven zodat ik kan zien wat je code enzo is.

    Je moet denk ik wat spelen met het display element van je div in css. Maar zonder code weet ik dat niet zeker…

    Bijdrager
    kluivers

    mm werkt idd niet.

    http://homepage.mac.com/inpetto/test/test100proc.html

    hier het probleem.

    even laden met een klein browser venster, venster vergroten en dan scrollen maar.[/code]

    Bijdrager
    inactiveaccount
    ”kluivers”

    mm werkt idd niet.

    http://homepage.mac.com/inpetto/test/test100proc.html

    hier het probleem.

    even laden met een klein browser venster, venster vergroten en dan scrollen maar.[/code]

    Ik zie niet dat je geprobeerd hebt wat ik zei. Want zover ik zie zou dat het moeten oplossen hoor.
    Hier is de pagina die ik altijd doorgeef aan mensen die mij hetzelfde vragen.

    Dit werkt gegarandeerd, zoniet maak je zelf ergens een fout.
    ( alles op de height, _height en min-height na is gewoon zodat de pagina ook nog uitziet, omdat ik het dus vaker als voorbeeld gebruik. )

    [code:1:7d46d2f007]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>100% height absolute</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html,body{
    height: 100%;
    margin: 0px;
    padding: 0px;
    }

    div#Container{
    position: absolute;
    top: 0px;
    left: 50%;
    height: auto;
    _height: 100%;
    min-height: 100%;
    margin-left: -250px;
    width: 500px;
    border-left: 5px solid #cc3300;
    border-right: 5px solid #cc3300;
    }
    </style>
    </head>
    <body>

    <div id="Container">
    vul dit maar met tekst
    </div>

    </body>
    </html>[/code:1:7d46d2f007]

    Bijdrager
    kluivers

    geinig. In mijn voorbeeld werkt het inderdaad.

    werkt dit ook als je in een div twee gefloate div’s hebt met een afsluitende footer (clear both ?)

    of moet je absoluut positioneren.

    Bijdrager
    inactiveaccount

    Waarschijnlijk wel, maar het kan zijn dat je dan nog een truukje moet toepassen. Het probleem is namelijk dat floats (en absolute elementen), naja zoals ze zeggen, floaten. Ze drijven dus. Oftewel ze houden zich niet aan de ‘regels’ breedte/hoogte van de container.

    Maar als ik mij niet vergis, is dat op te lossen door een simpele overflow: auto; op de container te zetten. Ik weet het niet meer zeker. Het is gewoon een kwestie van proberen lijkt me:)

    Bijdrager
    kluivers

    top. Dankjewel voor al je uitleg. Moet zeggen dat ik normaal gesproken niet tegen dit soort problemen aanloop maar dit is nu de tweede keer in korte tijd.

    mijn voorbeeld was helaas niet helemaal volledig. Ik ga even kijken of ik het nog kan reproduceren. Maar dat wordt wel morgen ben ik bang. Tis mooi geweest.

    Edit : het was een footertje die niet goed in de div structuur stond. 1 te hoog…….

    suf dus. Maar ik blijf het “fenomeen op zich” raar vinden.

12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.