Hoofdcategorieën

[RSS] Forum » Devschuur® » Webdesign, Markup & Clientside Scripting » [html/css] Div Layout

Topicacties

[html/css] Div Layout

Pagina: 1 2 last

Reageer Nieuw Topic

offline Geplaatst op dinsdag 15 juli 2008 15:28

Acties: [view][quote]

Door: Cousin Boneless
Berichten: 67
Reg. datum: 24 juni 2008
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.
 

offline Geplaatst op dinsdag 15 juli 2008 16:21

Acties: [view][quote]

Door: Imro!
Berichten: 6
Reg. datum: 02 mei 2006
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!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>

Imro! wijzigde dit bericht 15-07-2008 16:50 (6%)

 

offline Geplaatst op dinsdag 15 juli 2008 16:38

Acties: [view][quote]

Door: Imagine
Is not an observer only
Berichten: 917
Reg. datum: 18 april 2002
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 :P .

Imagine wijzigde dit bericht 15-07-2008 17:05 (8%)

Pretending to be a pretender.
Mijn gear

offline Geplaatst op woensdag 16 juli 2008 13:44

Acties: [view][quote]

Door: Cousin Boneless
Berichten: 67
Reg. datum: 24 juni 2008
quote:
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)
 

offline Geplaatst op woensdag 16 juli 2008 18:11

Acties: [view][quote]

Door: Imro!
Berichten: 6
Reg. datum: 02 mei 2006
quote:
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.
 

offline Geplaatst op woensdag 16 juli 2008 19:03

Acties: [view][quote]

Door: Cousin Boneless
Berichten: 67
Reg. datum: 24 juni 2008
quote:
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.
 

offline Geplaatst op woensdag 16 juli 2008 19:13

Acties: [view][quote]

Door: Imro!
Berichten: 6
Reg. datum: 02 mei 2006
quote:
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.
 

offline Geplaatst op woensdag 16 juli 2008 23:45

Acties: [view][quote]

Door: curry684
left part of the evil twins
Berichten: 31.708
Reg. datum: 09 juni 2000
quote:
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.

Omines - ICGamers - Xbox Live gamertag

offline Geplaatst op donderdag 17 juli 2008 00:05

Acties: [view][quote]

Door: Cousin Boneless
Berichten: 67
Reg. datum: 24 juni 2008
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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>

Cousin Boneless wijzigde dit bericht 17-07-2008 00:34 (6%)

 

offline Geplaatst op donderdag 17 juli 2008 00:33

Acties: [view][quote]

Door: Imagine
Is not an observer only
Berichten: 917
Reg. datum: 18 april 2002
quote:
Cousin Boneless schreef op donderdag 17 juli 2008 @ 00:05:
HTML:
1
code

Mooie oplossing :P . 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.

Imagine wijzigde dit bericht 17-07-2008 00:48 (16%)

Pretending to be a pretender.
Mijn gear

offline Geplaatst op donderdag 17 juli 2008 00:35

Acties: [view][quote]

Door: curry684
left part of the evil twins
Berichten: 31.708
Reg. datum: 09 juni 2000
quote:
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?

Omines - ICGamers - Xbox Live gamertag

offline Geplaatst op donderdag 17 juli 2008 01:01

Acties: [view][quote]

Door: Cousin Boneless
Berichten: 67
Reg. datum: 24 juni 2008
Ik doel op deze website: http://www.webrichtlijnen.nl/

Cousin Boneless wijzigde dit bericht 17-07-2008 01:04 (32%)
Reden: zelfde pagina, andere tab

 

offline Geplaatst op donderdag 17 juli 2008 01:03

Acties: [view][quote]

Door: disjfa
be
Berichten: 24.680
Reg. datum: 10 april 2001
quote:
Cousin Boneless schreef op donderdag 17 juli 2008 @ 01:01:
Ik doel op deze website: http://www.webrichtlijnen...ellen/layout/richtlijnen/
Alinea daarop:
quote:
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
Speel mee: schuifpuzzle | indiegamer.nl

offline Geplaatst op donderdag 17 juli 2008 09:17

Acties: [view][quote]

Door: Bosmonster
azijnzeikerd
Berichten: 15.809
Reg. datum: 05 juni 2001
quote:
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.
quote:

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

HTML4 transitional :X

Zo, nu eerst even wat anders.

offline Geplaatst op donderdag 17 juli 2008 11:22

Acties: [view][quote]

Door: Imro!
Berichten: 6
Reg. datum: 02 mei 2006
quote:
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.
quote:
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.
quote:
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.
quote:
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.
quote:
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.
quote:
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.
quote:
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.
quote:
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.
quote:
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 ;)
 

offline Geplaatst op vrijdag 18 juli 2008 18:34

Acties: [view][quote]

Door: Cousin Boneless
Berichten: 67
Reg. datum: 24 juni 2008
@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:
quote:
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.
quote:
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.
quote:
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/
quote:
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.
quote:
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.
quote:
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 :)
 

offline Geplaatst op vrijdag 18 juli 2008 18:41

Acties: [view][quote]

Door: Cheatah
Lágrimas negras
Berichten: 17.144
Reg. datum: 31 mei 2001
Ooit zou ik hier een goede reply hebben getikt, maar eigenlijk heb ik daar geen zin meer in.

I finally found you, my personal slaughter. As an appetizer, I let you taste my daughter!
Call me sick but this is what I need. My only purpose here is for you to feed!

offline Geplaatst op zaterdag 19 juli 2008 12:42

Acties: [view][quote]

Door: fl!pulI
Berichten: 162
Reg. datum: 29 maart 2004
Misschien had je dan niets moeten zeggen :P

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).
 

offline Geplaatst op zaterdag 19 juli 2008 13:03

Acties: [view][quote]

Door: Kiphaas7
Woest [GoT]
Berichten: 332
Reg. datum: 03 februari 2005
quote:
fl!pulI schreef op zaterdag 19 juli 2008 @ 12:42:
Misschien had je dan niets moeten zeggen :P

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. :P

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....

Kiphaas7 wijzigde dit bericht 19-07-2008 13:05 (10%)

E6600 @ 3.03 Ghz @stock vcore @ scythe ninja | 2GB Corsair 5400CL4 | Geforce 7800GT

offline Geplaatst op zondag 20 juli 2008 18:25

Acties: [view][quote]

Door: XangadiX
Moderator WEB/GFX
trepanatie is zóó kinderachtig
Berichten: 4.622
Reg. datum: 24 oktober 2000
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)

Dus jij wil VJ worden, zo doe je dat: VjAcademy

offline Geplaatst op zondag 20 juli 2008 22:14

Acties: [view][quote]

Door: Imagine
Is not an observer only
Berichten: 917
Reg. datum: 18 april 2002
quote:
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 >:) .

Pretending to be a pretender.
Mijn gear

offline Geplaatst op zondag 20 juli 2008 22:25

Acties: [view][quote]

Door: Noork
Berichten: 5.978
Reg. datum: 30 juni 2001
quote:
Imagine 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?
 

offline Geplaatst op zondag 20 juli 2008 22:47

Acties: [view][quote]

Door: imp4ct
Berichten: 653
Reg. datum: 25 november 2003
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.

Website : Webtrix
WhatPulse : Join het GoT Pulse-Team!

Foto materiaal:
Nikon D70s | Nikor AF-S DX 18-70mm | Nikon SB600

offline Geplaatst op zondag 20 juli 2008 23:04

Acties: [view][quote]

Door: Cousin Boneless
Berichten: 67
Reg. datum: 24 juni 2008
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.
 

offline Geplaatst op maandag 21 juli 2008 00:37

Acties: [view][quote]

Door: Imagine
Is not an observer only
Berichten: 917
Reg. datum: 18 april 2002
quote:
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 :9

Imagine wijzigde dit bericht 21-07-2008 00:40 (3%)

Pretending to be a pretender.
Mijn gear

Pagina: 1 2 last

VNU Media logo Powered by True

© 1998 - 2008 Tweakers.net - Alle rechten voorbehouden

Uitgever van: