[html/css] Div Layout - Softwareontwikkeling

maandag 14 juli 2008 18:23

Acties:

0 Henk 'm!

Anoniem: 105201

Topicstarter

Ik zou graag een layout maken dmv div's. Nu ben ik al enige tijd aan het proberen geweest maar ik krijg het niet voor elkaar.
De layout(s) zijn alsvolgt:
Afbeeldingslocatie: http://www.schoolbestanden.nl/opzet1.jpg

Afbeeldingslocatie: http://www.schoolbestanden.nl/opzet1.jpg

Afbeeldingslocatie: http://www.schoolbestanden.nl/opzet2.jpg

Menu is fixed op 200px en col 1 en 2 moeten de rest opvullen (even breed)

Kan iemand mij vertellen hoe ik dit het beste kan verwerken dmv div's?

Wat ik geprobeerd heb is:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-family: "Trebuchet MS", Verdana , sans-serif, Geneva, Arial, Helvetica;
    font-size: 12px;
    color: #333;
    width:100%;
    }


#container  {   width:100%;
                max-width:100%;
                height:auto;
                background-color:#FFFFCC;
            }
#menu       {   width:180px;
                height:100%;
                float:left;
                background-color:#00CCFF;
                position:absolute;
            }
#col1       {   width:40%;
                height:100%;
                float:right;
                background-color:#00AAFF;
            }
#col2       {   width:40%;
                height:100%;
                float:right;
                background-color:#33CC99;
            }
#content    {   width:80%;
                height:100%;
                background-color:#CC99CC;
                float:right;
            }

-->
</style>
</head>
<body>
<div id="container">
<div id="menu">menu</div>

    <div id="col1">Col1</div>
    <div id="col2">Col2</div>
    <div id="content">Content</div>
</div>
</body>
</html>

maandag 14 juli 2008 19:27

Acties:

0 Henk 'm!

Anoniem: 53628

Ik zou het zo oplossen: (nog niet helemaal af

maar je zal het idee er achter wel door hebben)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">
<!--
#container    {    width:100%;
                height:100%;
                background-color:#FFFFCC;
            }
#menu        {    width:180px;
                height:100%;
                float:left;
                background-color:#00CCFF;
                position:fixed;
        left:0px;
            }
#col1        {    width:100%;
        left:0px;
                height:400px;
                float:left;
                background-color:#0000FF;
        position:absolute;
        z-index:0;
            }
#Innercol1        { 
        height:400px;
        left:0px;
                background-color:#FF0000;
        margin-left:180px;
        position:relative;
        float:left;
        display:block;
        z-index:1;
            }


-->
</style>
</head>
<body>
<div id="container">
    <div id="menu">menu</div>
    <div id="col1">
        <div id="Innercol1">
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content<br>
            Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content<br>
            Content<br>
        </div>
    </div>
</div>
</body>
</html>

Edit: Iets opgeschoond en verbeterd voor een duidelijker voorbeeld

[ Voor 45% gewijzigd door Anoniem: 53628 op 14-07-2008 21:44 ]

maandag 14 juli 2008 19:35

Acties:

0 Henk 'm!

Zakkenwasser

Anoniem: 53628 schreef op maandag 14 juli 2008 @ 19:27:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: "Trebuchet MS", Verdana , sans-serif, Geneva, Arial, Helvetica;
font-size: 12px;
color: #333;
width:100%;
}

#container { width:100%;
max-width:100%;
height:auto;
background-color:#FFFFCC;
}
#menu { width:180px;
height:100%;
float:left;
background-color:#00CCFF;
position:fixed;
}
#col1 { width:100%;
height:400px;
float:left;
clear:right;
background-color:#00AAFF;
z-order:1;
position:absolute;
}
#Innercol1 {
height:400px;
float:left;
clear:right;
background-color:#FF0000;
margin-left:180px;
position:relative;
z-order:0;
}

#col2 { width:40%;
height:400px;
clear:right;
float:left;
background-color:#33CC99;
}
#content { width:80%;
height:100%;
background-color:#CC99CC;
float:right;
}
[/code]

copy to "style.css"

in html plak je <link rel="stylesheet" type="text/css" href="style.css" />

en vergeet de DTD niet

[ Voor 6% gewijzigd door Zakkenwasser op 14-07-2008 19:37 ]

PSP 1000 @ 6.60 Pro C2 [+256GB]
PSVita @ Henkaku Enso [+256GB]
3DS @ Luma (B9S) [+160GB]
Nintendo Switch 3.0.1 [+256GB]

maandag 14 juli 2008 20:17

Acties:

0 Henk 'm!

moozzuzz

Anoniem: 105201 schreef op maandag 14 juli 2008 @ 18:23:
HTML:
1
<html xmlns="http://www.w3.org/1999/xhtml">

Het is gemakkelijker om een HTML4.x DTD te gebruiken dan een XHTML-versie die toch niet door IE verteerd wordt... en wellicht door je server ook als text/html verstuurd wordt

.

maandag 14 juli 2008 20:30

Acties:

0 Henk 'm!

Zakkenwasser

moozzuzz schreef op maandag 14 juli 2008 @ 20:17:
[...]

Het is gemakkelijker om een HTML4.x DTD te gebruiken dan een XHTML-versie die toch niet door IE verteerd wordt... en wellicht door je server ook als text/html verstuurd wordt .

dat betwijfel ik, zijn pagina opmaak is xhtml, zou zonde zijn om dan je dtd te gaan veranderen in een html dtd.

meeste browser ondersteunen xhtml

[ Voor 17% gewijzigd door Zakkenwasser op 14-07-2008 20:31 ]

PSP 1000 @ 6.60 Pro C2 [+256GB]
PSVita @ Henkaku Enso [+256GB]
3DS @ Luma (B9S) [+160GB]
Nintendo Switch 3.0.1 [+256GB]

maandag 14 juli 2008 22:48

Acties:

0 Henk 'm!

Kiphaas7

MrJey schreef op maandag 14 juli 2008 @ 20:30:
[...]

dat betwijfel ik, zijn pagina opmaak is xhtml, zou zonde zijn om dan je dtd te gaan veranderen in een html dtd.

meeste browser ondersteunen xhtml

Alleen omdat je dan <link href="..." /> moet veranderen naar <link href="..."> ?

Dat is nou net zijn punt, het gaat niet erom of alle browsers het xhtml doctype ondersteunen, maar dat het in 99% van de gevallen als text/html wordt verstuurd, waardoor als gewoon html wordt afgehandeld, waardoor de xml voordelen wegvallen.

@Imagine:

In je voorbeeld gebruik je een container div, die je vervolgens op width en height 100% zet, en een achtergrond kleurtje. Wat houd je tegen om die hele container div weg te laten en deze stijl attributen gewoon op de body tag los te laten?

maandag 14 juli 2008 23:02

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Kiphaas7 schreef op maandag 14 juli 2008 @ 22:48:
Dat is nou net zijn punt, het gaat niet erom of alle browsers het xhtml doctype ondersteunen, maar dat het in 99% van de gevallen als text/html wordt verstuurd, waardoor als gewoon html wordt afgehandeld, waardoor de xml voordelen wegvallen.

maar...maar...XHTML is hip!

En nieuwerder dan HTML! XHTML is 1337!

Ok, seriously: XHTML wordt in 99 v.d. 100 gevallen inderdaad verkeerd gebruikt _{ja joh, het valideert dan wel meestal soms, maar dat maakt het nog geen 'goed' gebruik} en er is zelden een goede reden waarom XHTML gebruikt is. Ik ben dan ook eens benieuwd naar de overwegingen waarom deze 'stap' gemaakt is?

Als je zonodig "hip" wilt zijn, neem dan gewoon HTML 4 strict (IMHO) of wacht op (X)HTML 5 _{maar dat duurt nog even...}

[ Voor 26% gewijzigd door RobIII op 14-07-2008 23:22 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

dinsdag 15 juli 2008 12:51

Acties:

0 Henk 'm!

Anoniem: 105201

Topicstarter

Bedankt voor de reacties! Ik heb het nog even geprobeerd maar kom er nog niet helemaal uit.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">
<!--
html, body  {   margin:0px;
                height:100%;
                width:100%;
                }
#menu        {  width:180px;
                height:100%;
                float:left;
                position:absolute;
                left:0px;
                background-color:#66CC00;
                z-index:0;
                }
#container    { width:100%;
                left:0px;
                height:100%;
                float:left;
                background-color:#0000FF;
                position:absolute;
                z-index:1;
                }
#Innercol1    { height:100%;
                left:0px;
                background-color:#FF0000;
                margin-left:180px;
                position:relative;
                float:left;
                display:block;
                z-index:2;
                }
#Icol1      {   width:50%;
                min-width:50%;
                height:300px;
                background-color:#0066FF;
                float:left;
                position:relative;
                }
#Icol2      {   width:50%;
                min-width:50%;
                height:300px;
                background-color:#33CC99;
                float:right;
                position:relative;
                }
#Icol3      {   top:300px;
                width:100%;
                height:100%;
                background-color:#00FFFF;
                }


-->
</style>
</head>
<body>
<div id="container">
    <div id="menu">menu</div>
        <div id="Innercol1">
        <div id="Icol1">Icol1</div>
        <div id="Icol2">Icol2</div>
        <div id="Icol3">Icol3</div>
    </div>
</div>
</body>
</html>

In FireFox gaat dit goed, maar IE7 denkt er zo over:
Afbeeldingslocatie: http://www.schoolbestanden.nl/opzet2_IE7.jpg

Heeft iemand een oplossing?

[ Voor 7% gewijzigd door Anoniem: 105201 op 15-07-2008 12:56 ]

dinsdag 15 juli 2008 13:14

Acties:

0 Henk 'm!

Rowanov

Kop eens wat anders...

Col2 iets minder breed maken zodat IE het ook snapt.

dinsdag 15 juli 2008 14:04

Acties:

0 Henk 'm!

Bosmonster

*zucht*

edit: verkeerd gelezen

Pixels en procenten zijn niet zo lekker te combineren. Het laatste voorbeeld werkt ook niet in Firefox (3) bij mij overigens.

[ Voor 118% gewijzigd door Bosmonster op 15-07-2008 14:27 ]

dinsdag 15 juli 2008 14:27

Acties:

0 Henk 'm!

Anoniem: 175028

Je hebt bij Innercoll geen width vastgesteld. Om deze reden worden ze in Opera en Safari net zo breed als de ruimte die de tekst erin nodig heeft. Om Col1 en Col2 de rest van de breedte op te laten vullen moet Innercoll ook een breedte hebben, in dit geval 100%. Enige probleem hier is dat 100% width van Innercoll even breed is als de breedte van de container (100% van de parent). De container heeft zijn breedte weer van de body. Als voor Innercoll geldt width:100% en margin-left:180px zal de pagina 180px breder worden dan de viewport.
Dit is op te lossen door Innercoll via z-index achter het menu te plaatsen en door Innercoll een negatieve margin-left te geven zodat het menu over Innercoll heen kan schuiven (beter gezegd: Innercoll onder het menu). Om ervoor te zorgen dat de inhoud van Innercoll niet achter maar naast het menu komt te staan moet je dan in Innercoll een div maken met een padding-left van 180px zodat de inhoud 180px naar rechts wordt geduwd.

Zoals je de width en height nu hebt vastgesteld zal je in IE6 en andere browsers verschillende dingen te zien krijgen omdat IE6 min/max-width/height niet snapt. IE6 ziet height als min-height terwijl in andere browsers height elementen een vaste hoogte geeft die niet kan veranderen.

Verder zal je bij deze layout problemen krijgen als de content groter wordt dan het menu (verder naar beneden) omdat het menu 100% blijft van de viewport en niet 100% van het document. Hier is echter de volgende 'oplossing' voor: http://www.alistapart.com/articles/fauxcolumns/
Hiermee kan je het laten lijken alsof je kolommen tot onderaan doorlopen.

Edit: typo

dinsdag 15 juli 2008 14:55

Acties:

0 Henk 'm!

Anoniem: 109106

Ik hoop dat dit de oplossing voor je is

HTML: layout

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>

<style type="text/css">
<!--
    * {
        margin: 0;
        padding: 0;
    }
    
    html, body {
        height:100%;
        width: 100%;
    }
    
    #container {
        margin: 0 auto;
        width:100%;
        height: 100%;
        background: #CCCC00;
        position: relative;
    }
    
    #left {
        width: 180px;
        float: left;
    }
    
    #right {
        background: #FF0000;
    }
    
    #collum1 {
        height: 300px;
        width: 50%;
        float: left;
        background: #00FF00;
    }
    
    #collum2 {
        height: 300px;
        width: 50%;
        float: left;
        background: #FFFF00;
    }
    
    #collum3 {
        height: 300px;
        width: 100px;
        background: #00FFFF;
        float: left;
    }
    
    #content {
        height: 300px;
        width: auto;
        float: left;
        background: #FF0000;
    }
    
    #right.overflow {
    overflow: auto;
    zoom: 1; /* IE hasLayout hack */
}
-->
</style> 
</head>


<body>

<div id="container">
    <div id="left">menu</div>
    <div id="right" class="overflow">
        <div id="collum1">collum1</div>
        <div id="collum2">collum2</div>
        <div id="collum3">collum3</div>
        <div id="content">content</div>
    </div>
</div>

</body>
</html>

dinsdag 15 juli 2008 14:56

Acties:

0 Henk 'm!

curry684

left part of the evil twins

SEO-tipje: als je dan toch absolute positioning gebruikt (waarvoor hulde overigens), zet dan meteen je menu-div onder de content zodat je variable en keywordricht content zo ver mogelijk bovenin staat.

Enne, denk ook even na over usability - websites die per definitie de volle breedte van de browser vullen verneuken vrijwel altijd een paar basisbeginselen op het gebied van leesbaarheid.

[ Voor 32% gewijzigd door curry684 op 15-07-2008 14:58 ]

Professionele website nodig?

dinsdag 15 juli 2008 15:02

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Anoniem: 109106 schreef op dinsdag 15 juli 2008 @ 14:55:
Ik hoop dat dit de oplossing voor je is
*knip*

Mooie oplossing. Alleen IE6/7 verneukt het nog een beetje.

dinsdag 15 juli 2008 15:09

Acties:

0 Henk 'm!

Anoniem: 53628

Of zoiets: (niet met ie6 getest wel met opera9.5, ie7 en firefox3.0)

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

<style type="text/css">
<!--
#container    {    width:100%;
                height:100%;
                background-color:#FFFFCC;
            }
#menu        {    width:180px;
                height:100%;
                float:left;
                background-color:#00CCFF;
                position:fixed;
        left:0px;
            }
#col1        {    width:100%;
        left:0px;
                height:400px;
                float:left;
                background-color:#0000FF;
        position:absolute;
        z-index:0;
            }

#Innercol1p2        { 
        width:45%;
        height:400px;
        left:0px;
                background-color:#FFFF00;
        position:relative;
        float:left;
        display:block;
        margin-left:180px;
            }
#Innercol1p3        { 
        height:400px;
                background-color:#FFFF00;
        position:relative;
        float:left;
        display:block;
            }


-->
</style>
</head>
<body>
<div id="container">
    <div id="menu">menu</div>
    <div id="col1">
            <div id="Innercol1p2">
            Content
            </div>
            <div id="Innercol1p3">
            Content
            </div>
        </div>
    </div>
</div>
</body>
</html>

(Col3 zit er nog niet in, maar dat zal het probleem niet zijn)

curry684 schreef op dinsdag 15 juli 2008 @ 14:56:
Enne, denk ook even na over usability - websites die per definitie de volle breedte van de browser vullen verneuken vrijwel altijd een paar basisbeginselen op het gebied van leesbaarheid.

Het voordeel is dan wel weer dat iedereen zelf kan bepalen wat hij/zij leesbaar vindt. En niet wordt gedwongen 600 of 800px te gebruiken.
(Vandaar dat ik nu ook help

)

[ Voor 26% gewijzigd door Anoniem: 53628 op 15-07-2008 15:15 ]

dinsdag 15 juli 2008 15:19

Acties:

0 Henk 'm!

Anoniem: 109106

Bosmonster schreef op dinsdag 15 juli 2008 @ 15:02:
Mooie oplossing. Alleen IE6/7 verneukt het nog een beetje.

1px bug zo te zien. Effe margin-left: -1px; aan #collum2 toevoegen en hij werkt in ie6/7

dinsdag 15 juli 2008 15:28

Acties:

0 Henk 'm!

Cousin Boneless

Haha! Wat toch een voortreffelijke uitvinding die div-layout. Is eindelijk elke browser compatible met de table-layout en dan vindt de comunity wel weer iets waardoor het weer een puinhoop wordt.

Laatste voorbeeld levert dus niet het gewenste resultaat in IE6 (geen menu kolom). En als er iets te kiezen valt zou ik gaan voor een oplossing zonder z-index. Zolang er geen bringToFront of sendToBack op een normale wijze gemaakt kan worden kan dit alleen maar narigheid opleveren.

dinsdag 15 juli 2008 16:21

Acties:

0 Henk 'm!

Anoniem: 175028

Bij deze ook mijn oplossing

Deze oplossing werkt in ieder geval in IE6/7, Opera9.5, Safari 3 en Fx.
Nadelen van deze oplossing zijn dat de viewport minstens de hoogte van col 1 en 2 moet hebben omdat anders col3 wegvalt waardoor de inhoud van col3 samen met de content onder het menu terecht komt.
Ook krijg je problemen als de content langer is dan het menu en col3 omdat het menu en col3 dan niet doorgetrokken worden. Dit valt echter op te lossen door de body een background-image te geven met dezelfde achtergrond als menu en col3 zodat het lijkt of de kolommen doorlopen.

Edit: Ik bedenk me net dat bij mijn voorbeeld de content gewoon om het menu heenvalt, dus als de content voorbij de onderkant van het menu komt, dat de content dan helemaal links uit gaat lijnen.
Dit is natuurlijk zo op te lossen door de content in een aparte div te zetten.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Test</title> 
    <style type="text/css"> 
    <!-- 
    html, body {
        margin:0;
        padding:0;
        height:100%;
        }
    body {
        background-color:#00f; 
        } 
    #menu {
        position:relative;
        width:180px; 
        height:100%; 
        z-index:4;
        float:left; 
        background-color:#0f0; 
        }
        
    #col1 {
        position:relative;
        width:50%;
        height:400px;
        margin-left:-90px;
        z-index:3;
        float:left;
        background-color:#f00;
        }
    #col-padding {
        padding-left:90px;
        }
    #col2 {
        position:relative;
        width:50%;
        height:400px;
        margin-left:-90px;
        z-index:2;
        float:left;
        background-color:#f0f;
        }
    #col1-padding, #col2-padding {
        padding-left:90px;
        }
    #col3 {
        position:relative;
        width:200px;
        height:100%;
        margin-top:-400px;
        z-index:1;
        float:left;
        background-color:#0ff;
        }
    #col3-padding {
        padding-top:400px;
        }
    --> 
    </style>
</head> 
<body> 
    <div id="menu">Menu</div> 
    <div id="col1">
        <div id="col1-padding">
        Column 1
        </div>
    </div>
    <div id="col2">
        <div id="col2-padding">
        Column 2
        </div>
    </div>
    <div id="col3">
        <div id="col3-padding">
        Column 3
        </div>
    </div>
    Content
</body> 
</html>

[ Voor 6% gewijzigd door Anoniem: 175028 op 15-07-2008 16:50 ]

dinsdag 15 juli 2008 16:38

Acties:

0 Henk 'm!

Anoniem: 53628

Een voordeel van position:relative is dat het ook onder ie6 werkend te krijgen is zonder ie6 only hacks.

Een nadeel is wel dat je menu mee scrollt als er veel content is. Juist bij zulke layouts kun je je menu altijd zichtbaar houden.
Als er niet meer dan 1000px aan content in de hoogte wordt aangeboden valt er wel mee te leven. Maar bij bepaalde sites (vooral van die blog sites) ben je een half uur bezig naar boven te scrollen (niet dat ik dat doe tenzij het een hele interessante site is).

Aan de TS om een afweging te maken gebruikersgemak vs compatibiliteit.

Edit: En om een paar ramen in te gooien: Een tabel layout zou dan beter werken en is mooier

.

[ Voor 8% gewijzigd door Anoniem: 53628 op 15-07-2008 17:05 ]

woensdag 16 juli 2008 13:44

Acties:

0 Henk 'm!

Cousin Boneless

Edit: En om een paar ramen in te gooien: Een tabel layout zou dan beter werken en is mooier.

Ik zou een gat in de lucht springen als er eens een guru opstaat die durft te beweren dat het 'divven' van sites een slecht idee is. Er moet al wel ontzettend veel kapitaal zijn vernietigd in de vorm van manuren door het omzetten van tables naar div's, enkel omdat het hip is.
Het wordt vooral erg als er al aan je gevraagd wordt om een site te maken waarbij als voorwaarde al gesteld wordt dat het met een div-layout moet. Doe dan maar meteen kosten *5 voor een wat afwijkende vormgeving. En graag met onderhoudscontract voor toekomstige browser versies.
Leuke ontwikkeling is trouwens de slots-layout. Hoop dat het er snel doorkomt, zodat we alle div-sites nogmaals op de schop kunnen nemen: http://www.w3.org/TR/css3-layout/ (en dan met de middelen die er wel voor bedoeld zijn)

woensdag 16 juli 2008 18:11

Acties:

0 Henk 'm!

Anoniem: 175028

Cousin Boneless schreef op woensdag 16 juli 2008 @ 13:44:
[...]

Ik zou een gat in de lucht springen als er eens een guru opstaat die durft te beweren dat het 'divven' van sites een slecht idee is. Er moet al wel ontzettend veel kapitaal zijn vernietigd in de vorm van manuren door het omzetten van tables naar div's, enkel omdat het hip is.
Het wordt vooral erg als er al aan je gevraagd wordt om een site te maken waarbij als voorwaarde al gesteld wordt dat het met een div-layout moet. Doe dan maar meteen kosten *5 voor een wat afwijkende vormgeving. En graag met onderhoudscontract voor toekomstige browser versies.
Leuke ontwikkeling is trouwens de slots-layout. Hoop dat het er snel doorkomt, zodat we alle div-sites nogmaals op de schop kunnen nemen: http://www.w3.org/TR/css3-layout/ (en dan met de middelen die er wel voor bedoeld zijn)

CSS-layouts worden niet gemaakt omdat het hip is (door de meeste devvers in ieder geval niet).
Een aantal redenen waarom CSS-layouts beter zijn dan tabel-layouts:

Tabellen zijn gemaakt voor tabel-data, niet voor layouts; Door tabellen te gebruiken voor je layout wordt semantisch correcte html onmogelijk
Tabel-layouts nemen vaak meer ruimte/bandbreedte in beslag
Tabel-layouts en screen readers gaan slecht samen
Omdat tabellen vrij stug zijn is het (vaak) lastig om de layout aan te passen
In de meeste gevallen is het bij tabel-layouts niet mogelijk om de pagina op te laten bouwen tijdens het laden omdat de browser eerst moet weten hoeveel data er is voordat de tabel in elkaar gezet kan worden; Dit zorg ervoor dat de gebruiker langer moet wachten voordat hij iets op z'n scherm te zien krijgt

Verder is het alles behalve moeilijk om nu een CSS-layout te maken die het over 10 jaar nog in alle browsers goed doet. Belangrijskte daarvoor is je aan de standaarden houden. Over 10 jaar is er echt geen andere HTML4.01-standaard dan nu en als je DTD in orde is zodat de browser weet hoe de pagina gerenderd moet worden, ziet je layout er over 10 jaar nog net zo uit als nu.

woensdag 16 juli 2008 19:03

Acties:

0 Henk 'm!

Cousin Boneless

Belangrijskte daarvoor is je aan de standaarden houden.

En wat is nou net wat ontbreekt bij de div-layout? Iedereen houdt zich aan de standaard, want die is er niet. Een div-layout waarbij je je toevlucht moet zoeken in een z-index of een * als css selector kan ik moeilijk zien als het volgen van welke standaard ook. Dus geef mij de oplossing van de door TS gestarte vraag volgens de standaard.. dan heb je een zieltje gewonnen. En dan klop ik vervolgens weer bij je aan als ik weer een andere layout nodig heb die weer net een iets andere 'standaard' verlangt.

woensdag 16 juli 2008 19:13

Acties:

0 Henk 'm!

Anoniem: 175028

Cousin Boneless schreef op woensdag 16 juli 2008 @ 19:03:
[...]

En wat is nou net wat ontbreekt bij de div-layout? Iedereen houdt zich aan de standaard, want die is er niet. Een div-layout waarbij je je toevlucht moet zoeken in een z-index of een * als css selector kan ik moeilijk zien als het volgen van welke standaard ook. Dus geef mij de oplossing van de door TS gestarte vraag volgens de standaard.. dan heb je een zieltje gewonnen. En dan klop ik vervolgens weer bij je aan als ik weer een andere layout nodig heb die weer net een iets andere 'standaard' verlangt.

Ik heb het over de W3C HTML en CSS standaarden. Zolang z-index een valide CSS property is, zie ik niet in wat er fout is aan het gebruik ervan. In mijn bovenstaande voorbeeld van een oplossing heb ik de * selector niet gebruikt, dus dat kan ook geen probleem zijn.

Mijn opmerking over standaarden ging er vooral om dat je geen browser specifieke CSS-hacks gaat gebruiken om te bereiken wat je bereiken wil. Zodra je hacks gaat gebruiken is er een redelijke kans dat je in nieuwere versies van een bepaalde browser problemen gaat krijgen.

woensdag 16 juli 2008 23:45

Acties:

0 Henk 'm!

curry684

left part of the evil twins

Cousin Boneless schreef op woensdag 16 juli 2008 @ 19:03:
[...]

En wat is nou net wat ontbreekt bij de div-layout? Iedereen houdt zich aan de standaard, want die is er niet. Een div-layout waarbij je je toevlucht moet zoeken in een z-index of een * als css selector kan ik moeilijk zien als het volgen van welke standaard ook. Dus geef mij de oplossing van de door TS gestarte vraag volgens de standaard.. dan heb je een zieltje gewonnen. En dan klop ik vervolgens weer bij je aan als ik weer een andere layout nodig heb die weer net een iets andere 'standaard' verlangt.

Neuj, blijf lekker verder prutsen, dan gaan wij rustig verder met sites bouwen die wel accessible, future proof, cross browser compatible, printbaar en van nature goed parseable zijn door zoekmachines. Scheelt jou en ons tijd.

Professionele website nodig?

donderdag 17 juli 2008 00:05

Acties:

0 Henk 'm!

Cousin Boneless

De fout in het gebruik van de z-index is dat er 3th party componenten zijn die denken dat ze op top staan als ze z-index:1 geven. En dan mag je gaan zoeken in obfuscated code waar het aan kan liggen. En dan komt mijn vorige post om de hoek kijken: er is (nog) geen mogelijkheid om de maximale z-index te bepalen, of je moet al door alle elementen gaan loopen.
Mijn grote ergernis (ik heb m'n frustraties proberen te onderdrukken) is dat er vanuit de overheid wordt aangedrongen om divs te gebruiken, maar deze meneer die dat bedacht heeft en zelf waarschijnlijk nog geen letter in css heeft getikt, staat er niet bij stil wat voor hel hij daarmee ontketent. Met alle truuks die worden toegepast om dit te bereiken creeer je een enorm onderhoudsprobleem. En dat terwijl je je site ook met tables kan vormgeven, waarvan je met 99% zekerheid kan zeggen dat het over 10 jaar nog werkt.
Om op dat semantische punt terug te komen. Wie heeft bedacht wat de semantiek van de table is? Naar mijn weten is de table layout al zo oud als Java. Dus de semantiek in de volksmond zal zijn: iets dat er uitziet als een table.
Bandbreedte: Compress je stream en de overhead van de tablerows en tablecells is weg.
Readers: kunnen ze best slimmer maken. Ik wil best een attribute invullen dat het geen table is uit de boekhoudkunde, zodat readspeaker of welk ander pakket geen intonatie gaat toepassen.
Lastig aanpassen: No way. Juist heel overzichtelijk als je goed inspringt.
Opbouw pagina: vooruit een voordeeltje voor de div-layout. Maar merk je dat op een breedband internet aansluiting?

Even om aan te geven voor welk 'probleem' we een oplossing zoeken en welke elegantie er overboord wordt gegooid:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <style>
            /* main css file */
            #mainTable {
                width: 100%;
                height: 100%;
                border-collapse: collapse;
            }
    
            #col1Td, #col2Td, #menuTd, #contentTd
            {
                border: 1px solid black;
                font-color: black;
            }
            
            #menuTd, #col1Td, #col2Td {
                vertical-align: top;
            }
            
            #col1Td, #col2Td {
                height: 100px;
                background-color: orange;
            }
            
            
            #col1Td, #col2Td, #contentTd {
                text-align: center;
            }
            
            #menuTd {
                width: 180px;
                background-color: red;
            }
            
            #contentTd {
                background-color: white;
            }
            
            /* separate css file */
            #contentTable {
                width: 100%;
                height: 100%;
            }

            #contentTable .leftTd {
                width: 100px;
                background-color: green;
                border-right: 1px solid black;
                vertical-align: top;
            }
            
            #contentTable .rightTd {
                text-align: center;
            }
            
        </style>
    </head>

    <body>
        <table id="mainTable" cellpadding="0" cellspacing="0">
            <tr>
                <td id="menuTd" rowspan="2">(menu)</td>
                <td id="col1Td">(col1)</td>
                <td id="col2Td">(col2)</td>
            </tr>
            <tr>
                <td colspan="2" id="contentTd">
                    <!-- begin content -->
                    <table id="contentTable" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="leftTd">(col2)</td>
                            <td class="rightTd">(content)</td>
                        </tr>
                    </table>
                    <!-- einde content -->
                </td>
            </tr>
        </table>
    </body>
</html>

[ Voor 6% gewijzigd door Cousin Boneless op 17-07-2008 00:34 ]

donderdag 17 juli 2008 00:33

Acties:

0 Henk 'm!

Anoniem: 53628

Cousin Boneless schreef op donderdag 17 juli 2008 @ 00:05:
HTML:
1
code

Mooie oplossing

. Van alle code die er gepost is, is dit de enige die echt goed werkt (onder alle browsers).

Nu nog een fixed menu

.

Maar goed de TS moet gewoon kiezen. Percentages of pixels. Dan kan iedere leek een div site bouwen.

[ Voor 16% gewijzigd door Anoniem: 53628 op 17-07-2008 00:48 ]

donderdag 17 juli 2008 00:35

Acties:

0 Henk 'm!

curry684

left part of the evil twins

Cousin Boneless schreef op donderdag 17 juli 2008 @ 00:05:
Mijn grote ergernis is dat er vanuit de overheid wordt aangedrongen om divs te gebruiken

Ik hield hier ergens op met lezen, tot deze zin was het vermakelijk maar zodra je de overheid de schuld gaat geven van divs haak ik af.

Recent nog mooie chemtrails gespot?

Professionele website nodig?

donderdag 17 juli 2008 01:01

Acties:

0 Henk 'm!

Cousin Boneless

Ik doel op deze website: http://www.webrichtlijnen.nl/

[ Voor 32% gewijzigd door Cousin Boneless op 17-07-2008 01:04 . Reden: zelfde pagina, andere tab ]

donderdag 17 juli 2008 01:03

Acties:

0 Henk 'm!

disjfa

be

Cousin Boneless schreef op donderdag 17 juli 2008 @ 01:01:
Ik doel op deze website: http://www.webrichtlijnen...ellen/layout/richtlijnen/

Alinea daarop:

Wat een CSS layout niet is

Webontwikkelaars spreken nog wel eens over een DIV-layout. In de broncode is alle tabel markup vervangen door div markup. Soms is zelfs nagenoeg alle markup vervangen door div elementen. Het div element is een element waarvan de betekenis neutraal is. De markup van een document dient juist zoveel mogelijk de inhoud te beschrijven.

disjfa - disj·fa (meneer)
disjfa.nl

donderdag 17 juli 2008 09:17

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Cousin Boneless schreef op donderdag 17 juli 2008 @ 00:05:
De fout in het gebruik van de z-index is dat er 3th party componenten zijn die denken dat ze op top staan als ze z-index:1 geven. En dan mag je gaan zoeken in obfuscated code waar het aan kan liggen.
Even om aan te geven voor welk 'probleem' we een oplossing zoeken en welke elegantie er overboord wordt gegooid:

Ehm... betere 3rd party componenten gebruiken? Een component dat hier werkelijk vanuitgaat is natuurlijk gemaakt door een prutser.

HTML:

1 2	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

HTML4 transitional

donderdag 17 juli 2008 11:22

Acties:

0 Henk 'm!

Anoniem: 175028

Cousin Boneless schreef op donderdag 17 juli 2008 @ 00:05:
De fout in het gebruik van de z-index is dat er 3th party componenten zijn die denken dat ze op top staan als ze z-index:1 geven. En dan mag je gaan zoeken in obfuscated code waar het aan kan liggen. En dan komt mijn vorige post om de hoek kijken: er is (nog) geen mogelijkheid om de maximale z-index te bepalen, of je moet al door alle elementen gaan loopen.

Heb je misschien een linkje naar een artikel ofzo?
Ik heb op Google gezocht en kon er niets over vinden.

Mijn grote ergernis (ik heb m'n frustraties proberen te onderdrukken) is dat er vanuit de overheid wordt aangedrongen om divs te gebruiken, maar deze meneer die dat bedacht heeft en zelf waarschijnlijk nog geen letter in css heeft getikt, staat er niet bij stil wat voor hel hij daarmee ontketent.

Ik durf met vrij veel zekerheid te zeggen dat onze overheid bij lange na niet genoeg invloed heeft om zo ongeveer alle webdevvers in de wereld over te halen van tabel-layouts af te stappen. Daar komt nog bij dat de eerste versie van die site afstamt uit oktober 2004, toen was de overgang van tabel-layouts naar CSS-layouts al een tijdje in volle gang.

Met alle truuks die worden toegepast om dit te bereiken creeer je een enorm onderhoudsprobleem. En dat terwijl je je site ook met tables kan vormgeven, waarvan je met 99% zekerheid kan zeggen dat het over 10 jaar nog werkt.

Welk onderhoudsprobleem?
Als je één keer een layout maakt die voldoet aan de W3C standaarden en op dit moment in alle browsers werkt, dan werkt hij over 10, waarschijnlijk ook zelfs 20 jaar nog precies hetzelfde. Die standaarden veranderen niet en als de juiste DTD boven je pagina staat weten de browsers over 10 jaar ook nog hoe de pagina gerenderd moet worden.

Om op dat semantische punt terug te komen. Wie heeft bedacht wat de semantiek van de table is? Naar mijn weten is de table layout al zo oud als Java. Dus de semantiek in de volksmond zal zijn: iets dat er uitziet als een table.

Tabellen zijn, zoals de naam al aangeeft, voor tabulaire data.
Volgens Van Dale:
ta·bel (de; tabellen; tabelletje)
1 lijst die een overzicht geeft van een aantal feiten of gegevens
Volgens Wikipedia:
Een tabel is een matrix van kleine eenheden, cellen genaamd, die in veel gevallen bedoeld is om gegevens overzichtelijk te presenteren.

Volgens mij valt een layout onder geen van beide.

Bandbreedte: Compress je stream en de overhead van de tablerows en tablecells is weg.

Hetzelfde kan met CSS-layouts. CSS-layouts zullen vrijwel altijd minder bandbreedte verbruiken.

Readers: kunnen ze best slimmer maken. Ik wil best een attribute invullen dat het geen table is uit de boekhoudkunde, zodat readspeaker of welk ander pakket geen intonatie gaat toepassen.

Het gaat niet om de intonatie, maar om hoe het voorgelezen wordt. Screen readers lopen van links naar rechts, van boven naar beneden door een tabel heen, omdat dit zo in de broncode staat. Bij CSS is het mogelijk om belangrijke content boven in de broncode te plaatsen waardoor screen readers daar eerder bij komen en niet eerst heel de navigatie voor gaan lezen.
Dit is tegelijkertijd ook een voordeel op het gebied van SEO, omdat je zelf kan bepalen wat er hoger in de broncode komt te staan.

Lastig aanpassen: No way. Juist heel overzichtelijk als je goed inspringt.

Als je bij een complexe tabel-layout een cel weg wil halen of erbij wil zetten is dat (meestal) toch heel wat meer werk dan bij een CSS-layout. Bij tabel-layout moet je dan heel vaak letten op de omliggende cellen, bij CSS-layouts hoeft dit vaak niet (afhankelijk van wat je aan wil passen).
Natuurlijk is dit niet in alle gevallen zo en is het bij sommige tabel-layouts zo dat ze makkelijker aan te passen zijn dan hun CSS-layout equivalent.

Opbouw pagina: vooruit een voordeeltje voor de div-layout. Maar merk je dat op een breedband internet aansluiting?

Nog niet iedereen heeft een snelle internetverbinding, al zal dat denk ik niet lang meer duren.

Even om aan te geven voor welk 'probleem' we een oplossing zoeken en welke elegantie er overboord wordt gegooid:
<code>

Ik zie het grote verschil tussen jouw en mijn oplossing niet helemaal (op de kleuren en borders na, maar die kan je er zo in zetten).
Ik hoor graag wat er volgens jou mis is met mijn oplossing (in het geval van de z-index graag een linkje), dan zal ik kijken of ik er iets aan kan doen

vrijdag 18 juli 2008 18:34

Acties:

0 Henk 'm!

Cousin Boneless

@imro: Bedankt voor je verhelderende uitleg. (en de anderen natuurlijk ook)
En laat ik even duidelijk maken dat ik hier ook maar rond hang om wat te leren en niet om mijn pedante mening te uiten. De kern van mijn betoog is eigenlijk: "hoe heeft het zover kunnen komen?"
In elk segment van het vakgebied streven we naar aantoonbaar functioneren, maar als het om websites gaat, dan lijkt het functioneren van ondergeschikt belang.
En dat is vreemd.. omdat we met de table een ontzettend krachtige tool in handen hebben. Was het dan niet voor de handliggend geweest dat er, gezien de kritiek op de table, een oplossing wordt geboden die net zo krachtig is als de table en net zo semantisch correct als het gebruik van div en met de genoemde voordelen? En geldt er dan niet dat we de ontwikkeling daarvan afwachten en pas massaal overstappen als het zijn werking heeft bewezen?

Het gaat mij dus ook niet om het op de korrel nemen van de voorbeelden, maar ik wil wel zeggen (tegen de hele webwereld) waar zijn we nou helemaal mee bezig? Moeten we niet even wachten tot de display:table-cell, of slots layout wordt ondersteund, zodat we de divjes mooi naast elkaar kunnen positioneren ipv over elkaar met een padding om er de helft maar van te tonen.

Deze oplossingen vallen wat dat betreft de nog mee. Ik heb ook oplossingen gezien voor triviale functionaliteit met 'expression' in de CSS, behaviors (.htc) of javascript (al dan niet in de css), gebruik van '* html' en 'if' commentaar.

De argumenten zijn alle valide, maar de consessies die ervoor gedaan worden zijn naar mijn idee veel te groot. En langs de zijlijn blijven staan is geen optie. Je bent als table-layout maker de roker die buiten het café moet staan paffen.

Puntsgewijs ga ik even je vragen bij langs:

Heb je misschien een linkje naar een artikel ofzo?
Ik heb op Google gezocht en kon er niets over vinden.

Nee helaas (component zal wel gebanned zijn). Het is inderdaad een verouderd ding, maar het probleem is generiek: Stel je maakt geen site, maar een component. Als dit component ook met een div-layout is gedaan, moet het component (zeg een customcontrol) dus al weten welke z-indexen het moet gebruiken om enerzijds niet achter de content te vallen en anderzijds niet een hogere index te hebben dan die div-popup die tegelijk op de website getoond kan worden. Vanuit OO oogpunt vind ik het niet correct dat het component kennis heeft van de omgeving waarin het gebruikt wordt.

Welk onderhoudsprobleem?
Als je één keer een layout maakt die voldoet aan de W3C standaarden en op dit moment in alle browsers werkt, dan werkt hij over 10, waarschijnlijk ook zelfs 20 jaar nog precies hetzelfde.

Het is een beetje te vergelijken met de periode voordat DOM werd toegevoegd. Heel veel scripts zijn in elkaar gedonderd. En qua browser detectie lijkt dit probleem zich voor css te herhalen. Nu willens en wetens de ontwikkelaars. Het gebruik van quirks is niet bevorderlijk voor nieuwe technologie. In jouw voorbeeld kom ik overigens niet iets tegen wat hier onder valt. Dus, ja het doet waarschijnlijk over 10 jaar nog het zelfde.

Volgens Wikipedia:
Een tabel is een matrix van kleine eenheden, cellen genaamd, die in veel gevallen bedoeld is om gegevens overzichtelijk te presenteren.

Precies zoals ik een table-layout zou omschrijven. In een computerprogramma geldt een abstracte benadering van een gegeven in de wereld. Als je het over een canvas hebt, heb je het ook niet over een doek op een schildersezel. Als de naam 'table' niet gebruikt mag worden, dan wordt het tijd om een custom DTD in de pagina te hangen die de custom tags LayoutTable, LayoutTr en LayoutTd implementeert.
http://java.sun.com/products/jfc/tsc/articles/tablelayout/

Het gaat niet om de intonatie, maar om hoe het voorgelezen wordt. Screen readers lopen van links naar rechts, van boven naar beneden door een tabel heen, omdat dit zo in de broncode staat. Bij CSS is het mogelijk om belangrijke content boven in de broncode te plaatsen waardoor screen readers daar eerder bij komen en niet eerst heel de navigatie voor gaan lezen.

Daarin geef ik je gelijk. Dit is hetzelfde als het SEO argument. Echter.. als ik in jouw voorbeeld de volgorde van de div's aanpas, stort ook jouw pagina in elkaar. Je streeft wel naar een strict onderscheid tussen inhoud en layout, maar het doel wordt met deze inferieure techniek niet bereikt.

Als je bij een complexe tabel-layout een cel weg wil halen of erbij wil zetten is dat (meestal) toch heel wat meer werk dan bij een CSS-layout. Bij tabel-layout moet je dan heel vaak letten op de omliggende cellen, bij CSS-layouts hoeft dit vaak niet (afhankelijk van wat je aan wil passen).

Dus dat geldt bij div-gebruikt alleen bij absolute positionering.

Ik hoor graag wat er volgens jou mis is met mijn oplossing (in het geval van de z-index graag een linkje), dan zal ik kijken of ik er iets aan kan doen

Je oplossing werkt inderdaad in de zin dat de bezoeker voorgeschoteld krijgt wat jij als bouwer hebt bedacht. Bij IE7 treedt bij het resizen een knippereffect op waarna de layout soms niet correct herstelt (ook niet na een refresh vreemdgenoeg). Safari, FireFox en Opera doen dat beter. Wordt de site te smal, dan verspringt de content onder het menu en col3 erachter. Overigens lijkt me dat niet echt storend bij normaal gebruik.
Maar als je 'm op de mobiel wil bekijken, weet ik niet wat er dan gaat gebeuren.
Als men hier beweert dat een div site beter te zien is op een mobiel, dan geloof ik dat meteen

Mijn grote bezwaar tegen je oplossing is dat de divs niet netjes naast en onder elkaar staan, maar elkaar ten dele overlappen. Dat is niet omdat je het zo wil, maar omdat je een techniek gebruikt die geen voorzieningen heeft om dit goed te doen.

Ik wil het hierbij laten. Zal in de toekomst niets meer aanmerken op div-layout en de voorbeelden enkel ter leering ende vermaeck tot mij nemen

vrijdag 18 juli 2008 18:41

Acties:

0 Henk 'm!

Anoniem: 26306

Ooit zou ik hier een goede reply hebben getikt, maar eigenlijk heb ik daar geen zin meer in.

zaterdag 19 juli 2008 12:42

Acties:

0 Henk 'm!

Anoniem: 110237

Misschien had je dan niets moeten zeggen

Wat in mij rondging, toen ik de vorige reply van boneless las:
css-float helpt zodanig bij het juist horizontaal positioneren van (block-)elementen.
De bandbreedte is zeer van belang! Tweakers serveert zoveel personen een zeer uitgebreide pagina. Om alle (met breedbandvoorziende) gebruikers snel hun pagina te kunnen geven is elke byte/proccyclus meegenomen. Vooral uitstekend gekozen is om achteraf (via de dom-tree in js) de advertenties te laden. SEO- en gebruikersvriendelijk (qwa wachttijd).

zaterdag 19 juli 2008 13:03

Acties:

0 Henk 'm!

Kiphaas7

Anoniem: 110237 schreef op zaterdag 19 juli 2008 @ 12:42:
Misschien had je dan niets moeten zeggen

Wat in mij rondging, toen ik de vorige reply van boneless las:
css-float helpt zodanig bij het juist horizontaal positioneren van (block-)elementen.
De bandbreedte is zeer van belang! Tweakers serveert zoveel personen een zeer uitgebreide pagina. Om alle (met breedbandvoorziende) gebruikers snel hun pagina te kunnen geven is elke byte/proccyclus meegenomen. Vooral uitstekend gekozen is om achteraf (via de dom-tree in js) de advertenties te laden. SEO- en gebruikersvriendelijk (qwa wachttijd).

Nog SEO en gebruiksvriendelijker was helemaal geen advertenties te plaatsen.

offtopic:
Moet toch een beetje tegen al dit tweakers.net kontkussen ingaan

. Mag ik bij deze dan ook mijn afschuw uitspreken over de flash overlay advertenties die ik de laatste tijd op de frontpage zie? Lijkt wel of ik op 9292ov.nl zit....

[ Voor 10% gewijzigd door Kiphaas7 op 19-07-2008 13:05 ]

zondag 20 juli 2008 18:25

Acties:

0 Henk 'm!

XangadiX

trepanatie is zóó kinderachtig

Tjeu, ben ik weer in 2002 ??

Tabellen zijn niet voor vormgeving, ik geloof dat de redenen gegeven zijn. luiheid vind ik eerlijk gezegd een slecht argument; en dat is toch een beetje de kern van de redenering "het is makkelijker". Misschien voor een site van een visclub of van een dispuut; maar zodra er ook maar iets serieus bij een site komt kijken dan vind iedereen, van de klant tot aan de database programmeur het heel prettig als er iemand netjes css'ed. (argument had ik nog niet gehoord)

Stoer; Marduq

zondag 20 juli 2008 22:14

Acties:

0 Henk 'm!

Anoniem: 53628

XangadiX schreef op zondag 20 juli 2008 @ 18:25:
Tjeu, ben ik weer in 2002 ??

Tabellen zijn niet voor vormgeving, ik geloof dat de redenen gegeven zijn. luiheid vind ik eerlijk gezegd een slecht argument; en dat is toch een beetje de kern van de redenering "het is makkelijker". Misschien voor een site van een visclub of van een dispuut; maar zodra er ook maar iets serieus bij een site komt kijken dan vind iedereen, van de klant tot aan de database programmeur het heel prettig als er iemand netjes css'ed. (argument had ik nog niet gehoord)

Het fijne van divs is dat er layouts gemaakt kunnen worden die onmogelijk te maken zijn met tabellen. Denk hierbij bijvoorbeeld aan pagina met buttons die over de hele pagina gebruikt kunnen worden en daarom op een vaste plaats in het beeld blijven staan. Menu's die je altijd netjes in beeld blijven.

En met de huidige breedbeeld monitoren en monster resoluties: Waarom zou je niet?

Anno 2008,5 is haast bijna niets van dit nog waar en ontwikkelen we al onze webpagina's nog met tabel inzichten. Sommige zelfs nog meer bekrompen; als micro sites van net iets meer pixels dan een betaalbare beeldbuis uit de jaren 90.

En dat alles omdat het makkelijker is? Oeroude browser support dan? Nee! We willen gewoon retro zijn. Mogen we

.

zondag 20 juli 2008 22:25

Acties:

0 Henk 'm!

Noork

Anoniem: 53628 schreef op zondag 20 juli 2008 @ 22:14:
[...]

En met de huidige breedbeeld monitoren en monster resoluties: Waarom zou je niet?

Anno 2008,5 is haast bijna niets van dit nog waar en ontwikkelen we al onze webpagina's nog met tabel inzichten. Sommige zelfs nog meer bekrompen; als micro sites van net iets meer pixels dan een betaalbare beeldbuis uit de jaren 90.

Bedoel je dat je liever een site in 1650 pixels breed ziet, dan een van 800 a 1000 pixels? Dat leest toch helemaal niet prettig?

zondag 20 juli 2008 22:47

Acties:

0 Henk 'm!

imp4ct

Ik vind het eigenlijk raar dat deze discussies nog bestaan. De tijd DIV vs TABLE is toch wel al lang gestreden. Het gebruik van CSS is een zaligheid, goed en krachtige CSS schrijven dat is een andere zaak.

Wat denk ik het allerbelangrijkste is, is eens dat mensen leren waarvoor de HTML elementen dienen. Ik denk dat dit tegenwoordig het grootste probleem is dat beginnende "coders" met het idee rondlopen dat alles met div's werkt en dat tables gewoon niet meer bestaan.

Raar maar waar... de allerbeste symantische website zal zelfs tables gebruiken, als dit nodig is... en wanneer is dit nodig.. rara.. als je een tabellen, lijsten maakt enz...

Hoe dan ook, spijtig dat Cheetah geen antwoord meer wilt schrijven, wijze jongen.

Bedrijf : Webtrix

Foto materiaal:
Nikon D7100 | Nikor AF-S DX 18-105mm | Nikor AF-S 50mm | Nikon SB600

zondag 20 juli 2008 23:04

Acties:

0 Henk 'm!

Cousin Boneless

Ik zie dat er in het verleden al heel wat topics aan zijn gewijd. Onbegonnen werk om ze allemaal door te nemen, maar ik zal er eens in spitten om de antwoorden te vinden en tot welke consensus men is gekomen.

maandag 21 juli 2008 00:37

Acties:

0 Henk 'm!

Anoniem: 53628

Noork schreef op zondag 20 juli 2008 @ 22:25:
[...]

Bedoel je dat je liever een site in 1650 pixels breed ziet, dan een van 800 a 1000 pixels? Dat leest toch helemaal niet prettig?

Wat ik eigenlijk bedoelde:
http://www.pwiv.nl/GOT/Voorbeeld.png

Meer schermpjes op de pagina dus. In het voorbeeld hierboven zou dus het reply scherm een vaste positie hebben terwijl er wel naar boven of beneden gescrollt kan worden (eventueel met knop om het zicht- of onzichtbaar te maken).
Dan wordt het (div) design boven elk tabel design geplaatst omdat dit gewoonweg niet mogelijk is met een tabel (hooguit met js misschien maar met goede div/css code wil niemand dat).

De technische (semantiek, gemak) discussie is best interessant maar al te vaak gevoerd. Een kleine site die weinig content heeft, kan prima af met een zeer eenvoudig div (of wat mij betreft tabel) ontwerp. Van middel tot grote complexe sites die veel aanbieden zou je onderhand een veel beter gebruikers model mogen verwachten. Een overweging tussen table of div zou er niet eens meer mogen zijn omdat het technisch niet uit te voeren is.

Helaas lopen de ontwerpen (in combinatie met de hedendaagse techniek) 10-6 jaar achter. Wie interesseert zich dan nog de div/tabel discussie? Gewoon even gniffelen, nog een keer doen alsof het moeilijk is en schrijven maar.

Nu is het wachten op splitters (in (x)html+css natuurlijk). Graag over een paar jaar de technische mogelijkheid dan kunnen we over 20 jaar daar wat mee gaan doen

[ Voor 3% gewijzigd door Anoniem: 53628 op 21-07-2008 00:40 ]