[CSS] Divs in loze ruimte laten floaten

[evaarties]

Een website waar ik mee bezig ben maakt gebruikt van DIV's die via float:left tegen elkaar aan schuiven. Tot zover gaat alles ok, maar de DIV's zijn niet van gelijke lengte wat loze ruimte oplevert. Deze loze ruimte wil ik ook automatisch gevuld zien.

Een plaatje kan dit beter illusteren:



Ik wil dus de donkere vlakken als het ware omhoog laten schuiven.

Testcode kan hier worden gevonden:

http://www.vaarties.nl/tweakers/verplaatsen.html

De CSS:

http://www.vaarties.nl/tweakers/verplaatsen.css

Heeft iemand tips?

[We Are Borg]

Je werkt nu van links naar rechts met het floaten. Waarom werk je niet eerst van boven naar onder en dan een nieuwe column ernaast ?

[ Voor 16% gewijzigd door We Are Borg op 11-02-2007 19:31 ]

[jmxd]

Het beste kan je 4 verticale kolommen nemen, en die allemaal een float:left geven.
Dan hoef je je verder niet druk te maken om de vakjes, want die vallen dan automatisch op de goede plek.

[evaarties]

Het aantal categorieën kan verschillen en ook het aantal items in een categorie. Hoe dan te bepalen dat je niet teveel of te weinig kolommen maakt? Kolommen worden nl automatisch zo lang als je browser toelaat (ok, je kunt uiteraard ook zoveel kolommen maken als je wilt met een horizontale scrollbar).

De site is ook bedoeld om altijd alle beschikbare ruimte te gebruiken, dit betekent bv in 1600x1200 meer kolommen dan in 800x600.

[ Voor 18% gewijzigd door evaarties op 11-02-2007 19:34 ]

[jmxd]

Ik snap je niet echt? Als je gewoon 4 verticale kolommen maakt, en daar je vakjes in zet is het toch goed? Zodra je er een vakje bij wil kan je die er gewoon bij zetten toch?

[evaarties]

De vakjes worden dynamisch opgebouwd, dit zie je echter niet terug in de voorbeeldcode.


-- dit vind ik trouwens raar aan hoe de browser met de floats omgaat:

* De categorie "Online gamen" wordt wel aan de linkerkant gezet maar deze begint op dezelfde hoogte als de onderkant van "Ondertitels".

Ik zou juist verwachten dat "Online gamen" de onderkant van "Films" pakt.

Eigenlijk zou ik zelfs verwachten dat "Ondertitels" onder "Films" valt (de DIVs staan op alfabet in de code) en dan "Online gamen" onder "Grafisch ontwerpen" etc.

[ Voor 75% gewijzigd door evaarties op 11-02-2007 19:40 ]

[jmxd]

Ik heb zelf verder geen verstand van scripttalen, maar kan je de vakjes geen id meegeven dat elk vakje met id2 in kolom 2 komt en zo voor alle id's?

[evaarties]

TwyLight schreef op zondag 11 februari 2007 @ 19:39:
Ik heb zelf verder geen verstand van scripttalen, maar kan je de vakjes geen id meegeven dat elk vakje met id2 in kolom 2 komt en zo voor alle id's?

Dat is inderdaad mogelijk, maar als ik het aantal kolommen vastleg op bv 4, dan zal ik in hogere resoluties een hoop lege ruimte houden wat ik niet wil.

De volgende persoon heeft een vergelijkbaar probleem: http://www.codingforums.com/showthread.php?t=99911

Als de resolutie breed genoeg is staan zijn kolommen als volgt:



Is het te smal, dan springen ze zo:



Hij wil ze dan echter zo:



Dit is in CSS 2.1 op te lossen door geen floats te gebruiken maar display: inline-block (wordt niet door IE ondersteund).

Wat ik echter wil, is het volgende effect:

[ Voor 45% gewijzigd door evaarties op 11-02-2007 20:11 ]

[Kvn]

evaarties schreef op zondag 11 februari 2007 @ 19:41:
[...]


Dat is inderdaad mogelijk, maar als ik het aantal kolommen vastleg op bv 4, dan zal ik in hogere resoluties een hoop lege ruimte houden wat ik niet wil.

De volgende persoon heeft een vergelijkbaar probleem: http://www.codingforums.com/showthread.php?t=99911

Als de resolutie breed genoeg is staan zijn kolommen als volgt:

[afbeelding]

Is het te smal, dan springen ze zo:

[afbeelding]

Hij wil ze dan echter zo:

[afbeelding]

Dit is in CSS 2.1 op te lossen door geen floats te gebruiken maar display: inline-block (wordt niet door IE ondersteund).

Wat ik echter wil, is het volgende effect:

[afbeelding]

Als je iedere kolom een vaste breedte geeft (bijvoorbeeld 200px + 10px ertussen) kun je toch gewoon de breedte uitlezen met Javascript en het aantal kolommen bepalen?

[evaarties]

Tja, maar het lijkt me dat het ook dynamisch moet kunnen.

[Verwijderd]

Volgens mij is dit simpelweg onmogelijk met floats alleen. (ik denk dat je dan toch voor het column principe moet gaan)

Misschien een andere oplossing. Maak de blokjes allemaal even groot (bijvoorbeeld 300px) met een overflow:auto; Ik zeg maar iets

[evaarties]

Ik ben ook bang dat ik dan echt met kolommen moet gaan werken.

Voorlopig heb ik de volgende oplossing gevonden en toegepast:

Cascading Stylesheet:

.StartpaginaCategorie,
.StartpaginaTopLijst,
.StartpaginaWachtrij {
  vertical-align: text-top;
  display: -moz-inline-box; /* Fix so mozilla uses inline-block */
  display: inline-block;
  width: 12em;
  border-style: solid;
  border-width: thin;
  margin: 5px;
}

/* BEGIN Fix so IE will use inline-block */
* html .StartpaginaCategorie,
* html .StartpaginaTopLijst,
* html .StartpaginaWachtrij {
  display: inline-block;
}

/*\*/
* html .StartpaginaCategorie,
* html .StartpaginaTopLijst,
* html .StartpaginaWachtrij {
    display: inline;
    height: 1px;
}
/**/
/* END Fix so IE will use inline-block */

Test: http://www.vaarties.nl/tweakers/verplaatsen.html

Mocht iemand toch een oplossing weten om de DIVs alsnog aan te laten sluiten dan hoor ik die gaarne.

[Rowanov]

Heb je bovenstaande oplossing al eens in firefox 2 bekeken? Een echte oplossing is het dus niet, omdat het er daar totaal niet uit ziet

[MenN]

In internet explorer 7 krijg ik alles onder elkaar te zien. Lijkt me ook niet echt de bedoeling.

[evaarties]

hehe ja ben nu net op m'n werk waar ik die browsers heb... wat een pestzooi .

Divs veranderd in span, nu werkt inline-block ook in IE6.

In firefox de onderliggende UL dezelfde breedte gegeven als de DIV (Welke nu SPAN is).

Ivm opera 8 gebruik ik inline-tabel omdat dan de achtergrondkleur van de DIV compleet doorloopt.

Alleen IE7 is volgens mij nu nog een probleem.


-De inline-table vervangen door inline-block en nu doet IE7 het ook ok. Alleen krijg je in Opera 8.54 nu een stukje transparante achterrgond jammer genoeg.

- In Firefox 1.5.x moet je eerst refreshen voordat het goed werkt... waarom? Er staan IMG in de SPANs, deze een width en height meegeven lijkt het probleem op te lossen.

- Even getest in netscape 8.1, die geeft elke categorie een border aan de rechterkant, dezelfde kleur als de kop, ook vreemd maar niet lelijk.

[ Voor 106% gewijzigd door evaarties op 12-02-2007 13:08 ]