Vraagje over CSS

Hi,

Ik zit eens door de broncode van de voorpagina van macosx heen te neuzen, en zie dat daar dus helemaal geen html tabellen meer in voorkomen.

Wanneer je een website helemaal CSS maakt, is dit dan ook de bedoeling? Dus dat er helemaal geen html tabellen meer in zitten?

Ik heb nu namelijk een mooie website in HTML gebouwd, maar ja, je moet toch met de technologie mee zeggen ze altijd. vandaar dat ik me ook afvraag wat nu precies de voordelen zijn van zo’n CSS based website?

"Separate content from presentation" is wel een mooie kernzin hiervoor. Ik raad je toch heel sterk aan het boek van Zeldman te gaan lezen Koek :wink:

Zeldman weet je op uiterst luchtige wijze te overtuigen van het voordeel geen tabellen (tenzij het om tubular data gaat) meer te gebruiken…

Een logische HTML markup en het designgebeuren definieer je allemaal in CSS zodat je content ook op logische en begrijpelijke manier te lezen is in textbrowsers, PDA’s e.d.

Even herhalen wat ik in eerdere topic zei: Een website bouwen met webstandards is geen tabel-haten, maar tabellen gebruiken waarvoor ze bedoelt zijn, namelijk het weergeven van tabular data (bv. een prijslijst).

Het is sinds het onstaan één grote misvatting geweest dat tabellen tot layout dienen. Voor layout gebruik je div’s.

De voordelen van CSS zijn enorm, indien je CSS en XHTML correct gebruikt weliswaar. Om er maar enkele te noemen:

  • Je website zal er in elke moderne browser bijna idem uitzien. Geen “browser sniffing” en dergelijke meer. Een opmerking die wel moet gemaakt worden is dat in sommige (voornamelijke oudere) browsers bepaalde elementen van CSS verkeerd zijn geïmplementeerd, maar daar zijn workarounds voor.
  • Met gestructureerde XHTML en CSS kan je de laadtijd van je website enorm verkleinen.
  • Je website zal er ook even goed blijven uit zien in toekomstige browsers.
  • Je website wordt ook bereikbaar voor mensen met ongewone browsers, namelijk op PDA’s en dergelijke.

Zoals Syndic net zei kan je best Designing with Web Standards aanschaffen indien je je er in wil verdiepen, het loont je (en je bezoekers) werkelijk de moeite.

Over tabellen :

Tabellen zijn een zeer nuttig middel om samenhangende informatie op een inzichtelijke manier te visualiseren. Niks mis mee, de <table>-tag is een onmisbaar instrument.

Maar wat er gebeurt is, is dat de <table> tag gebruikt ging worden om grafische layout mogelijk te maken bij gebrek aan iets beters in de tijd dat Netscape 4 en IE 4 populair werden.

HTML is geen layout taal, het is een structuur taal: een taal om tekst te structureren zodat een lezer van die taal weet wat een paragraaf is en wat een kop in een brei met woorden.

Omdat het oog ook wat wil is er een taaltje ontwikkelt die het mogelijk maakt om die gestructureerde pagina’s leuk te laten smoelen: CSS.

Wat zijn de voordelen?

  • Zelfde tekst kunnen hergebruiken met verschillende layout vormen (zie http://www.csszengarden.com als het ultieme voorbeeld). Dit is met name belangrijk als je voor verschillende apparaten moet ontwikkelen. Een layout die het goed doet op een 1024*768 scherm werkt vaak niet op een schermpje van een Nokia telefoon.
  • Toegankelijkheid: als je de structuur van een tekst gaat vervuilen met andere structurele tags (zoals table) om een layout te forceren, dan heb je vaak een zwaar probleem als je bijv. blind bent. Als de tekst over verschillende tabelcellen wordt uitgesmeerd probeer dan nog maar eens te begrijpen waar de pagina over gaat. Hetzelfde geld voor andere visiuele handicaps. Een klein font met een pastelkleurtje op een pastelachtergrond mag er sexy uitzien, maar als je visueel gehandicapt bent dan kan je het niet lezen. Met CSS kan je alternatieve versies aanbieden zonder dat je een nieuwe pagina moet bouwen. Hetzelfde geldt voor een printversie van een pagina.

Verder zijn er wat praktische voordelen:

  • kleinere pagina’s
  • makkelijker onderhoud. Een verandering aan de layout kan je regelen vanuit 1 CSS bestand voor je hele website
  • betere zoekresultaten in search engines, omdat de samenhang in je tekst via HTML goed gestructureerd kan worden ongeacht hoe het smoelt. Google ziet alleen tekst.

meer: http://www.webstandards.org/about/mission/nl/

Ik heb gemerkt dat sites maken in CSS ook veel leuker is. 'Vroeger' maakte sites altijd in GoLive. Maar sinds ik ze in CSS maak, doe ik het in een texteditor (bbedit). Lijkt ingewikkeld, maar CSS/XHTML is nu eenmaal veel helderder en overzichtelijker.

Het boek van zeldman heb ik inderdaad zojuist besteld. Was bij amazon.ca ook maar iets van €25, dus das niet slecht.

Ik weet dat er met CSS veel meer mogelijk is, vandaar dat ik er nu mee aan de slag wil. Volgens mij valt er inderdaad ook wel wat snelheid mee te winnen :slight_smile:

Dus als ik even zo vrij mag zijn;

  • bij een css opmaak verdwijnen inderdaad alle tabellen (behavle wanneer gebruikt voor tabular inhoud)
  • alle tabellen kunnen dan in principe verdwijnen, om vervangen te worden door divjes

Het enige probleem wat ik hiermee heb is dat de css bestanden van bijvoorbeeld macosx.nl voorpagina er nogal duizelingwekkend uitzien…

Inderdaad, je brengt structuur in je content door middel van XHTML, de opmaak doe je met CSS. Het is een heel andere manier van denken, maar als je er even mee bezig bent ontdek dat je veel meer layoutmogelijkheden hebt verkregen met CSS.

Deze website heb ik onlangs omgezet in XHTML/CSS (is ook een topic over gepost): http://users.skynet.be/bert_fonteyn/valentinus/welkom.html Ik maak hierbij slechts gebruik van 5 div’s. Met traditionele HTML zou je hier onnoemelijk veel cellen, tabellen, enz. voor nodig hebben.

Aan de CSS van de voorpagina van macosx.nl moet je je als beginner op het gebied van CSS heus nog niet verkijken. Het gaat hier om een behoorlijk grote website.

En hier alvast wat handige links van resources en tutorials over CSS :wink:

Boxlessons
Alistapart (veel handige tutorials)
Rollover listst (TIP!)
Layout enzo
Eric Meyer
The complete CSS tutorial
CSS Design Gallery

Heel veel nuttige CSS links: http://forum.macosx.nl/viewtopic.php?t=14632 Automatische menu maker: http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp

Leuke discussie, ik denk dat je het meest aan [url=http://www.alistapart.com/]alistapart[/url] hebt, volgensmij maken die zo'n beetje de beste artikelen erover.

De macosx stylesheet ziet er zo ingewikkeld uit omdat (a) ik met mijn fikken eraan gezeten heb en (b) Adriaan toch echt een bordertje om een dingetje op precies 3 px vanaf de zijkant wilde hebben.

Vergeet niet om als je een pagina in CSS gaat bouwen eerst naar de kale pagina te kijken of het allemaal leesbaar en logisch is. Een van de geheimen van CSS is namelijk dat wanneer de onderliggende structuur van de pagina niet lekker is je ook je layout nooit goed krijgt.

Ben niet zo vaak meer hier omdat er nog niet zoveel over CSS geschreven werd. Nu kom ik eens kijken en waarempel: het laatste jaar is de webontwikkeling tak binnen het forum enorm uitgebreid.

Ook ik loop af en toe flink tegen layout problemen aan en wil toch echt voornamelijk CSS gebruiken. Zo ben ik bezig met een site voor mijn zwager (www.huisvandavid.nl/dev/) die ik in CSS heb gebouwd - geen tables :wink:

Helaas gaat dat niet op elke browser goed en ben dus een beetje aan eht sniffen geweest - maar dat wil ik niet!!!

Lay-out is voor mij toch wel een van de moeilijkere dingen als het om crossbrowser compatibiliteit gaat… Een workshop alleen al daarover zou me goed doen!

Groenten!
Henjo[/url]

Nog een vraag dan (ik wil nml nu al aan de slag, voordat mijn boeken er zijn), Hoe zit het met formulieren. Is het de bedoeling dat je die gewoon in een tabel laat staan of word verwacht dat je dat ook helemaal in css voor elkaar krijgt?

De vraag is of een form een samenhangende verzameling data is die middels een tabelvorm het best gerepresenteerd kan worden.

Hoe je het vervolgens laat smoelen is vers 2.

Nogmaals: CSS IS NIET ANTI-TABEL, alleen zijn tabellen nooit bedoelt als pagina opmaak instrument.

Leuk voorbeeld: http://www.picment.com/articles/css/funwithforms/

Heb het Zeldman boek inmiddels binnengekregen en ben inmiddels aanbeland in hoofdstuk 5. Ik ben redelijk overtuigd van de voordelen van CSS, en ben klaar om er lekker mee aan de slag te gaan.

Ik zou alleen graag websites die jullie zelf helemaal in CSS / XHTML, ofterwijl forward compatible, hebben gemaakt wel willen zien. Ik heb nu veel vragen, vooral over formulieren en ik ben gewoon heel benieuwd hoe jullie websites eruit zien en hoe jullie stylesheet eruit ziet.

Thanks!

http://www.noipo.org

http://www.photovictim.com

http://www.macosx.nl

Persoonlijke website: [url]http://www.oak3.be[/url]

XHTML/CSS restyling van een door mij ontwikkelde website: http://users.skynet.be/bert_fonteyn/valentinus/welkom.html

Om maar geen forum vervuiling te veroorzaken hou ik mijn vraag gewoon even in dit topic.

Allereerst; Zeldman uit. Goed boek. Nog wel veel onduidelijkheden betreft het werken met CSS. Maar daarom heb ik ook Eric Meyer on CSS erbij gekocht, want ik vermoedde al dat Zeldman meer een overtuigingsboek zou zijn…

Ten tweede:
Nu wil ik een site zowel horizontaal als verticaal centreren in een venster.
Hoe zou ik dit doen? heb zitten zoeken en puzzelen, maar kom er niet uit.
Helaas zit ik nu niet achter mijn eigen computer, maar ik zal morgen (maandag) even een voorbeeldje posten van het CSS wat ik nu heb.

Tot die tijd, als iemand tips of suggesties heeft; gaarne!

Dit is ongeveer de vierde keer binnen een week dat dezelfde vraag gesteld wordt. Kennelijk moeten we eens een f.a.q. onderwerp zien te maken.

Antwoord: http://www.wpdfd.com/editorial/wpd0103.htm#toptip

ook XHTML/CSS http://www.xs4all.nl/~lampekap/index.html Succes met je site