[CSS/XHTML] Probleem met de structuur *

[Verwijderd]

Ik ben bezig geweest om mijn site semantisch te maken. Ik gebruik hiervoor de browser 'Opera', vanwege de 'Gebruikersmodus'-functie. Hierin kun je een pagina zonder CSS weergeven. Ik heb geprobeerd om de pagina zonder CSS duidelijk te houden. Mooi gaat niet lukken zonder CSS, maar overzichtelijk wel.

Ik heb op mijn site 1 pagina, waarin ik 'creaties' toon. Ik laat daarbij het hele plaatje laten in een kleine thumbnail. Zo ziet de gebruiker niet zoveel van het laadproces omdat dit in het klein bezig is. Maar wanneer je dan op de thumbnail klikt, zie je de grotere versie, en die is al geladen, als thumbnail zijnde. Ik doe dit door het plaatje middels CSS te thumbnailen. Het zijn dus geen echte thumbnails, om eerder genoemde reden. Dit ziet er, wanneer de browser CSS ondersteunt, prima uit. Maar als ik CSS uit zet, zijn de afbeeldingen vrij groot.
Hoe ga ik dit oplossen in CSS? Ik wil namelijk dat -wanneer de gebruiker geen CSS ondersteunt- het plaatje niet (of het liefst kleiner) wordt weergegeven?

Ik heb er voor kunnen zorgen dat mijn header zonder CSS tekst is: 'hiddedevries.nl'. Wanneer de gebruiker CSS heeft, ziet hij de tekst niet, maar een plaatje. Dat is een veelgebruikte techniek op cssgarden. Kan ik iets soortgelijks toepassen voor mijn creaties-pagina?


Wat gebeurt er dus: bij de bovenste twee afbeeldingen gaat het zonder CSS goed. Maar bij de onderste niet, daar heb ik CSS nodig voor de thumbnails. Hoe gaat dit er ook zonder CSS goed uitzien?

klik voor het origineel

[ Voor 18% gewijzigd door Verwijderd op 22-10-2005 22:08 ]

[klokop]

Eh, door wel echte thumbnails te gebruiken...

[flashin]

-wanneer de gebruiker geen CSS ondersteunt-

Ik snap dat niet vaak, Hoeveel bezoekers heb je die geen CSS ondersteuning heeft? <1% volgens mij.
Dat je je site dan semantisch correct wilt hebben ok, gebruik dan echte thumbnails en zet bij ieder item ook een kopje zodat non-css gebruikers of non-img gebruikers ook weten waar het tekstje over gaat.

[Surkow]

flashin schreef op zaterdag 22 oktober 2005 @ 22:37:
[...]
Ik snap dat niet vaak, Hoeveel bezoekers heb je die geen CSS ondersteuning heeft? <1% volgens mij.
Dat je je site dan semantisch correct wilt hebben ok, gebruik dan echte thumbnails en zet bij ieder item ook een kopje zodat non-css gebruikers of non-img gebruikers ook weten waar het tekstje over gaat.

Speciale programma's voor blinden gebruiken bijvoorbeeld geen opmaak in websites. Heeft toch geen nut om dat te verwerken. Hierbij is het erg handig als alle info normaal ingedeeld is. En mensen met andere afwijkingen kunnen er misschien ook voor kiezen om de opmaak uit te schakelen.

[chris]

Je wil structurele markup, geen semantische markup (denk ik). Bij semantische markup ga ik toch eerder aan RDF of iets dergelijks denken .

Zie ook Structural vs. Semantic.

[ Voor 29% gewijzigd door chris op 23-10-2005 00:09 ]

[Verwijderd]

Ik gebruik hiervoor de browser 'Opera', vanwege de 'Gebruikersmodus'-functie. Hierin kun je een pagina zonder CSS weergeven.

ik gebruik opera eigenlijk zelden, dus ik weet niet wat er in de gebruikersmodus allemaal kan, maar voor firefox heb je de developer toolbar waar dat ook mee kan. bovendien kun je daar ook bv images en javascript mee uitschakelen, afmetingen van images laten zien en nog veel meer

[Verwijderd]

flashin schreef op zaterdag 22 oktober 2005 @ 22:37:
[...]
zet bij ieder item ook een kopje zodat non-css gebruikers of non-img gebruikers ook weten waar het tekstje over gaat.

Dat heb ik

& @chris: bedankt ik ga eens lezen.. Maar een voorbeeld van semantiek is toch, dat je <p> gebruikt voor stukjes tekst, en <hx> voor kopjes (en dan ook nog <h1> voor grote koppen, en <h4> voor kleintjes)?
Het beste is natuurlijk èn een structurele code èn een semantische code.

[ Voor 39% gewijzigd door Verwijderd op 23-10-2005 14:03 ]

[Verwijderd]

Semantisch web is vooral met XML, RDF, OWL, enzo.

Semantisch wil zeggen 'met betekenis', en dat is precies waar het om draait. Berners-Lee, tegenwoordig directeur van W3C, het World Wide Web Consortium, wil met 'tags' (codes voor een webbrowser) aangeven wat de informatie in een HTML-pagina voorstelt, en hoopt dat computers dankzij die codes óók kunnen begrijpen waar zo'n pagina over gaat.

Zie: http://www.vuiksvertier.nl/wetenschap/semantisch-web.htm

[Verwijderd]

Okee dan, mooi stukje leesvoer
Ik wil dus een structurele site, en niet semantisch.. Foutje van me!

Weet je ook hoe ik middels CSS kan zorgen dat iemand met een browser die geen CSS ondersteunt het plaatje niet ziet, terwijl iemand met CSS het plaatje wel ziet?

[chris]

Ik zou met een background-image werken.

Als je trouwens toch nog stiekem wel (x)html met semantiek wil: microformats en Dublin Core en (x)html.

[Zoefff]

Als je van de plaatjes échte thumbnails maakt, dus 100px breed oid, en ze verder align="left" meegeeft, dan ziet het er ook zonder CSS gewoon structureel uit

[Verwijderd]

Zoefff schreef op zondag 23 oktober 2005 @ 20:30:
Als je van de plaatjes échte thumbnails maakt, dus 100px breed oid, en ze verder align="left" meegeeft, dan ziet het er ook zonder CSS gewoon structureel uit

Oh ja, dat zou ik wel kunnen doen. Maar mag align="left" wel in XHTML? Ik meen me te herinneren dat er in XHTML geen stijlkenmerken in het XHTML-document mag staan, alleen in de CSS.

[Zoefff]

Hm, niet in XHTML nee, sorry.

code:

<!ELEMENT img EMPTY>
<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
  >

[Verwijderd]

Inmiddels al wel de thumbnails zelf gemaakt, is toch makkelijker. Maar nog steeds het probleem dat het er zonder CSS een beetje vreemd uitziet. Align=left werkt niet, en mag niet in XHTML. Iemand alternatieven?

[Verwijderd]

Verwijderd schreef op zondag 23 oktober 2005 @ 21:47:
Inmiddels al wel de thumbnails zelf gemaakt, is toch makkelijker. Maar nog steeds het probleem dat het er zonder CSS een beetje vreemd uitziet. Align=left werkt niet, en mag niet in XHTML. Iemand alternatieven?

Ja, gewoon je stylesheet weer inschakelen en niet zo lopen pielen in de marge ...

[Verwijderd]

Verwijderd schreef op zondag 23 oktober 2005 @ 22:08:
[...]

Ja, gewoon je stylesheet weer inschakelen en niet zo lopen pielen in de marge ...

Er zijn mensen die geen gebruik kunnen maken van stylesheets, en dus afhankelijk zijn van de structuur van de code. Daar wil ik graag rekening mee houden.

[sopsop]

Verwijderd schreef op maandag 24 oktober 2005 @ 11:17:
[...]

Er zijn mensen die geen gebruik kunnen maken van stylesheets, en dus afhankelijk zijn van de structuur van de code. Daar wil ik graag rekening mee houden.

Als ze afhankelijk zijn van de structuur van de code, dan maakt een align=left daar niets voor uit.

[OkkE]

Verwijderd schreef op zondag 23 oktober 2005 @ 21:47:
Align=left werkt niet, en mag niet in XHTML. Iemand alternatieven?

HTML 4.01 gebruiken? Zover ik weet mag je daar wel align=left gebruiken. Tenzij je perse XHTML wilt gebruiken?

[NiteSpeed]

Mooie linkshandige Gibson

[Verwijderd]

OkkE schreef op maandag 24 oktober 2005 @ 12:36:
[...]

HTML 4.01 gebruiken? Zover ik weet mag je daar wel align=left gebruiken. Tenzij je perse XHTML wilt gebruiken?

Tsja, maar ik heb alles al in XHTML. Wanneer ik 4.01 ga gebruiken, moet ik alles overzetten. Bovendien ben ik net gewend aan XHTML 1.0 Trans., kan het echt niet anders?

[BtM909]

Er is niet echt een alternatief, het kan gewoon niet in XHTML.

De vraag voor jou moet eigenlijk zijn: wat (belangrijker: wie) wil je bereiken met je site zonder CSS.

Ik heb zelf ooit eens zitten denken in hoeverre je rekening moet houden met opmaak als je geen CSS toepast. Eigenlijk wil je (dat denk ik te lezen ) HTML4.01 of misschien wel HTML2 code leveren <center> tag rules, zodat je nog een beetje invloed hebt op de opmaak.

Tegenwoordig proberen we onze sites te onderscheiden met CSS. Er zijn zelfs websites waarbij je met verschillende CSS files totaal andere layouts kan verkrijgen. Maar hoe onderscheid je je site zonder opmaak?

[Erkens]

Waarom maak je er geen definitielist van (dl) waarbij je thumbnails de termen zijn (dt) en dat tekstje zet je in de dd?

[Verwijderd]

Erkens schreef op maandag 24 oktober 2005 @ 21:27:
Waarom maak je er geen definitielist van (dl) waarbij je thumbnails de termen zijn (dt) en dat tekstje zet je in de dd?

Dat lijkt me een goede oplossing. Ik zal het straks eens proberen.

@BtM909: (Wat heb je een lastige nick )
Het kan dus wel, zie de post van Erkens.
Eigenlijk denk ik niet dat er ooit maar één bezoeker zal zijn op mijn site die er last van zal hebben dat hij via CSS niet goed werkt. Het gaat me meer om het idee, en ik heb hem ontwikkeld om te kunnen expirimenteren met CSS. Als ik later groot ben () zal ik bij ontwerpen wel met zulk soort zaken rekening moeten kunnen houden, dus ik begin nu pas met leren, snap je .

[Verwijderd]

Ik volg je niet helemaal. Je wil in je CSS instellen dat wanneer de browser geen CSS ondersteunt, de thumbnails toch als zijnde thumbnails worden weergegeven?
Volgens mij, zoals ik het lees in ieder geval, is het niet mogelijk om dat te bereiken. Ik denk dat het makkelijkste is, en misschien wel enige mogelijke, om gewoon in je HTML de thumbnail in te stellen qua grootte.

[Erkens]

Verwijderd schreef op dinsdag 25 oktober 2005 @ 13:26:
Ik volg je niet helemaal. Je wil in je CSS instellen dat wanneer de browser geen CSS ondersteunt, de thumbnails toch als zijnde thumbnails worden weergegeven?
Volgens mij, zoals ik het lees in ieder geval, is het niet mogelijk om dat te bereiken. Ik denk dat het makkelijkste is, en misschien wel enige mogelijke, om gewoon in je HTML de thumbnail in te stellen qua grootte.

ehm, beter is het om gewoon ervoor te zorgen dat het ook echt thumbnails zijn, scheelt nog bandbreedte ook

[Verwijderd]

Erkens schreef op dinsdag 25 oktober 2005 @ 13:48:
[...]

ehm, beter is het om gewoon ervoor te zorgen dat het ook echt thumbnails zijn, scheelt nog bandbreedte ook

Ligt er maar net aan. Als jij dingen maakt die enorm mooi zijn om te zien, worden je thumbnails vaak aangeklikt. Daarna wordt de grote versie ingelezen.
Als je nou meteen als thumbnail ook de grote versie 'scaled', dan scheelt het juist bandbreedte