[CSS] Recordset formatten

Wat ik zo ongelofelijk vind is dat mensen zoals jij gewoon echt voor geen meter lezen en interperteren.
Er is hier helemaal niemand die beweert dat je geen tables mag gebruiken!

De hele vraagstelling van dit topic gaat over hoe je met css-only een recordset kan formatten. In deze vraagstelling gaat het niet over het feit dat je geen tabellen moet gebruiken maar enkel en alleen hoe je het doet zonder tabellen.

Het hele semantiek verhaal en de discussie erover is een goede toevoeging op het topic.

Maar on-topic,

Een forum topic listing, is dat nou data die je in tabellen zou plaatsen?
Ik bedoel, tabulaire data in een tabel = ok, maar als ik nou geen tabulaire data heb en wel visueel een tabel structuur wil neerzetten met daarin wat gegevens, zou ik tabellen dan volgens de semantische methode niet mogen gebruiken?

idd, als het geen tabulaire data is en je wilt het er wel als een dergelijke structuur uit laten zien, dan moet je dat oplossen met css, niet met tabellen

een topicoverzicht (als deze) is imho wel gewoon tabulaire data

iets als deprogrammeur in "[HTML] Tabellen" is geen tabulaire data en moet dus niet in een tabel gestopt worden, ook al wil je het er wel zo uit laten zien.

(dat topic is overigens ook wel een hele interessante in het kader semantiek)

mophor wijzigde dit bericht 03-08-2005 20:20 (36%)

quote:

Timz schreef op woensdag 03 augustus 2005 @ 20:07:
Wat ik zo ongelofelijk vind is dat mensen zoals jij gewoon echt voor geen meter lezen en interperteren.
Er is hier helemaal niemand die beweert dat je geen tables mag gebruiken!

...

Ik heb nog nooit een site gemaakt die geen gebruik maakt van tabellen en nu wil ik het wel proberen mbhv alléén css.

hieruit maak ik toch op dat je geen tables wilde gebruiken....

Alweer lees je niet nauwkeurig, ik citeer:

quote:

toch ongelooflijk dat er nog steeds mensen zijn die denken dat als ze css gebruiken ze geen tables mogen gebruiken, en vice versa.

ik geef toe, het is wat mierenneukerig maar reageer dan gewoon niet...

quote:

Timz schreef op woensdag 03 augustus 2005 @ 20:07:
De hele vraagstelling van dit topic gaat over hoe je met css-only een recordset kan formatten.

Je zult nooit met CSS toe kunnen. Je hebt altijd HTML-elementen nodig om je CSS aan op te hangen, dus voor een recordset altijd table, tr, td en aanverwanten of divs met style="display: table-row;" en aanverwanten.

Als je dan toch HTML-elementen nodig hebt, kun je toch net zo goed die mooie semantische table familie gebruiken?

Daar ben ik inmiddels achter, het is ook niet zo dat ik het persee met css wil doen. Ik vroeg me af of het css-only kon. Ik ben nog veel wijzer geworden want het hele semantisch html-en daar had ik nog nooit van gehoord terwijl het kennelijk al een aantal jaren erg wel aan de hand is.

Ik heb html/css de laatste jaren ook verwaarloosd omdat ik bezig was andere dingen te leren. Nu ben ik met andere mensen bezig om een website op internet te zetten waarmee geld verdient moet worden en die veel bezoekers moet gaan trekken, dus nu ben ik me er weer in aan het verdiepen.

Tijdens mijn gathering of information kwam ik langs sites die het helemaal te vet vonden om een css-only site te maken. Ik ben daarmee aan de gang gegaan en stuitte dus op het probleem waar deze thread over gaat. Gelukkig hebben vooral mophor en schizoeend me genoeg feedback (in welke toonaard ook) gegeven om weer helemaal bij te kunnen geraken.

quote:

Justice schreef op woensdag 03 augustus 2005 @ 14:00:
Even Michali's post verbeteren qua toegankelijkheid

[...]

Interessant, dit kende ik nog niet

Zoals gezegd ben ik geen tabellen racist. Ik gebruik op mijn site ook enkele tabellen. En ik had er nog niet echt bij stilgestaan, maar in het geval van pure tabulaire data gebruik ik ook geen lijsten en div's. Bijvoorbeeld bij een lijst van producten (foto, korte omschrijving, prijs, leverancier) gebruik ik lijsten en div's omdat ik dit mooi en gemakkelijk wil stylen (en beetje zoals topics op een forum), en omdat alle data op 1 rij veel te krap wordt.

Ik ben mijn mening iig geval aan het herzien. Kan de rest zich er in vinden als ik zeg dat je lijsten en/of div's gebruikt als er meer styling aan te pas komt of als 1 record meer dan 1 rij in beslag neemt. Terwijl tabellen best kunnen gebruikt worden bij het puur weergeven van data zoals het visueel in een database zou kunnen staan?


Is er iemand die zoiets als dit met tabellen zou maken? Ik moet toegeven dat ik deze discussie gevoerd heb terwijl ik aan dit bezig was.Dit is ook een lijst van allemaal records. Als iemand dit met tables zou maken zou ik graag weten waarom

Het switchen van kolommen waar ik het over had heeft ook met dit te maken. Zo wil ik voor pda's een net iets andere layout maken.

ik denk dat lijsten hier ook niet op z'n plaats zijn eigenlijk, hoewel een beetje op het grensgebied

ik denk dat ik hetzelfde betoog zou kunnen voeren als in mophor in "[HTML] Tabellen"

(lees allemaal [HTML] Tabellen en [CSS] Correcte schrijfwijze even door, want dat was grotendeels hetzelfde onderwerp. In dit geval ben ik heel erg wezen helpen en diep op alles ingegaan, maar dat ga ik natuurlijk geen 2 keer doen )

mophor wijzigde dit bericht 04-08-2005 10:28 (43%)

quote:

mr_star schreef op donderdag 04 augustus 2005 @ 00:13:
Is er iemand die zoiets als dit met tabellen zou maken? Ik moet toegeven dat ik deze discussie gevoerd heb terwijl ik aan dit bezig was.Dit is ook een lijst van allemaal records. Als iemand dit met tables zou maken zou ik graag weten waarom

Dit is geen tabulaire data. Tabulaire data zijn tabellen die je bij wiskunde hebt gehad, met rijen en kolommen. Zoiets doe je met divs, hx en span enzo.

quote:

chris schreef op donderdag 04 augustus 2005 @ 14:37:

Dit is geen tabulaire data. Tabulaire data zijn tabellen die je bij wiskunde hebt gehad, met rijen en kolommen. Zoiets doe je met divs, hx en span enzo.

De bovenstaande informatie zou prima in een tabel kunnen staan. Dat het net iets anders wordt vormgegeven (niet alle gegevens op een rij) doet er toch niet toe?

@ cheatah: heb je op zich wel gelijk in, ik denk dat het in dit geval zeker zou kunnen. Een lijst vind ik echt niet op z'n plaats:

daad bij woord:

code:

<style type="text/css">
* {
font-family: arial;
line-height: 1.2em;
}

thead {
display: none;
}

tr {
background-color: lightgray;
display: block;
margin: 1em;
overflow: auto;
width: 600px;
}

td, th {
float: left;
padding: 0;
}

th, .tool {
background-color: gray;
color: white;
text-align: left;
width: 500px;
}

.tool {
width: 50px;
}

.picture {
width: 98px;
height: 50px;
border: 1px solid;
}

.brand, .price {
background-color: silver;
width: 250px;
}

.price {
text-align: right;
}
</style>

<table>
<thead>
<tr>
<th>naam</th>
<th></th>
<th></th>
<th>figuur</th>
<th>Merk</th>
<th>prijs</th>
<th>Omschrijving</th>
</tr>
</thead>
<tbody>
<tr>
<th>CD 560</th>
<td class="tool">edit</td>
<td class="tool">delete</td>
<td class="picture">plaatje</td>
<td class="brand">JB systems</td>
<td class="price">€ 329.00</td>
<td class="desc">Dubbele CD Speler</td>
</tr>

<tr>
<th>CD 850</th>
<td class="tool">edit</td>
<td class="tool">delete</td>
<td class="picture">plaatje</td>
<td class="brand">JB systems</td>
<td class="price">€ 621.00</td>
<td class="desc">19" Dubbele CD Speler</td>
</tr>
</tbody>
</table>

mophor wijzigde dit bericht 04-08-2005 20:01 (24%)

Zouden jullie een overzicht als deze [CSS] Recordset formatten ook als tabulaire data typeren?

Ofwel gewoon het bekijken van een topic

Timz wijzigde dit bericht 05-08-2005 12:48 (14%)

quote:

Timz schreef op vrijdag 05 augustus 2005 @ 12:47:
Zouden jullie een overzicht als deze [CSS] Recordset formatten ook als tabulaire data typeren?

Ofwel gewoon het bekijken van een topic

Nee, theoretisch gezien zou je zelfs heel ver (moeten/kunnen) gaan en tags als <cite> voor een post en <blockquote> voor een qoute kunnen gebruiken voor als je deze ook nog semantisch wil beschrijven

Ik vraag me wel af wat dat zou doen met de google pageranks voor bijvoorbeeld GoT als dat hier in de templates ook doorgevoerd wordt ipv
code:

<div class="message-quote-div">

SchizoDuckie wijzigde dit bericht 05-08-2005 13:00 (19%)

quote:

SchizoDuckie schreef op vrijdag 05 augustus 2005 @ 12:58:
[...]


Nee, theoretisch gezien zou je zelfs heel ver (moeten/kunnen) gaan en tags als <cite> voor een post en <blockquote> voor een qoute kunnen gebruiken voor als je deze ook nog semantisch wil beschrijven

Ik vraag me wel af wat dat zou doen met de google pageranks voor bijvoorbeeld GoT als dat hier in de templates ook doorgevoerd wordt ipv
code:

<div class="message-quote-div">

Quotes staan hier al in een blockquote

quote:

crisp schreef op vrijdag 05 augustus 2005 @ 13:09:

[...]


Quotes staan hier al in een blockquote

sorry, lomp niet verder gekeken in de source had ook al zoiets van *hmm*

nee, dit hier is gewoon "hoofdstukken" werk, zelfde reden als ik hier aangaf, de structuren zijn hier imho te groot om nog als een tabel te kunnen zien.

Natuurlijk zit er een groot grijs overgangsgebied tussen, waar het voorbeeld van mr_star dus inzit. Imho mag die ook al met div's, maar icho dus nog met tabellen. Beiden is iets voor te zeggen

Als het semantisch niet correct is om met tabellen te doen moet het kennelijk wel anders kunnen maar ik krijg het niet voor elkaar:



Dit wil ik bereiken. Ik heb al met lists gewerkt, met lists in lists (kan dat zowiezo wel?).

Let op: ik wil dit wel vanuit een database bereiken zonder dynamisch stylesheets aan te passen.

Nu heb ik op mophor (rikkertkoppes) site het inline-box/block artikeltje gelezen en dat ook gerbuikt

http://www.depulz.nl/test.php

IE geeft het ok weer, maar mozilla dus niet...

De update werkt al helemaal niet want dan blijken er in een list geen elementen (wat dan ook) onder elkaar te kunnen staan

Waarom zou je daar een list voor gebruiken? Het is niet echt een opsomming.

Een tabel is het ook niet, dus een paar divjes zou het werk toch netjes moeten klaren lijkt me.
code:

<STYLE TYPE="text/css">
.post_container{width:450px; height:50px;background-color:#008000;}
.naam{position:absolute; margin:0px; width:50px; height:50px; border-right: thin solid #00C9FF;}
.datum{position:absolute; margin-top:0px; margin-left:50px; width:400px; height:25px; border-bottom: thin solid #00C9FF;}
.post_inhoud{position:absolute; margin-left:50px; margin-top:25px; width:400px; height:25px;}
</STYLE>

<div class="post_container">
    <div class="naam">Timz</div>
    <div class="datum">Geplaatst op 12-34-5678</div>
    <div class="post_inhoud">bla bloep</div>
</div>

Dit is natuurlijk geen probleem, maar het moet dus gebruikt worden om spul uit een database te halen, dat zou betekenen dat ik dynamisch de style zou moeten opmaken per div. Dus:

<div style="top: <? echo ($top * $value) ?">

Dit kan alleen! als álle input in een post even lang is maar dat is nooit zo (in een forum) je kan dus nooit berekenen hoever van de top de volgende post moet komen.

dat kan wel, maar dan moet je eerst álle karakters gaan tellen, alle plaatjes gaan berekenen, etc etc. kortom veel te ingewikkeld

Timz wijzigde dit bericht 05-08-2005 16:25 (18%)

Ik denk dat het dringend tijd wordt dat je dan even een handleiding html/css erbij pakt want dit is redelijk basic hoor. Je kan elementen een vaste hoogte/breedte opgeven, maar deze kan natuurlijk ook gewoon flexibel zijn zodat deze zich aan de inhoud aanpast.

Voorbeeldje met dezelfde divjes alleen iets ander css waarbij de layout in de lengte gewoon netjes meerekt.
code:

<STYLE TYPE="text/css">
.post_container{width:450px; height:auto; background-color:#008000;}
.post_container div{background-color:#008000;}
.naam{width:50px; height:50px;}
.datum{margin-left:50px; margin-top:-50px; width:400px; height:25px; border-bottom: thin solid #00C9FF; border-left: thin solid #00C9FF;}
.post_inhoud{margin-left:50px; width:400px; border-left: thin solid #00C9FF;}
</STYLE>

<div class="post_container">
    <div class="naam">Timz</div>
    <div class="datum">Geplaatst op 12-34-5678</div>
    <div class="post_inhoud">bla bloep<br><br><Br><br>asdfsaf<br><br><br>asdfasf</div>
</div>

En als je dan spullen uit je database haalt is het gewoon een kwestie van een while lus laten lopen waarbij je voor elke loop die divjes aanmaakt met de juiste inhoud en dan krijg je zoiets

Blorgg wijzigde dit bericht 05-08-2005 16:54 (30%)

Het nadeel van tabulaire data in een table stoppen merk je pas als je een andere view wilt loslaten op die data. Stel je wilt thumbnails tonen, inline naast elkaar dan kun je niet eenvoudig een andere css gebruiken om die tabulaire data op die manier te tonen. Dat kan wel als je elk record in een div plaatst. Het nadeel daarvan is dat je een hoop werk moet verrichten om de columns op gelijke breedte te krijgen als je het tabulair wilt tonen

quote:

Ik denk dat het dringend tijd wordt dat je dan even een handleiding html/css erbij pakt want dit is redelijk basic hoor. Je kan elementen een vaste hoogte/breedte opgeven, maar deze kan natuurlijk ook gewoon flexibel zijn zodat deze zich aan de inhoud aanpast.

Je hebt gelijk, ik was gewoon niet op het idee te komen om de divs te positioneren met behulp van de margins, ik gaf al aan dat ik naar de top/lef property aan het kijken was. Je bent een held, ik heb al een paar keer tegen mezelf gezegd: wat stom.
Maarja, dit wijt ik aan ervaring, zoals ik al zei aan het begin van dit topic, ik gebruikte altijd tabellen om de boel op te maken en als ik een div gebruikte dan positioneerde ik hem met top/left/.

Maar genoeg geneuzel, ik ben vandaag een stuk wijzer geworden weer. Goed topic! bedankt

quote:

Gordijnstok schreef op vrijdag 05 augustus 2005 @ 17:45:
Het nadeel van tabulaire data in een table stoppen merk je pas als je een andere view wilt loslaten op die data. Stel je wilt thumbnails tonen, inline naast elkaar dan kun je niet eenvoudig een andere css gebruiken om die tabulaire data op die manier te tonen. Dat kan wel als je elk record in een div plaatst. Het nadeel daarvan is dat je een hoop werk moet verrichten om de columns op gelijke breedte te krijgen als je het tabulair wilt tonen

Thumbnails inline naast elkaar zijn een lijst, geen tabulaire data.
Das gewoon een kwestie van het op het juiste niveau oplossen: Ik heb zelf in m'n php classes gewoon voor de presentatie laag een optie die een rowset afloopt en aan de hand van wat ik kies een 3tal mogelijkheden:

• <dl> <dd> <dt>
• <table>
• <ul> <lI>

SchizoDuckie wijzigde dit bericht 06-08-2005 00:02 (11%)

Dan kun je net zo goed tabulaire data in een div stoppen. Het hoeft niet specifiek een lijst te zijn, of een relatie met elkaar te hebben

Voor een explorer view bijvoorbeeld. Voordeel hiervan, net als met een list is dat de huidige browserfunctionaliteiten het toelaten om met de elementen vrij te spelen, itt de table elementen als een tr en een td.

<div class="row">
<img class="icon_16" />
<img class="icon_34" />
<span class="name"></span>
<span class="property"></span>
</div>