Verticale "inline" divs

[jasperblij]

Hallo,

Ik heb een paar lijsten die ik onder elkaar wil plaatsen, maar ze mogen niet uit het scherm verdwijnen.
Als een van de lijsten uit het scherm verdwijnt moet die zegmaar naar de volgende kolom verplaats worden.

Het lijkt een beetje op een stelletje divjes die de style display:inline hebben. Maar dan worden de "lijsten" niet onder elkaar, maar naast elkaar weergegeven.
Ik wil dus eigenlijk een soort style nabootsen die ervoor zorgt dat een div de eigenschappen krijgt display:inline, maar dan verticaal.
Het belangrijkste is, dat als het scherm kleiner wordt de lijsten automatisch naar de volgende kolom worden gestuurd.

Het plaatje hieronder geeft een beetje weer wat ik wil.
De rode blokken zijn de "lijsten" die in volgorde onder elkaar in de HTML gezet worden door PHP.
Daarna moet CSS (of misschien wel JavaScript?) ze op deze manier naast elkaar zetten.

Ik hoop dat iemand me kan helpen!

Groetjes,
Jasper

 

[csshunter]

Hoi Jasper,
Dit lijkt me een hele lastige, omdat je tevoren nooit weet hoeveel oppervlak een bezoeker op zijn scherm kan krijgen.

Stel dat alle vakjes er op een resolutie van 1024x768px precies op passen, wat gebeurt er dan als je als bezoeker op een resolutie van 800x600px zit (of, op een mobieltje, nog kleiner)? Of als de bezoeker de lettergrootte moet vergroten, omdat het anders voor deze bezoeker niet leesbaar is?
Op de een of andere manier zal er altijd een vrijheidsgraad ingebakken moeten worden: of de hoogte moet flexibel zijn, of de breedte, zodat er gescrold kan worden als het er niet meer op past.

• Een uitwijkmogelijkheid: alle vakjes een vast formaat geven, en binnen elk vakje zo nodig een verticale scrollbar laten verschijnen als de inhoud te groot wordt.

Verder zal het met css alleen niet lukken, want css kan niet de hoogtes van boxes vaststellen, en daar berekeningen mee uitvoeren.
Om de verdeling tot stand te brengen, zal er javascript aan te pas moeten komen (of een server-side scripttaal). Bij javascript moet er dan een terugval-mogelijkheid in zitten voor het geval dat javascript uit staat bij de bezoeker.
Er zijn in principe 2 mogelijkheden:

1. De schermhoogte richtinggevend laten zijn, en wat er in de hoogte niet op past naar de volgende kolom overhevelen (jouw vraag). Bij veel inhoud zullen er dan kolommen "naast het scherm" bij moeten komen, d.w.z. rechts buiten beeld, en met een horizontale scrollbar te bereiken.
2. De schermbreedte richtinggevend laten zijn, en wat er in de breedte niet op past naar beneden verhuizen. Bij veel inhoud zal er dan verticaal gescrold moeten worden.

Nu denk ik dat de meeste surfers gewend zijn een webpagina van links naar te rechts en dan van boven naar beneden te lezen, en dat men bij een teveel aan inhoud voor het scherm naar beneden wil gaan kijken. Mijn muis grijpt altijd automatisch naar de verticale scrollbar!
Het lezen van een strook (gelijkblijvende schermhoogte, horizontale scrollbar) is dan minder voor de hand liggend.

• Het is waarschijnlijk ook niet helemaal toevallig, dat jouw schets eerder de kant op gaat van een rechtopstaand A4'tje dan van een landscape-formaat.

Vandaar heb ik een script in elkaar proberen te duikelen, dat een willekeurige hoeveelheid boxes van een willekeurige hoogte uitsmeert over 3 beschikbare kolommen (dus verticaal scrollbaar):

• Het principe is eenvoudig: alle boxhoogtes optellen, delen door 3, en eenderde deel in de eerste kolom zetten. De rest delen door twee, en in kolom 2 en kolom 3 zetten.
• In de praktijk komen er toch heel wat scriptregeltjes aan te pas
  (misschien kan het simpeler)
• En hier de testpagina:
  www.developerscorner.nl/css-exercitions/boxes-in-3-columns.htm

Getest en werkzaam in Firefox, Opera, Safari en IE6 en IE7 (IE8 zou geen probleem moeten zijn).
In de scriptcode boxes-in-3-columns.js zijn de nodige toelichtingen over de gevolgde methode verwerkt.

Maar, als gezegd, iets dergelijks zou ook voor een vaste schermhoogte en een flexibel aantal kolommen gemaakt kunnen worden. En het hangt natuurlijk ook allemaal erg af van de layout en de inhoud van de pagina!

Met vriendelijke groet,
CSShunter

 

[jasperblij]

Wauw helemaal top deze reply!
Had em alleen niet gezien omdat de functie om me op de hoogte te houden niet werkt denk ik...

Prachtig dat met dat script!
Alleen ik heb nu alle divjes (die ik dezelfde breedte wil houden) als inline divs gezet.
Dus als er eentje uit het scherm valt dan wordt ie op de volgende regel weergegeven.
En dan heb ik er dus een verticale scrollbar bijgezet voor als er teveel content is!

Ja dat van die resoluties is irritant, want ik heb zelf een redelijk groot beeldscherm dus soms als ik een website van mij zie vanaf een andere computer dan past ie er niet helemaal op xD

Maar hartstikke bedankt nog!

Groetjes,
Jasper