[layout/css]orderen van blokken

[BasieP]

Beste mensen,

Ik ben bezig om voor een soort webshop, een printbare pagina te maken.
Hierop moet per categorie van producten een 'blok' (divje) komen waarin een lijst met de producten staat.

Er moeten twee kolommen komen en de kolommen moeten gesorteerd zijn op een bepaalde volgorde.

Nu gebruik ik momenteel 'float: left' om te zorgen dat ik blokken naast elkaar plak.

Echter, als ik nu een heel klein blok heb in de linker kolom (eerste blok), en vervolgens een grote in de rechterkolom (tweede blok), dan begint het derde blok weer in de linker kolom onder de bodem van de rechter kolom.
dus zo:

____  ____
|  |  |  |
|  |  |  |
|__|  |  |
      |  |
  x   |__|
____  ____
|  |  |  |
|  |  |  |
etc.

Waarbij dus bij de 'x' heel veel ruimte 'verloren' gaat. Nu wil ik eigenlijk op een zo efficient mogelijke manier mijn 'blokken' hebben. Maar hoe doe je zoiets nou?

Een tabel is natuurlijk geen optie, omdat alle cellen in 1 rij dan allemaal even hoog zijn. Je komt dan toch ergens bij iets floating's uit, maar ik zou gewoon niet weten of er truukjes voor zijn (zonder JS)

---

Direct komt daarbij een tweede probleem:
Wanneer ik afdruk, dan print IE eerst de kop op 1 a4tje, en begint het volgende a4tje met de kolommen.
Echter, na 1 a4tje houd hij ermee op

firefox print wel alles, maar doet ook de kop (een gewone H1) op een appart a4tje

heeft daar iemand nog truuks voor?

[mr_derk]

container is het woord

[Da Weef]

Er zijn zat mensen met truuks...

Vraag 1: google container of wrapper

Vraag 2: google printer-friendly webpage ofzow...

[Dark Blue]

In CSS heb je ook een paar dingen als 'page-break-after' enzo. Die kun je er volgens mij ook doorheen gooien. Zelf nog nooit gebruikt trouwens.

Maar kun je een plaatje laten zien, waarom wil je je blokken die weer op de nieuwe regel beginnen, zo omhoog versprongen hebben? Het doet me dan een beetje aan Startpagina.nl denken... die lees je van boven naar beneden door, niet van links naar rechts.

Jouw blokken floaten wel van links naar rechts (dus moet je ze ook in die volgorde lezen?) dus waarom wil je dan dat de rijen 'golvend' onder elkaar komen? Dat is toch voor het lezen niet handig?

[bakakaizoku]

Volgens mij mag je voor een webshop wel een tabel gebruiken als je het semantisch wil houden. Het is immers een dataoverzicht.

Don't shoot me if I'm wrong..

[simon]

als 't tabulaire data is, lijsten etc is een tabel niet ongeoorloofd...

[H004]

Gewoon 2 div-containers naast elkaar, en in die containers verticaal je blokken.

HTML:

<div id="container_1" style="float: left;">
  <div id="blok_1"></div>
  <div id="blok_3"></div>
</div>
<div id="container_2">
  <div id="blok_2"></div>
  <div id="blok_4"></div>
</div>

[BasieP]

ja ik snap het idee met de twee containers, maar inderdaad, ze moeten van links naar rechts (ongeveer) gelezen worden.

als 't tabulaire data is, lijsten etc is een tabel niet ongeoorloofd...

true, maar das compleet niet handig, want zoals ik in mijn startpost zei:

Een tabel is natuurlijk geen optie, omdat alle cellen in 1 rij dan allemaal even hoog zijn.

Door blok1, 3, 5 etc links te doen en 2, 4 6 rechts zou je iets kunnen doen, maar alle containers zijn ongelijk qua grote. Zo is bijv. de eerste container 3 regels hoog, en de tweede 36. De derde moet dus dan onder de eerste komen, maar de 4de past daar ook nog makkelijk onder.

de tweede container is dus +/- evenhoog als 1, 3 en 4 bij elkaar. Ook zijn alle containers dynamisch in grote, dus ik kan er niet vanuit gaan dat 2 altijd even hoog blijft als 1, 3 en 4.

Ik denk dat ik serverside eens ga kijken of ik de containers kan ordenen adhv het aantal items er in. Ik ben bang dat dit de enige echte oplossing is.

Dark Blue schreef op dinsdag 19 augustus 2008 @ 14:59:
In CSS heb je ook een paar dingen als 'page-break-after' enzo. Die kun je er volgens mij ook doorheen gooien. Zelf nog nooit gebruikt trouwens.

daar ga ik eens naar kijken DB, ik hoop niet dat ik ze nodig heb, want heb wel vaker printer friendly pages gemaakt. maar nog nooit gehad dat hij na 1 pagina stopte met printen.

[ Voor 13% gewijzigd door BasieP op 19-08-2008 19:37 ]

[bakakaizoku]

Waarom moeten de items allemaal een aparte hoogte hebben? Is een simpel plaatje, een naampje en een preview van de product tekst niet genoeg?

page-break-after is trouwens voor print media only afaik.

[BasieP]

Nou ik heb het voor elkaar.

Ik ben van de twee kolommen uit gegaan, en heb het aantal regels (aantal producten) van elk 'blok' geteld. Ik voeg dan telkens een categorie-blok toe aan de kolom die het kleinst is.

dus als de linker kolom 1 categorie heeft van 20 producten en de tweede heeft er 3 die samen 13 producten zijn, dan voeg ik het 5de categorie-blok toe aan de rechter kolom.

Dit werkt zo goed, dat zelfs de print-bug van IE 'opeens' weg is