[div als tabel] meerdere "cellen" onder elkaar

[ViNyL]

Ik probeer met div's en een css een vervanger voor een tabel te maken. Een tabel met 3 kolommen. Het vervelende is dat als ik in de middelste kolom mijn omschrijving te lang maak het mis gaat...

Dit is mijn stylesheet:

code:

#kol1 {
width: 100px;
float: left;
}
#kol2 {
width: 200px;
float: left;
}
#kol3 {
width: 150px;
float: left;
}

En dan ziet mijn html er zo uit:

code:

<div id="kol1">Naam</div><div id="kol2">Omschrijving</div><div id="kol3">Aantal</div><br/>

<div id="kol1">Potlood</div><div id="kol2">Een gewoon potlood</div><div id="kol3">5</div><br/>
<div id="kol1">Papier</div><div id="kol2">Wit papier</div><div id="kol3">5</div><br/>
<div id="kol1">Pen</div><div id="kol2">Een blauwe pen</div><div id="kol3">5</div><br/>

Zie voorbeeld van wat er mis gaat hier

[Zoefff]

Waarom probeer je met divjes een vervanger voor een tabel te maken? Dit is tabulaire data, die hoort thuis in een tabel.

[moozzuzz]

Volgens mij is deze structuur beter in een tabel te plaatsen, ook semantisch.

[ Voor 0% gewijzigd door moozzuzz op 31-10-2006 14:02 . Reden: te laat :-) ]

[ViNyL]

Zoefff schreef op dinsdag 31 oktober 2006 @ 14:00:
Waarom probeer je met divjes een vervanger voor een tabel te maken? Dit is tabulaire data, die hoort thuis in een tabel.

Ja daar zeg je me eigenlijk wat
Kan het uberhaupt wat ik wil.. ?

[Janoz]

Naast het feit dat tabulaire data gewoon in een tabel hoort (duidelijk gevalletje klok klepel weer) hoor je ook je id uniek te houden over je pagina.

Edit @ hierboven:

De vraag is niet of hetgeen jij wil wel kan, maar waarom je dat uberhaupt wil.

[ Voor 25% gewijzigd door Janoz op 31-10-2006 14:09 ]

[NoepZor]

Je hebt 3 soorten mensen
1. Maakt layout en tabellen in tables
2. Maakt layout met divs en zet tabulaire in tables
3. Maakt layout in divs en zet tabulaire data in divs

Nummer twee is de enige die semantisch verantwoord is vanwege bovengenoemde redenen. De table attribuut is speciaal voor tabellen bedacht en wordt daarvoor dan ook gebruikt. De div elementen lenen zich uitermate goed voor het opdelen en opmaken van een webpagina waarvoor deze dan ook fervent worden gebruikt. Divs gebruiken voor een tabel is dus overkill en niet nodig. Daarentegen is dus een complete layout maken in tables weer niet goed, omdat de table daar niet voor bedoeld is en de code ook rommelig wordt. Conclusie: gebruik ze beide, en wel op de juiste manier

[Verwijderd]

geen topickaping aub

[ Voor 170% gewijzigd door André op 01-11-2006 09:15 ]

[-Lars-]

Toon wat meer inzet, Reezer! Hoe ver ben je, wat heb je gevonden over frames en tegen wel specifieke probleem liep je nu aan? Laat je opzet tot nu toe zien, etc.

Als je wilt dat de verschillende onderdelen van je site telkens hetzelfde blijven als één onderdeel wordt ververst, kun je inderdaad kijken naar het frame-element en alles wat daarbij komt.

Als je wilt dat alles herladen wordt of het niet eens bent met de nadelen die kleven aan frames, kun je die layout verkrijgen met div-elementen, die je naar alle hartelust kunt stylen met CSS. Dit is waarschijnlijk de te prefereren methode. W3CSchools en andere sites zouden je verder kunnen helpen.

[edit]
Oh, en open met dergelijke informatie dan je eigen topic...

[ Voor 5% gewijzigd door -Lars- op 31-10-2006 17:31 ]

[Verwijderd]

Ik ben er nog niet uit hoe je de onderkant kan stoppen als de pagina "vol" is

code:

body {
    
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px;
    }

img {
    border: 0px;
    }

#frame1 {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: ORANGE;
    }   

#frame2 {
    position: absolute;
    top: 100px;
    left: 0px;
    height: 100%;
    width: 200px;
    margin: 0px;
    padding: 0px;
    background-color: GREEN;
    }   

#frame3 {
    position: absolute;
    top: 100px;
    left: 200px;
    height: 400px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: YELLOW;
    }   

#frame4 {
    position: absolute;
    top: 500px;
    left: 200px;
    height: 200px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    background-color: BLUE;
    }

html:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>CSS indeling</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

<div id="frame1">1</div>
<div id="frame2">2</div>
<div id="frame3">3</div>
<div id="frame4">4</div>
</body>
</html>

[Verwijderd]

NoepZor schreef op dinsdag 31 oktober 2006 @ 16:22:
Je hebt 3 soorten mensen
1. Maakt layout en tabellen in tables
2. Maakt layout met divs en zet tabulaire in tables
3. Maakt layout in divs en zet tabulaire data in divs

4. Maakt layout middels CSS en gebruikt elementen waar deze voor bedoelt zijn

[Verwijderd]

Verwijderd schreef op dinsdag 31 oktober 2006 @ 17:41:
[...]

4. Maakt layout middels CSS en gebruikt elementen waar deze voor bedoelt zijn

slaat dit toevallig op mijn voorbeeldje?
(zegmaar dat ik dat juist verkeerd deed)

[ Voor 8% gewijzigd door Verwijderd op 31-10-2006 20:36 ]

[Verwijderd]

Verwijderd schreef op dinsdag 31 oktober 2006 @ 17:52:
[...]


slaat dit toevallig op mijn voorbeeldje?
(zegmaar dat ik dat niet juist verkeerd)

Nee hoor.

[NoepZor]

Verwijderd schreef op dinsdag 31 oktober 2006 @ 17:41:
[...]

4. Maakt layout middels CSS en gebruikt elementen waar deze voor bedoelt zijn

Die divs style je uiteraard met CSS

[Janoz]

Wat Treador bedoeld is dat je niet div's gebruikt, maar de elementen die ervoor zijn bedoeld. Een titel hoort in een h1 en niet in een div. Een kopje hoort in een h2 en niet in een div. Een stukje tekst hoort in een p en niet in een div. Een lijstje (zoals het menu) hoort in een ul met li's en niet in een lijstje divs. Een woord waar je de nadruk op wil leggen geef je een emp ipv een span.

Een div en een span gebruik je pas als er geen ander element voor is. Eigenlijk komt het er op neer dat je div's alleen voor de containers gebruikt.

Mensen die hun tabellen eruit flikkeren en overal divs voor in de plaats zetten hebben hun werkwijze niet verbeterd en zijn nog net zo 'fout' bezig. Een leuk (nederlands) voorbeeld is trouwens geenstijl.nl. Als je naar die site kijkt zit het vol met van alles en nog wat (incl flash titels), maar kijk maar eens hoe netjes en semantisch de source in elkaar zit.