[Alg] Webdesign table/div/css

[ripexx]

Oke ik ben bezig met het ontwikkelen van een nieuwe site voor onze hockeyclub, nu ben ik redelijk uit de techmiek die ik wil gaan gebruiken. De data zal uit een MySQL db komen PHP zal gebruikt worden als scripttaal. De content, programateur en layout zullen doormiddel van templates worden gescheiden. Nu heb ik het template gedoe een beetje door en ben ik dus bezig met de layout van de site.

Na heel wat afgezocht te hebben ben ik onder andere tot de conclusie gekomen dat mijn manier van webdesign eigenlijk heel erg slecht is. Ik maak te weinig gebruik van stylesheet om de opmaakt te definieren en gebruik tabellen op een hele ranzige manier. Nu zie ik hier veel mensen spreken over div-jes. Zover ik weet zijn divjes layers maar dat gaat ook weer niet helemaal op.

Problemen waar ik nu tegen aanloop zijn wat is nou een goede en degelijke manier om een website optebouwen en te strucureren en wanneer maak je nu gebruik van div's en wanneer gebruikje nu tabellen? Zo loop ik tegen probelem aan bij het instellen van hoogtes, met de search heb ik al ontdekt dat dit eigenlijk niet de bedoeling is. Hier is een voorbeeldje van een eerste opzet:



Wanneer je kijkt naar de balk met daarin het form, dan is deze eigenlijk te hoog. Vervolgens zouden er allemaal nieuws items (5-10) oner elkaar moeten komen, nu kun je dit weer gaan defineren met tabellen of is juist hiervoor een div handig. Ik heb oa op www.w3schools.com gekeken maar daar vind ik ook weinig info.

Dus kort en krachtig wie heeft een aantal handig tips waar je rekening mee moet houden als je een site gaat bouwen, wat zijn de valkuilen die je moet vermijden.

[HunterPro]

Verval nooit in tabellen, dan is alle moeite die je in goeie CSS hebt gestoken voor niks geweest. Lees RFC's. Pruts, probeer, experimenteer.

Dat zijn eigenlijk mijn tips

[alienfruit]

Ik maak gewoon gebruik tabellen als het moet, als de web-site te bekijken moet zijn bij zoveel mensen (vaak het doel bij een web-site van een (web)winkel) dan maak ik echt geen gebruik van dit soort dingen.

[HunterPro]

alienfruit schreef op 26 mei 2003 @ 17:28:
Ik maak gewoon gebruik tabellen als het moet, als de web-site te bekijken moet zijn bij zoveel mensen (vaak het doel bij een web-site van een (web)winkel) dan maak ik echt geen gebruik van dit soort dingen.

dat is dus écht bullshit; noem jij me eens een browser die géén CSS ondersteunt en die door een deel (lees: een deel wat uitmaakt) van jóuw doelgroep wordt gebruikt.

[mocean]

Als je HTML 4.01 gebruikt (als standaard) kan je dingen prima met tabellen doen vind ik. DIV-jes zijn dan niet nodig, en HTML4.01 gaat al goed vanaf IE4+ en NS4+. Als je per se DIV denkt nodig te hebben is mischien je ontwerp wel te ingewikkeld. Kijk ook maar eens op www.drempelsweg.nl

Ik ben zelf laatst in aanraking gekomen met het fenomeen braille-schermen. Die mensen werken met Lynx browsers. En die kunnen met framesets/tabellen een stuk beter over weg dan met div-jes.

Anyway, mischien gaat dit wat ver voor een hockey-site. Maar als je je aan HTML4.01 is er niks mis mee.

[ripexx]

Problemen waar ik onder andere tegen aanloop zijn de hoogte instellingen en background colors. Uit de vele verschillende reacties in W&G is het me eigenlijk alleen maar onduidelijker geworden. De een gaat duidelijk voor css en div terwijl de ander voor de tabel kiest. Met name omdat er al snel gegooid wordt met RFC en standaarden, maar de browser van tegenwoordig pikken bijna alles. Alleen als dan iets niet werkt dan zit je ook echt met een probleem. Verder is cross-browser ondersteuning eigenlijk niet nodig. 99,8% maakt gebruik van IE 5+, die nekeling die gebruik maakt van NS/Moz/opera zijn dan ook op een hand te tellen.

Maar hebben jullie nog tips waar je op moet letten als je toch vanaf scatch af begint?

[OkkE]

Ik zou zeggen gebruik zo veel mogelijk DIV-jes en als je er echt niet uit komt, gebruik dan tabellen. Zo doe ik het ook altijd. Het liefste doe ik alles met DIV-jes, gewoon omdat ze daar voor bedoeld zijn. Maar sja, soms heb je een deadline en dan kan je nog wel een dag met DIV-jes klooien om het cross-browser te maken, maar dan is het soms beter tóch voor tabellen te kiezen.

Een zeer groot voordeel van DIV-jes is dat je ze in je CSS kunt positioneren, en zelfs met javascript dan weer kunt verplaatsen. Dit is onmogelijk met tabellen. Dus wil je eenvoudig je opmaak later kunnen aanpassen, dan is het overwegen van DIV-jes de moeite waard lijkt me.

Als laatse, er is toch ook eens een test gedaan door iemand, 1000 (of 10000) DIV-jes tegenover even veel cellen (in een tabel), en dan kijken wat het snelste was? Ik dacht DIV-jes.
Voordeel van DIV-jes is ook dat je gelijk de DIV-jes ziet, terwijl sommige (?) browsers bij tabellen wachten met het 'printen' ervan tot ze de laatste geladen hebben. Niet echt goed voor de snelheid dus.

[Verwijderd]

Aaaargh!!!

Nee, gebruik niet zoveel mogelijk divjes, gebruik nou gewoon het HTML element dat het best de data beschrijft. Een div gebruik ik het liefst alleen voor een 'sectie', of iets dergelijks. Content opsplitsen in grote brokken die niet zo gek veel met elkaar te maken hebben. Want ja, voor sommige dingen heb je geen element dat de data beter beschrijft.

Overigens verplaats ik tabellen net zo makkelijk als divjes hoor. Tabel is block-level element, div is block-level element. Tabel is alleen iets specifieker, en daarom gebruik je die eerder dan een div als het gaat om het weergeven van data in tabellen.

Je zou denken: 'duh', maar het kan ook met div's als je wat met de CSS display property rommelt. Maar we gaan niet moeilijk doen, dus we gaan geen elementen gebruiken die te weinig zeggen over de inhoud, als dat mogelijk is. Waarom niet? Nou, als je zo netjes mogelijk je HTML schrijft, ziet het er zelfs in Lynx redelijk uit.

/me denkt: denk nou eens niet in layers/divjes, denk in HTML

Met goed gebruik van HTML en CSS bespaar je tijd en moeite bij het vullen van een pagina met content, of met het bijwerken ervan. Bovendien is het voor alle browsers beter te interpreteren, alsmede door zoekmachines.

Gebruik tabellen als je tabellen nodig hebt, gebruik ze nooit waar je ze niet nodig hebt.

[Eärendil]

mocean schreef op 26 May 2003 @ 18:12:
Als je HTML 4.01 gebruikt (als standaard) kan je dingen prima met tabellen doen vind ik. DIV-jes zijn dan niet nodig, en HTML4.01 gaat al goed vanaf IE4+ en NS4+. Als je per se DIV denkt nodig te hebben is mischien je ontwerp wel te ingewikkeld.

Het maakt helemaal niets uit welke standaard je gebruikt of welke browser, ze ondersteunen allemaal TABLE en DIV. Alles is dus ook met DIV te doen. Ik vind dat veel netter, je maakt er alleen blokken mee die je ook echt gebruikt, en niet allerlei lege cellen om iets op een bepaalde positie te krijgen. De code wordt er meestal ook niet leesbaarder op.

Kijk ook maar eens op www.drempelsweg.nl

Ik ben zelf laatst in aanraking gekomen met het fenomeen braille-schermen. Die mensen werken met Lynx browsers. En die kunnen met framesets/tabellen een stuk beter over weg dan met div-jes.

Wel eens Lynx gebruikt? Die kan geen frames weergeven. Het is voor blinde mensen niet nuttig om iets in een tabel te zetten, dat de opmaak zien ze toch niet, maar ze lezen/horen wel dat het een tabel is, maar ze hebben geen voorstelling wat die tabel voorsteld (wij ook niet, maar wij zien waar elke kolom voor is). Gebruikers met een tekstbrowser als Lynx zullen ook meer hebben aan divjes, dan is dingen naast elkaar toch maar lastig.

Anyway, mischien gaat dit wat ver voor een hockey-site. Maar als je je aan HTML4.01 is er niks mis mee.

Dat is inderdaad goed, dat je een standaard volgt, als je veel opmaak met CSS wil doen is XHTML 1.1 leuk, daar zitten tags als <font> niet in.

[Bosmonster]

Eärendil schreef op 26 May 2003 @ 19:24:
[...]
Het maakt helemaal niets uit welke standaard je gebruikt of welke browser, ze ondersteunen allemaal TABLE en DIV. Alles is dus ook met DIV te doen. Ik vind dat veel netter, je maakt er alleen blokken mee die je ook echt gebruikt, en niet allerlei lege cellen om iets op een bepaalde positie te krijgen. De code wordt er meestal ook niet leesbaarder op.

Mwah.. als je HTML schrijft voor email dan ben je gebonden aan CSS-loze HTML 4. Leuk dat je dan DIV's hebt, maar zonder CSS zijn die dingen vrij nutteloos Dan heb je geen keus dan dingen op te maken met tables.

Maar email uitgezonderd, is alles wel mogelijk met CSS en de juiste containers en zijn tables niet nodig om je lay-out vast te stellen. Helaas kost een design opzetten helemaal met DIV's en CSS mij vaak te veel tijd, gepruts en ge-work-around (). En is een table dan 10x sneller neergezet en scheelt je vaak ook een berg code.

Iedereen schreeuwt hallelujah HTML/CSS, maar imho zijn de huidige browsers er gewoon nog niet klaar voor. Om alles een beetje normaal op te kunnen zetten heb je meer nodig dan CSS1 en helaas ondersteunt 90%+ van de gebruikers nog geen CSS2+. En ik heb simpelweg geen tijd om zoveel moeite in het uitvogelen van de HTML te stoppen en val dus regelmatig terug op tables om bepaalde grote vlakken snel in te delen.

Deadline = deadline...

[ Voor 37% gewijzigd door Bosmonster op 26-05-2003 20:07 ]

[Chiron]

Sowieso html in e-mail is een gruwelijk irritante no-no... niet iedereen gebruikt Outlook

[Verwijderd]

mocean schreef op 26 mei 2003 @ 18:12:
Als je HTML 4.01 gebruikt (als standaard) kan je dingen prima met tabellen doen vind ik. DIV-jes zijn dan niet nodig, en HTML4.01 gaat al goed vanaf IE4+ en NS4+. Als je per se DIV denkt nodig te hebben is mischien je ontwerp wel te ingewikkeld. Kijk ook maar eens op www.drempelsweg.nl

Hoe kan een ontwerp nou te ingewikkeld voor divs zijn? Met divs kan je juist heel mooi simpele sites maken. En die site die je noemt is echt een prima site voor divs. Kan er echt makkelijk mee gemaakt worden.

En het is gewoon heel simpel, de layout maak je met css en tabulaire data stop je in tabellen Das toch niet zo moeilijk.

[ Voor 10% gewijzigd door Verwijderd op 26-05-2003 22:39 ]

[Dennis]

Bosmonster schreef op 26 mei 2003 @ 20:00:
Mwah.. als je HTML schrijft voor email dan ben je gebonden aan CSS-loze HTML 4.

Waarom

[André]

Wat Cheatah zegt klopt als een bus, gebruik de elementen waarvoor ze bedoelt zijn.

Ik heb al diverse keren gelezen op bepaalde sites dat de kracht van css niet onderschat moet worden. Omdat je met css een element hele andere dingen kan laten doen dan waarvoor hij bedoelt is. Zo kun je ipv divjes ook <p>'s gebruiken om de boel te laten zien.

Het is met css zelfs mogelijk om alles met <p>'s te definieren, maar dan moet je alle <p>'s een class geven. dus: <p class='bold'> of <p class='h1'> of <p class='inline'>.

[Bosmonster]

Ener-G schreef op 26 mei 2003 @ 22:37:
Sowieso html in e-mail is een gruwelijk irritante no-no... niet iedereen gebruikt Outlook

Bijna alle andere emailclients die gebruikt worden tegenwoordig ondersteunen ook wel basis HTML 4 hoor Zelfs webmail dingen als Hotmail of Yahoo mail. Maar daarom dus wel HTML 4 en geen CSS, dan zit je bij de grootste groep ondersteuning. Er zijn wel meer regeltjes (zoals geen backgroundcolors/images), maar die ga ik hier niet allemaal noemen.. das resultaat van veel research

Voor nieuwsbrieven gebruik je nu eenmaal HTML anders hebben ze niet of nauwelijks commerciele waarde.

ddc schreef op 26 mei 2003 @ 22:39:
[...]

Waarom

Ehh.. Zie boven.. omdat niet alle emailclients/webmails dat ondersteunen en CSS-loze HTML 4 in meerderheid van de gevallen dus wel

[Verwijderd]

André schreef op 26 mei 2003 @ 23:08:
Het is met css zelfs mogelijk om alles met <p>'s te definieren, maar dan moet je alle <p>'s een class geven. dus: <p class='bold'> of <p class='h1'> of <p class='inline'>.

Dat kan ook prima zonder classes....

[Verwijderd]

ripexx schreef op 26 May 2003 @ 18:20:
.... De een gaat duidelijk voor css en div terwijl de ander voor de tabel kiest....

Ook met tabellen kun je gebruik maken van css hoor

[alienfruit]

Ja, klopt helemaal css is(zijn??) ook niet div/layers natuurlijk
Maar zelf vind ik layers e.d. gebruiken echt een kl*te werk in DreamWeaver lukt gewoon nooit in een keer goed en kost te veel geld (en tijd die je aan een beter betalend project kon besteden)

[ Voor 13% gewijzigd door alienfruit op 27-05-2003 10:33 ]

[Verwijderd]

en niemand gebruikt dus "snippets"? even een ouder projectje er bij pakken, positie en kleuren, fonts aanpassen et voila weer een tevreden klant (disclaimer! verkorte versie).

Tijd is echt een beetje onzin, html/css-hergebruik van reeds bestaande of lopende projecten scheelt bergen tijd en de tijd die je hebt gebruikt om een goede CSS opzet te maken voor het eerste project verdient zichzelf bij het tweede of derde project ruimschoots terug.

[Phydomir]

alienfruit schreef op 27 mei 2003 @ 10:32:
Ja, klopt helemaal css is(zijn??) ook niet div/layers natuurlijk
Maar zelf vind ik layers e.d. gebruiken echt een kl*te werk in DreamWeaver lukt gewoon nooit in een keer goed en kost te veel geld (en tijd die je aan een beter betalend project kon besteden)

Na aanleiding van dit topic heb ik een site die ik had in tabellen opnieuw gemaakt maar dan in layers. In 10 minuten had ik de site zoals ik uhm had in de tabellen. (ook in dreamweaver)

Denk dat ik voortaan alles met layers ga doen.

Ook moet ik me maar eens écht gaan verdiepen in CSS. Je kan er volgens mij veel meer mee dan dat ik nu denk dat ik er mee kan.

[alienfruit]

Nou ik dus echt niet he Phydomir, of het ligt aan dreamweaver maar ik krijg zoiets echt niet voor elkaar binnen 10minuten Laatst bijvoorbeeld wilde ik een drie kolommen met in de middelste een plaatje hebben; met een dikke omlijning erbij. Dit kreeg ik dus echt niet binnen tien minuten voro elkaar met layers, met tabellen is toch 5regels typen en je bent klaar.

Overigens vind ik het gebruiken van snippets van vorige projecten, lichte vorm van bedrog tegenover de klant; maar daar zullen we maar niet op in gaan

[Twan V]

Ik vraag me af of de keuze tabellen of divisions niet persoonlijk is. Iedereen schreeuwt hier vanalles door elkaar, maar als je gaat kijken naar professionele sites zie je ook dat hele lay-outs in tabellen gemaakt worden.

alienfruit schreef op 27 mei 2003 @ 12:35:
Overigens vind ik het gebruiken van snippets van vorige projecten, lichte vorm van bedrog tegenover de klant; maar daar zullen we maar niet op in gaan

Waarom? Het bedrijf waar ik nu (nog) werk werkt met asp-modules. Standaardapplicaties die elke keer in een andere lay-out gepropt worden, maar precies hetzelfde doen als op alle andere sites. We leggen dat ook uit aan de klant en vertellen erbij dat zo de ontwikkelkosten lager zijn en daardoor ook de kostprijs voor de klant.
Als je er maar eerlijk over bent werkt het eerder in je voordeel dan in je nadeel.

[ Voor 61% gewijzigd door Twan V op 27-05-2003 13:54 . Reden: quote... ]

[Mithrandir]

Twan V schreef op 27 mei 2003 @ 13:52:
Ik vraag me af of de keuze tabellen of divisions niet persoonlijk is. Iedereen schreeuwt hier vanalles door elkaar, maar als je gaat kijken naar professionele sites zie je ook dat hele lay-outs in tabellen gemaakt worden.


[...]


Waarom? Het bedrijf waar ik nu (nog) werk werkt met asp-modules. Standaardapplicaties die elke keer in een andere lay-out gepropt worden, maar precies hetzelfde doen als op alle andere sites. We leggen dat ook uit aan de klant en vertellen erbij dat zo de ontwikkelkosten lager zijn en daardoor ook de kostprijs voor de klant.
Als je er maar eerlijk over bent werkt het eerder in je voordeel dan in je nadeel.

'Professionele sites' willen een zo groot mogelijk publiek bereiken. Ook voor de laatste procent willen ze graag dat mensen die site wel kunnen bekijken. En waarom zou een site, die nog helemaal niet vernieuwd hoeft te worden, opeens herbouwd worden met divs? Zonde van tijd/geld.

[Clay]

Die professionele sites worden echt niet gemaakt door mensen die fundamenteel beter zijn dan wat hier in /13 zit daar zitten ook gewoon htmllers tussen die niet anders kunnen dan html 4, en nog steeds font tags gebruiken, mensen die html "erbij doen", of het wordt door wysiwyg applicaties uitgepoept.
Het verschil tussen een professionele site en een hobby site van iemand is ook regelmatig niets anders dan dat de klant voor zijn professionele site heeft betaald. Persoonlijk vind ik dan dat die sites, in haast gemaakt met alle deadlines, ook niet altijd een goed eikpunt om de "juiste" methode uit te concluderen.

Daarnaast zijn diegenen die het ook echt bouwen ook vaak de enigen die snappen wat het is, en hoe het moet. De meesten zien alleen de voorkant; hij werkt, of hij werkt niet.

[Verwijderd]

alienfruit schreef op 27 May 2003 @ 12:35:
Nou ik dus echt niet he Phydomir, of het ligt aan dreamweaver maar ik krijg zoiets echt niet voor elkaar binnen 10minuten Laatst bijvoorbeeld wilde ik een drie kolommen met in de middelste een plaatje hebben; met een dikke omlijning erbij. Dit kreeg ik dus echt niet binnen tien minuten voro elkaar met layers, met tabellen is toch 5regels typen en je bent klaar.

Niemand ontkent dat tabellen lekker makkelijk zijn voor bepaalde layout-situaties. Ik kom ook nog steeds ontwerpen tegen waarbij ik niet (helemaal) om layout-tabellen heen kan. Punt is dat het een gewoonte moet worden (om zoveel mogelijk met CSS op te lossen) zodat die situaties steeds minder voorkomen. Je code wordt schoner & kleiner, de site is makkelijker te onderhouden en je content is dusdanig opgemaakt dat het ook voor niet-visuele browsers zinvol is.

Overigens vind ik het gebruiken van snippets van vorige projecten, lichte vorm van bedrog tegenover de klant; maar daar zullen we maar niet op in gaan

Ik vind het eigenlijk precies andersom: voor elke volgende klant doen alsof je opnieuw het wiel aan het uitvinden bent is pas pure diefstal.