[HTML]Columns en Row via CSS, mogelijk

[LuCarD]

Ik ben bezig met het maken van template voor een site. Maar het is een beetje lastig design. En ik weet niet hoe ik moet oplossen in HTML/CSS. En met tabellen kan ik wel redelijk ver komen maar ook daar krijg ik problemen. Aangezien sommige cellen een kader moeten hebben. En dan word de cel een 2pixel groter.

Het design is als volgt, het zijn 5 kollomen, en meerdere rijen.

In elk Cel komt een blokje tekst ( drie a vier regels ), soms met plaatje soms zonder. De cellen zijn allemaal even groot 130px, tussen elke cel moet 20px ruimte zitten. Alle cellen in 1 rij moeten even groot zijn aangezien er een lijn onder moet.

Verder moeten alle lijnen kloppen. Zowel verticaal als horizontaal.


Dit heb ik nu gemaakt via tabellen, maar kan dat ook anders?

Of is het mogelijk om een 100% div te plaatsen in een cel?

Het moet werken op Mozilla, IE 5.01 voor Mac en IE 5+ voor windows

[SchizoDuckie]

dit zit er eigenlijk gewoon uit als een zelf flowende layout.

CSS Keywords:

• Float: left;
• clear: right;
• width: 130px;
• margin: 10px;
• <ul> <li>

Give it a shot, dit is volgens mij een zéér simpele layout om op te zetten met semantische html en wat css

[LuCarD]

SchizoDuckie schreef op maandag 08 augustus 2005 @ 10:27:
dit zit er eigenlijk gewoon uit als een zelf flowende layout.

CSS Keywords:

• Float: left;
• clear: right;
• width: 130px;
• margin: 10px;
• <ul> <li>

Give it a shot, dit is volgens mij een zéér simpele layout om op te zetten met semantische html en wat css

Eens zover was ik zelf nog wel... alleen kan ik de columns niet even hoog krijgen.

voorbeeld: http://www.lucard.nl/5col/test1.html
Alle B columns moeten even hoog worden
Alle C columns moeten even hoog worden en de onderkant moet lijnen met A

Alleen snap ik niet wat je bedoelt met ul en li?

[ Voor 6% gewijzigd door LuCarD op 08-08-2005 10:46 ]

[r0bert]

Je moet ze in een parentdiv nesten

pseudo

HTML:

<div met border bijv; height wordt auto;>
   <div (box 1) float: left; clear />
   <div (box 2)float: left; clear />
   <div (box 3)float: left; clear />
   <div (box 4)float: left; clear />
   <div clear both;><hr display: none; /></div>
</div>
andere div kan er dan nog naast bijv.. zo structuur opbouwen

edit: position: absolute; hoogte iets met height 100%, height auto; of top:0;bottom:0;

[ Voor 31% gewijzigd door r0bert op 08-08-2005 10:59 ]