Scrollen vanaf bepaalde browserbreedte

[Millennyum]

Ik ben bezig met een nieuw design voor mijn website. Het zit nogal ingewikkeld in elkaar en ik kom er even niet meer uit.

Hier is een preview van het design: http://www.alice-in-wonde...esign/test-resources.html

Wat ik wil, is dat het gedeelte met de content (de 'linker pagina', oftewel alles in de div genaamd 'mainpage'), gecentreerd op de pagina wordt weergegeven, ongeacht de browserbreedte. Behalve wanneer de pagina kleiner wordt dan 925 pixels: vanaf dat moment moet de website stoppen met centreren, en moet hij de content links uitgelijnd in het venster plaatsen.
Dat is me gelukt, via een combinatie van divs met left:50% / margin-left:-<waarde> en een div met margin:auto.

Het idee daarachter is, dat alleen de content in de mainpage relevant is, de divs daaromheen zijn opvulling om het mooier uit te laten zien bij hogere resoluties.

Maar aangezien ik nog behoorlijk wat bezoekers heb die op 800x600 surfen, moet de site ook daar geschikt voor zijn. Dat betekent, dat wanneer de browser minder breed wordt dan 925px, de content nog steeds goed zichtbaar moet zijn.
Naast het niet langer centreren maar links uitlijnen, moet er dus ook een horizontale scrollbar verschijnen bij zo'n lage browserbreedte. Alleen de inhoud van de mainpage div hoeft te scrollen.
En die scrollbar is hetgeen wat me nog niet gelukt is.

Wie kan mij vertellen hoe het moet?

Ter verduidelijking een voorbeeldje van hoe de site in verschillende resoluties moet werken:



De rechterpagina rekt dus uit al naar gelang de breedte van de browser. De twee divs om de mainpage heen (met de pagina-rand en de boekvouw) hebben een vaste breedte en plakken om de mainpage vast. Ze hoeven niet getoond te worden wanneer er geen plek voor is in de browser. Wanneer de browser ook te klein wordt voor de mainpage, hoef je met scollen alleen de mainpage heen en weer te kunnen bewegen; de pagina-rand en de boekvouw hoeven hier dus niet zichtbaar mee te worden.

De relevante html code:

HTML:

<div id="container">

    <div id="mainpage">
                
         <div id="header"></div>
    
             <div id="breadcrumb"></div>

             <div id="holder">
          
                <div id="pagefiller"></div>
            
            <div id="menu"></div>

                    <div id="content"></div>

                    <div id="related"></div>

             </div>

             <div class="clear"></div>
      
         <div id="footer"></div>

        </div>       

        <div id="leftpages"></div>
    
        <div id="fold"></div>
    
        <div id="rightpage"></div>
    
</div>

De relevante CSS code:

Cascading Stylesheet:

html
{
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

body 
{ 
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

#leftpages
{
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: -498px;
  width: 36px;
  height: 100%;
}

#container
{
  position: absolute;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

#pagefiller
{
 float: left;
 width: 1px;
 height: 400px;
}

#mainpage
{
  position: relative;
  margin: 0px auto;
  background: #FEF3D7;
  width: 925px;
}

#header
{
  position: relative;
  height: 100px;
  width: 925px;
}

#breadcrumb
{
  position: relative;
  height: 30px;
  width: 885px;
}

#holder
{
  position: relative;
  width: 925px;
}

#menu
{
  position: relative;
  width: 160px;
  float: left;
}

#content
{
  position: relative;
  width: 580px; 
  float: left;
}

#related
{
  position: relative;
  width: 148px;
  float: left;
}

#footer
{
  position: relative;
  width: 100%;  
  height: 40px;
  top: 40px;
  margin: 0 0 0 -35px;
}

#fold
{
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: 462px;
  width: 236px;
  height: 100%;
}

#rightpage
{
  position: absolute;
  top: 0px;
  left: 50%;
  margin-left: 698px;
  width: 50%;
  height: 100%;
  padding-bottom: 40px;
}

Ik heb op diverse plekken in de site een div ingevoegd die voor dat scrollen zou moeten zorgen: om alles heen, om de mainpage div heen, in de mainpage div, etc. Zowel met width=100%, width=925px etc. etc. Maar het lukt me niet om dit te bereiken.
Ik kan de overflow:hidden op de html niet uitzetten, want dan scrollt veel meer dan alleen de mainpage, dan scroll je ook alles wat rechts daarvan zit mee.

Alvast super bedankt voor enige hulp die jullie kunnen bieden!

[ Voor 21% gewijzigd door Millennyum op 01-09-2008 15:34 ]

[Krooswijk.com]

Eerste waar ik aan dacht (al is het niet geheel wat je bedoelt, maar wellicht interessant): http://www.alistapart.com/articles/switchymclayout en dan met name http://www.alistapart.com...ransition_layout_tab.html

[ Voor 40% gewijzigd door Krooswijk.com op 01-09-2008 15:47 ]

[Noork]

Lijkt me een beetje onzinnig om overflow-x uit te zetten. Waarom zou je dit uberhaupt doen? Je krijgt sowieso geen horizontale scrollbar wanneer de resolutie voldoende is. Maar nu dus ook niet wanneer de resolutie kleiner is.

Dan zou je b.v. op kunnen lossen door een scriptje te gebruiken, dat de resolutie kan detecteren en vervolgens doorstuurt naar een andere site of een ander stylesheet gebruikt. Maar dan ben je dus problemen aan het oplossen die er eigenlijk niet hoeven te zijn. Ik snap het niet zo...

[Snake]

Noork schreef op maandag 01 september 2008 @ 16:01:
Lijkt me een beetje onzinnig om overflow-x uit te zetten. Waarom zou je dit uberhaupt doen? Je krijgt sowieso geen horizontale scrollbar wanneer de resolutie voldoende is. Maar nu dus ook niet wanneer de resolutie kleiner is.

In Firefox that is.

In IE zie je standaard de scrollbars & en die gaan aan als je uit je venster komt met de pagina

In IE 8 die ik hier bij de hand heb blijkbaar niet meer Sorry

[ Voor 7% gewijzigd door Snake op 01-09-2008 16:17 ]

[Bosmonster]

IE laat alleen de verticale scrollbar standaard zien, om pagina verschuivingen te voorkomen (zoals Firefox wel heeft).

De horizontale scrollbar komt pas als die nodig is, tenzij je overflow:scroll aangeeft (dan reserveert is ook de ruimte voor de horizontale scrollbar).

Magoed.. dit lijkt me niet in CSS op te lossen. Een simpel javascriptje echter kan eenvoudig de overflow-x aan/uitzetten afhankelijk van de schermbreedte. Check wel even of alles ondersteund wordt, want dit heeft alleen echt nut voor mobiele apparatuur en de javascript-ondersteuning kan wat aan de mindere kant zijn.

[Millennyum]

Krooswijk.com schreef op maandag 01 september 2008 @ 15:45:
Eerste waar ik aan dacht (al is het niet geheel wat je bedoelt, maar wellicht interessant): http://www.alistapart.com/articles/switchymclayout en dan met name http://www.alistapart.com...ransition_layout_tab.html

Grappig... wellicht niet geschikt voor mijn situatie, maar ik ga er wel naar kijken.

Noork: het probleem is dat er dan wél een scrollbar wordt getoond (en ook in FF). Want de 'rechterpagina' wordt ook meegenomen bij het bepalen van de breedte van de site. Maar die is niet relevant. De bezoeker hoeft alleen de inhoud van de 'mainpage' div te kunnen zien.
Horizontale scrollbars zijn irritant en moeten alleen als ze echt nodig zijn getoond worden. Bij hogere resoluties leidt het alleen maar af van de werkelijke content.

Bosmonster: een javascriptoplossing zou kunnen, maar dan heb je dus nog steeds het probleem dat je bij het scrollen niet alleen de mainpage ziet, maar het hele gedeelte aan de rechterkant ervan erbij. Dat is in de tekening in de openingspost het bruine gedeelte. En aangezien de 'rechterpagina' een breedte heeft van 50%, betekent dat dat je een hoop overbodige lay-out ziet als je gaat scrollen.

Ik dacht zelf eigenlijk aan een extra containerdiv, die altijd zo hoog is als de site zelf, maar die een scrollbar toont bij het kleiner worden van de breedte. Iets met min-width ofzo, maar dat werkt niet cross-browser.

[ Voor 25% gewijzigd door Millennyum op 01-09-2008 16:15 ]

[Noork]

Ik vraag me gewoon af waarom overflow-x nu uit staat. Zit er soms een fout in de CSS zodat de pagina b.v. 100% + xx pixels groot is, waardoor je altijd een schuifbalk krijgt?

mmh, nou ik snap eigenlijk niet zoveel van het design als bepaalde dingen niet worden meegenomen voor de breedte

Het rechtergedeelte, zeg maar de bladzijde? Deze kun je toch gewoon als background instellen, zodat deze niks met de body te maken heeft? Of moet daar content komen?

[ Voor 46% gewijzigd door Noork op 01-09-2008 16:19 ]

[Millennyum]

Goed, ik ga het proberen uit te leggen...



De mainpage staat in principe gecentreerd, dus marge a = marge b.
De rechterpagina heeft een width=50%, om ervoor te zorgen dat hij altijd zichtbaar is wanneer het design uitrekt. De boekvouw-div heeft een vaste breedte.
De site is dus altijd breder dan het browserwindow, waardoor er altijd een horizontale scrollbar zou verschijnen. Maar die rechterpagina is alleen maar opvulling en mag net zoals de bladzijden en de vouw buiten beeld vallen bij lagere resoluties.
Pas wanneer het venster kleiner wordt dan de mainpage div, moet er gescrolld worden. En dan moet niet de hele site scrollen, maar alleen de mainpage.

[ Voor 26% gewijzigd door Millennyum op 01-09-2008 16:41 ]

[Noork]

Als je nou eens de linkerbladzijde en de boekvouw opneemt in de mainsite, en de gehele rechter pagina instelt als background?

[BtM909]

Ga je die 925 fixed houden, want anders kan je overflow op dat deel doen... Anders moet je gaan kijken naar custom scrollbars (brrrrrrrr)

Waarom draai je je probleem niet om: elementen toevoegen indien de breedte het toelaat?

[Millennyum]

Noork schreef op maandag 01 september 2008 @ 16:44:
Als je nou eens de linkerbladzijde en de boekvouw opneemt in de mainsite, en de gehele rechter pagina instelt als background?

De boekvouw div is te breed daarvoor. Dan houd je nog een deel van het afleidende effect.

Dan zou ik boekvouw en rechterpagina moeten combineren en als achtergrond moeten instellen. Dat kan wel. Maar dan moet ik waarschijnlijk een ontzettend grote afbeelding gebruiken om ervoor te zorgen dat de 'pagina' altijd rechts voldoende doorloopt, en dat het 'hout'. links door blijft lopen. Dat gaat teveel laadtijd kosten.

BtM909 schreef op maandag 01 september 2008 @ 16:45:
Ga je die 925 fixed houden, want anders kan je overflow op dat deel doen... Anders moet je gaan kijken naar custom scrollbars (brrrrrrrr)

Waarom draai je je probleem niet om: elementen toevoegen indien de breedte het toelaat?

Die 925px breedte is nodig, de pagina moet niet breder worden dan dat. En min-/max-width werkt helaas niet cross-browser.

Hoe bedoel je, elementen toevoegen indien de breedte het toelaat? Hoe zie je dat dan voor je?


Die oplossing van Krooswijk.com is misschien nog niet eens zo gek... een javascriptje dat de browsergrootte detecteert, en er dan een volledig andere stylesheet voor in de plaats zetten.
Helaas snap ik alleen geen drol van hoe ze dat daar doen

[ Voor 24% gewijzigd door Millennyum op 01-09-2008 17:06 ]

[Millennyum]

Volgens mij heb ik de oplossing!

Dat script waar Krooswijk.com naar linkte, kreeg ik niet goed werkend, dus heb ik het zelf maar wat aangepast :

JavaScript:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(setScreenClass);
window.onresize = setScreenClass;
            

function setScreenClass(){
        var fmt = document.documentElement.clientWidth;
        if (fmt<=925)
         {
          document.getElementById('fold').style.display = "none";
          document.getElementById('rightpage').style.display = "none";
          document.getElementById('jabberwocky').style.display = "none";
          document.getElementById('footer').style.width = "960px";
          document.getElementById('footer').style.overflow = "hidden";
          document.documentElement.style.overflow = "scroll";
         }
        else
        {
          document.getElementById('fold').style.display = "inline";
          document.getElementById('rightpage').style.display = "inline";
          document.getElementById('jabberwocky').style.display = "inline";
         }
};

Oftewel: met Javascript wordt gedetecteerd of de browserbreedte onder de 925 pixels komt. Zo ja, dan verander ik enkele CSS styles.

Het schijnt alleen niet mogelijk te zijn om document.getElementById('footer').style.overflow-x te gebruiken? Dus dat je alleen de horizontale scrollbalk aan-/uitschakelt?

[edit] Blijkbaar werkt het niet in Opera. Maar ach...

[ Voor 6% gewijzigd door Millennyum op 03-09-2008 12:33 ]

[RetroTycoon]

Millennyum schreef op dinsdag 02 september 2008 @ 23:01:
Volgens mij heb ik de oplossing!

Dat script waar Krooswijk.com naar linkte, kreeg ik niet goed werkend, dus heb ik het zelf maar wat aangepast :

JavaScript:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(setScreenClass);
window.onresize = setScreenClass;
            

function setScreenClass(){
        var fmt = document.documentElement.clientWidth;
        if (fmt<=925)
         {
          document.getElementById('fold').style.display = "none";
          document.getElementById('rightpage').style.display = "none";
          document.getElementById('jabberwocky').style.display = "none";
          document.getElementById('footer').style.width = "960px";
          document.getElementById('footer').style.overflow = "hidden";
          document.documentElement.style.overflow = "scroll";
         }
        else
        {
          document.getElementById('fold').style.display = "inline";
          document.getElementById('rightpage').style.display = "inline";
          document.getElementById('jabberwocky').style.display = "inline";
         }
};

Oftewel: met Javascript wordt gedetecteerd of de browserbreedte onder de 925 pixels komt. Zo ja, dan verander ik enkele CSS styles.

Het schijnt alleen niet mogelijk te zijn om document.getElementById('footer').style.overflow-x te gebruiken? Dus dat je alleen de horizontale scrollbalk aan-/uitschakelt?

[edit] Blijkbaar werkt het niet in Opera. Maar ach...

* RetroTycoon zeurt maar heel even hoor:
En voor de niet-javascripters?

[Millennyum]

Die kunnen dan het forum niet gebruiken. De rest van de site (achtergrond info en webshop) is wel grotendeels bruikbaar.

Als jij een oplossing hebt voor de niet-javascripters, dan hoor ik het graag...

[Zakkenwasser]

kan dit niet opgelost worden met %,EM en PT? ipv PX.
in je css

Javascript toepassen in de layout van je pagina, is alsof je je winkel niet toegankelijk maakt voor de gehandicapte onder ons.

[Bosmonster]

MrJey schreef op dinsdag 09 september 2008 @ 10:21:
kan dit niet opgelost worden met %,EM en PT? ipv PX.
in je css

Javascript toepassen in de layout van je pagina, is alsof je je winkel niet toegankelijk maakt voor de gehandicapte onder ons.

Daarom is de oplossing van BtM909 het beste:

Waarom draai je je probleem niet om: elementen toevoegen indien de breedte het toelaat?

Op deze manier voeg je de extra functionaliteit toe als je browser dat toelaat, maar beperk je 'gehandicapten' niet in het reguliere gebruik.

[Millennyum]

Nogmaals: hoe moet ik dat dan doen, elementen toevoegen als de browser dat toelaat?

Ik ben ook niet blij met Javascript in mijn lay-out, maar het percentage bezoekers dat op 800x600 surft én geen javascript aan heeft staan, is wel heel klein.

[ Voor 49% gewijzigd door Millennyum op 09-09-2008 12:38 ]