[CSS] columns

[X-Lars]

Huiswerkvraag!

Maar daarom niet minder interessant IMHO. Als je even naar onderstaande kolom-indeling kijkt wordt het wel duidelijk lijkt me. Als je een paar DIV's laat floaten met:

Cascading Stylesheet:

position:relative;
float:left;

De hoogte wordt bepaald door de (tekstuele) inhoud ervan. Dan komt er bijvoorbeeld het volgende uit:

code:

|---|---|
|   |   |
| 1 |   |
|---| 2 |
    |   |
|---|---|
| 3 |   |
|   |   |
|---| 4 |
    |   |
|---|---|
|   | 6 |
| 5 |---|
|   |
|---|

Een soms irritant verschijnsel dat we allemaal wel eens meegemaakt hebben. Terwijl je dit zou willen:

code:

|---|---|
|   |   |
| 1 |   |
|---| 4 |
|   |   |
|   |---|
| 2 |   |
|   | 5 |
|---|   |
| 3 |---|
|   | 6 |
|---|---|

Door de html of body een hoogte mee te geven (lijkt me wel noodzakelijk).

Dus: kan zoiets? Ik heb het niet kunnen vinden.

[WFvN]

X-Lars schreef op 27 februari 2004 @ 22:12:
Huiswerkvraag!

Dan zit je hier verkeerd... Huiswerk doe je thuis en laat je niet anderen op Tweakers uitvoeren...

Dus: kan zoiets? Ik heb het niet kunnen vinden.

Maar laat ik een dan toch een ontopic antwoord geven: Ja het kan....

[Billie]

Ik weet niet zeker of het is wat jij bedoeld, maar op a list apart hadden ze hier een interessant artikel over.

[X-Lars]

Billie schreef op 27 februari 2004 @ 22:15:
Ik weet niet zeker of het is wat jij bedoeld, maar op a list apart hadden ze hier een interessant artikel over.

Nou dat is dus precies wat ik elke keer vind, het op gelijke hoogte krijgen van 2 kolommen, maar dat is niet echt het probleem

[Justice]

Je moet dan 1,2,3 in een div zetten en die float:left doen ipv de kleine containers apart.

[X-Lars]

Justice schreef op 27 februari 2004 @ 22:16:
Je moet dan 1,2,3 in een div zetten en die float:left doen ipv de kleine containers apart.

Ja dat snap ik. Maar ik probeer tot een oplossing te komen die altijd werkt zeg maar, dus ook bij 4 of 13 kolommen containers (eventueel wel door aanpassing van de totale height).

[ Voor 3% gewijzigd door X-Lars op 27-02-2004 22:18 ]

[Justice]

Nee je kan niet met css2 of lager dynamisch vakjes laten indelen bij de kleinste kolom. (dus bijv. bij 4 richts en bij 13 vakjes links) Dat moet je echt scripten. (Bij mijn weten)

[ Voor 9% gewijzigd door Justice op 27-02-2004 22:20 ]

[X-Lars]

ik was er al bang voor..
voor de duidelijkheid, als de containers verticaal meer ruimte zouden hebben zou er dit uit kunnen komen:

code:

|---|---|
|   |   |
| 1 | 5 |
|---|   |
|   |---|
|   | 6 |
| 2 |---|
|   |
|---|
| 3 |
|   |
|---|
|   |
|   |
| 4 |
|   |
|---|

Maar goed, ik ga ervan uit dit een soort van beperking is van CSS. Tnx anyway, ik wilde het graag zeker weten.

[Justice]

Inderdaad dit is dus wel iets waar veel behoefte aan is, je kan niet containers inhoudelijk aan elkaar linken (dat is wat je nodig hebt, zodat informatie van container 1 naar container 2 kan of terug). Helaas

Ik weet niet of dit een feature binnen CSS3 zal worden, dit klinkt meer als browser gedrag ipv opmaak, en dan is javascript er de oplossing voor imho.

Ben 90% zeker.

[ Voor 3% gewijzigd door Justice op 27-02-2004 22:27 ]

[X-Lars]

Wat ik wil is dus eigenlijk precies andersom als de normale rendering: die gaat van links naar rechts en dan naar onderen. Ik wil van boven naar onderen en dan naar rechts

[X-Lars]

WFvN schreef op 27 februari 2004 @ 22:13: Maar laat ik een dan toch een ontopic antwoord geven: Ja het kan....

Dan kun je me ook vast wel een beetje op weg helpen

[Verwijderd]

Wat ik heb gedaan in een bepaalde website is eerst alle elementen in de linker kolom zetten, en vervolgens net zolang elementen naar de andere kolommen pompen met javascript totdat de andere kolommen hoger zouden worden dan de eerste.

Met alleen CSS denk ik niet dat je dit gaat redden.

[ Voor 3% gewijzigd door Verwijderd op 27-02-2004 22:42 ]

[X-Lars]

Dan vrees ik ook het ergste, want het gaat om een XML/CSS oplossing. In een (X)HTML kun je nog ff een container toevoegen, in XML gaat dat natuurlijk niet op.

Maar je oplossing is wel interessant, Cheatah. Ik ga dat zeker eens proberen. Ook al ben ik een behoorlijke javascript-n00b, zoiets moet wel lukken.

[Verwijderd]

Tuurlijk kan dit in CSS2 (hoewel we uiteraard liever praten over CSS2.1, welke een hoop fouten fixed). "display:table;"

Of kan het daar ook niet mee?

(CSS3 heeft trouwens de "float" property fink uitgebreid, met "float:top;" e.d.)

[Mx. Alba]

Bij The Register gebruiken ze een layout ongeveer zoals jij die wilt hebben... Maar ik weet niet of ze dat met CSS doen?

[flashin]

Nee met tables.. opzich zou het dus wel kunnen met display:table denk ik..

[Verwijderd]

Indeed, en dus ook met CSS2...

(hoewel het 'float' gedeelte van CSS3 ook z'n mogelijkheden bied...)

[Verwijderd]

Ik heb eens wat geprobeerd:

code:

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
body{

}
div  { 

writing-mode: tb-rl;
height:100%;
background-color:green;

filter:         flipV();
} 
span{
filter:     flipH();
writing-mode: lr-tb;
border:1px solid black;
}
#span1{
width:100px;
height:100px;
background-color:red;

}
#span2{
width:100px;
height:150px;
background-color:yellow;
}
#span3{
width:100px;
height:80px;
background-color:blue;
}
#span4{
width:100px;
height:150px;
background-color:red;

}
#span5{
width:100px;
height:120px;
background-color:yellow;
}
#span6{
width:100px;
height:60px;
background-color:blue;
}
-->
</style>
</head>
<body>
<div>
<span id="span1">span 1 </span>
<span id="span2">span 2</span>
<span id="span3">span 3 </span>
<span id="span4">span 4 </span>
<span id="span5">span 5</span>
<span id="span6">span 6 </span>
</div>
</body>
</html>

Dit werkt alleen in ie (ie6?).
Ik zou niet weten hoe ik het alleen met display:table zou moeten doen.
Maar die nieuwe float-properties van css3 lijken wel de mogelijkheid te geven wat x-lars wil.

[Mx. Alba]

Dat is allemaal niet erg standaard, Martijn....

[Rickets]

Martijn22 weet wel wat 'ie doet, een beetje experimenteren kan geen kwaad

[X-Lars]

Martijn22's code werkt in IE6. Niet in IE5 en Mozilla Firebird 0.7. Heb nog wel wat geprobeerd om het werkend te krijgen in FB, maar zonder succes. In ieder geval ff span { float:left; } toevoegen om de heights ook in FB te laten werken.

HTML:

<html>
<head>
<title>Column Effect by Martijn22</title>
<style type="text/css">
div {
  writing-mode:tb-rl; height:300px;
  background-color:green; filter:flipV();
  } 
span {
  filter:flipH(); writing-mode:lr-tb; float:left;
  width:100px; border:1px solid black;
  }
#span1{ height:100px; background-color:red; }
#span2{ height:150px; background-color:yellow; }
#span3{ height:80px; background-color:blue; }
#span4{ height:150px; background-color:red; }
#span5{ height:120px; background-color:yellow; }
#span6{ height:60px; background-color:blue; }
</style>
</head>
<body>
<div>
<span id="span1">span 1</span>
<span id="span2">span 2</span>
<span id="span3">span 3</span>
<span id="span4">span 4</span>
<span id="span5">span 5</span>
<span id="span6">span 6</span>
</div>
</body>
</html>

Om het bedoelde CSS3 module: Multi-column layout te kunnen gebruiken moeten we nog maar even wachten..

En voor de volledigheid: hier iets over de nieuwe float properties van CSS3.

[Verwijderd]

Hier staat nog wat meer over die float:
http://www.w3.org/TR/css3-box/#the-float

Het is inderdaad niet standaard, het was een experiment om te kijken of het mogelijk was. Het is dus volgens mij alleen mogelijk in ie6 met een paar verschrikkelijke hacks.

[Verwijderd]

(een van de beste is misschien wel "clear-after")

[edwinistrator]

dit probleem ben ik ook een keer tegen gekomen mijn oplossing was toen om en om de div op left of right laten floaten, maar misschien kan je dat met javavscript dynamisch maken?

[X-Lars]

Ja, zie de post van Cheatah hierboven

Jouw oplossing zou voor mij niet trouwens werken, omdat de data uit XML komt, zodat je het met 1 element zult moeten oplossen.

[Dennis]

Kan/mag/wil je geen xsl ertussen maken?

[ Voor 3% gewijzigd door Dennis op 01-03-2004 16:01 ]

[disjfa]

ddc schreef op 01 maart 2004 @ 16:01:
Kan/mag/wil je geen xsl ertussen maken?

en dat zou wat helpen

[X-Lars]

Dat is voor deze opdracht op zich niet de bedoeling, maar XSL wil/moet ik op zeer korte wel gaan doen, dus ik houd me aanbevolen..

Edit: en ik ga er trouwens van uit dat een oplossing wel gewaardeerd zal worden.

[ Voor 24% gewijzigd door X-Lars op 01-03-2004 16:04 ]

[Dennis]

disjfa schreef op 01 maart 2004 @ 16:01:
en dat zou wat helpen

Dat je dan wél xhtml hebt ipv xml en je het dus in twee containers kunt gooien.