wat is beter hierbij "CSS of Tabel"

[Verwijderd]

Mijn vraag is over het volgende.
Ik ben mijn Photoalbum opniew aan het maken in Dreamweaver. (was HTML en ik wil nu CSS)
Ik wil nu alles in CSS maken en dit gaat prima.

Maar nu moet ik de Thumb pagina maken en hierin komt een DIV met Maximaal 20 thumbs (5 rijen 5 colommen).
Maar wat is hierbij nou beter een tabel (lekker snel) of allemaal losse div's maken in de thumb div.

De foto's worden straks allemaal mouseover linkjes.
Hieronder is een voorbeeld hoe dit wordt.


Het is te maken met div's en tabellen, zelfs alleen met CSS alleen kom ik er al, maar ik wil graag van jullie weten hoe jullie
hiermee om zouden gaan. Ik wil eigenlijk geen tabel gebruiken maar gewoon div samen mer CSS, maar weet of dit wel algemeen gedaan zou worden.

[disjfa]

Dit is geen tabulaire data, dus waarom een tabel gebruiken.

[Verwijderd]

Ik heb de originele website gemaakt volgens simpel HTML en daarin een tabel gezet om dit te doen.
Maar dat wil ik eigenlijk niet mee omdat ik nu zo veel via CSS werk en een zo clean mogelijke html wil.

Maar als ik alles in div's ga gooien dan krijg ik dus 20 div's in een grote div en ik weet niet of ik het dan onnodig moeilijk maak of dat dit gewoon normaal is om dit effect te krijgen.

[Bozozo]

As above. Bovendien wordt je HTML compacter omdat je gewoon al die thumbs achter elkaar kunt floaten, dus je gebruikte geen omhullende elementen meer zoals rijen of kolommen.

[sub0kelvin]

Ik zou het zonder tabellen doen, het is in de eerste plaats geen tabulaire data en het is zonder tabellen veel makkelijker in de toekomst.

Nu iets meer moeite (als je niet gedreven bent met css) voor de CSS, en als je ooit wat anders wilt (meer/minder kolommen, willekeurig over elkaar heen, slideshowtje), dan hoe je alleen de CSS een beetje aan te passen, in plaats van complexere tabelstructuur & de code die de tabel genereert.

[Verwijderd]

dan hoe je alleen de CSS een beetje aan te passen, in plaats van complexere tabelstructuur & de code die de tabel genereert.

Dat klopt ja dat was ik al ff vergeten. Dus de tabel valt al af.
Maar is het dan beter om 20 losse divjes te maken en daar de thumbs in te gooien of
alle foto's in 1 div gooien en dan met CSS in #img regelen.

[ Voor 3% gewijzigd door Verwijderd op 24-03-2009 14:08 ]

[Verwijderd]

Volgens de style regels van w3c mogen tabellen alleen gebruikt worden waarvoor ze bedoelt zijn. Ze mogen nooit gebruikt worden om layout op te bouwen. Wat jij in dit geval doet.

Ik zou dus zoals alle anderen gaan voor css.

[Herko_ter_Horst]

Je verkeert blijkbaar in de veronderstelling dat DIVs het enige alternatief zijn voor een tabel. Dit is echter pertinent onjuist. Het vervangen van een tabel door DIVs helpt je van de regen in de drup. DIVs dienen uitsluitend om een HTML document op te delen in logische eenheden zonder verdere semantiek. Kijk eerst eens naar een logischer, semantisch rijkere tag.

Vergeet even de opmaak die je in gedachten hebt en kijk eens naar je content. De foto's lijken me gewoon een (ongeordend?) lijstje (of misschien 5 lijstjes), dus ik zou kiezen voor UL.

P.S. "CSS" als alternatief voor "TABLE" is een onzinnige vraag/suggestie. Dat is net als zeggen dat de kleur rood een alternatief is voor iets van metaal.

[ Voor 13% gewijzigd door Herko_ter_Horst op 24-03-2009 14:12 ]

[TERW_DAN]

Op zich is het niet nodig om een plaatje in een divje te zetten. Je kunt ook gewoon het plaatje zelf positioneren lijkt me.

[demichiel]

Kan je niet gewoon alle afbeeldingen binnen één div zetten, deze div een bepaalde width geven en dan je images met wat padding op display: inline zetten?

Dan krijg je denk ik hetzelfde effect met een nog veel compactere code, geen idee of dit wel past in je overgang naar nette HTML, ik weet gewoon niet of display inline wel zo netjes is of niet, maar korter en gemakkelijker is het wel.

Let wel op dat je natuurlijk enkel de 'tabel'-vorm krijgt als elke afbeelding een gelijke grootte heeft. Of toch breedte alleszins.

[disjfa]

Als je alleen afbeeldingen laat zien hoef je toch alleen maar afbeeldingen te gebruiken Als je er meer info bij wilt kan je support elementen gebruiken. En dan gewoon wat je wilt. Een divje, lijstje of wat je bedoeling is.

[Verwijderd]

Dat ik geen tabel meer wil is ook de rede van deze vraag.

Ik moet moet veel van deze pagina's maken, iets van 20 tot 30 en er komen elk jaar na de vakantie wel weer meer bij.
Daarom zoek ik de mooiste manier. Tabel is exit en allemaal divjes zat ik ook niet op te wachten maar Ik zou dus ook de foto's in een div kunnen zetten onder een UL en dan via de #img #UL de positie bepalen. Deze is altijd volgens het vaste stramien.

Voor de duidelijkheid; het voorbeeld is een kopie van de CSS met daarin een snapshot van de oude site via PS dus ik heb deze thumbs er nog niet ingebouwd.

Ik wil mezelf uiteindelijk tijd besparen door de thumbs en foto's dezelfde indelings naam geven en in een mapje kunnen droppen, zodat het album meteen af is. Vandaar dat ik nu met een template bezig ben voor een blanco album.

[BtM909]

Begin eerst met de basis. Je wilt een img plaatsen, doe dat dan ook

Ga die positioneren en vervolgens gebruik je eventueel support elementen.

[Fire69]

Ik moet op redelijk korte tijd ook een site maken, en dacht eigenlijk dat dat met Dreamweaver kinderspel zou zijn (zelfs voor iemand die nog nooit iets van webdesign heeft gedaan).
Maar dat valt toch vies tegen vind ik.
Ik had verwacht dat Dreamweaver hierin veel meer geautomatiseerd ging zijn, maar je moet toch heel wat dingen zelf maar zien uit te dokteren.
Dingen zoals waar de TS ook mee 'sukkelt'.

Is er dan nergens geen eenduidige, SIMPELE uitleg te vinden hierover?
Ik was begonnen met www.slicingguide.com te volgen, maar volgens wat ik hier lees, klopt het helemaal niet wat die gast doet (nl. alles in tabellen gooien...)

[BlackIce]

Verwijderd schreef op dinsdag 24 maart 2009 @ 14:37:
Dat ik geen tabel meer wil is ook de rede van deze vraag.

Ik moet moet veel van deze pagina's maken, iets van 20 tot 30 en er komen elk jaar na de vakantie wel weer meer bij.

Hier kan een CMS je verder bij helpen, eventueel gewoon een simpel PHP-script.

Daarom zoek ik de mooiste manier. Tabel is exit en allemaal divjes zat ik ook niet op te wachten maar Ik zou dus ook de foto's in een div kunnen zetten onder een UL en dan via de #img #UL de positie bepalen. Deze is altijd volgens het vaste stramien.

Het is in principe gewoon een lijst. Een ul dus, met daar in li-elementen en daarin de plaatjes. Hier heb je geen div'jes nodig, gewoon css op de li's toepassen.

Voor de duidelijkheid; het voorbeeld is een kopie van de CSS met daarin een snapshot van de oude site via PS dus ik heb deze thumbs er nog niet ingebouwd.

Ik wil mezelf uiteindelijk tijd besparen door de thumbs en foto's dezelfde indelings naam geven en in een mapje kunnen droppen, zodat het album meteen af is. Vandaar dat ik nu met een template bezig ben voor een blanco album.

Ook hier weer: Pak hier gewoon een simpel script en/of CMS voor, zelf iedere pagina copy/pasten en de plaatjes erin zetten is wel erg veel werk, en wat als je de HTML wilt veranderen? Dan moet je alle pagina's weer langs ...

[BtM909]

Fire69 schreef op dinsdag 24 maart 2009 @ 15:02:

Webdesignen is ook eigenlijk geen echt vak!

[BlackIce]

Fire69 schreef op dinsdag 24 maart 2009 @ 15:02:
Ik moet op redelijk korte tijd ook een site maken, en dacht eigenlijk dat dat met Dreamweaver kinderspel zou zijn (zelfs voor iemand die nog nooit iets van webdesign heeft gedaan).
Maar dat valt toch vies tegen vind ik.

Webdesign is een vak, itt tot 10 jaar geleden kom je met een beetje beunhazen niet ver meer (imo nog steeds te ver, maargoed).

Ik had verwacht dat Dreamweaver hierin veel meer geautomatiseerd ging zijn, maar je moet toch heel wat dingen zelf maar zien uit te dokteren.
Dingen zoals waar de TS ook mee 'sukkelt'.

Dreamweaver is een tool die niet echt "instap-niveau" is. Er zijn genoeg websites waar je een website in elkaar kan klikken, Dreamweaver kan een hele hoop meer en is daardoor ook een stuk ingewikkelder.

Is er dan nergens geen eenduidige, SIMPELE uitleg te vinden hierover?
Ik was begonnen met www.slicingguide.com te volgen, maar volgens wat ik hier lees, klopt het helemaal niet wat die gast doet (nl. alles in tabellen gooien...)

Een website maken is erg vaak maatwerk, zekers om een enigzinds ingewikkeld design om te zetten naar goede HTML en CSS. Hiervoor moet je toch echt begrijpen hoe html en css werken.
Het is geen rocket science, maar ook zeker niet iets wat je even in een middagje leert.

Edit: Wat BtM909 zegt dus.

[sub0kelvin]

icemancool schreef op dinsdag 24 maart 2009 @ 15:12:
Het is in principe gewoon een lijst. Een ul dus, met daar in li-elementen en daarin de plaatjes. Hier heb je geen div'jes nodig, gewoon css op de li's toepassen.

Waarom niet gewoon onder elkaar in je source zetten, zonder list element? Want m.i. is het tonen van een stapel plaatjes net zo min een lijstje als dat een serie alinea's dat zijn. Een semantisch rijk element als een lijst is dan eigenlijk overkill, misschien zelfs wel ongewenst (omdat het andere lijsten devalueert).

[BlackIce]

sub0kelvin schreef op dinsdag 24 maart 2009 @ 15:55:
[...]

Waarom niet gewoon onder elkaar in je source zetten, zonder list element? Want m.i. is het tonen van een stapel plaatjes net zo min een lijstje als dat een serie alinea's dat zijn. Een semantisch rijk element als een lijst is dan eigenlijk overkill, misschien zelfs wel ongewenst (omdat het andere lijsten devalueert).

Goed punt, ik kan er nou niet met zekerheid uitkomen of ze hier wel of niet in een ul moeten.
Volgens mij gaat het hier om een plaatjes-album, oftewel het is niet gewoon een stapel plaatjes maar een stapel plaatjes die bij elkaar horen, maar niet in een specifieke volgorde hoeven te staan.
Dan vind ik een UL zeker toepasselijk. De vergelijking met alinea's gaat ook niet helemaal op, alinea's hebben meestal een specifieke volgorde en vertellen een verhaal. De plaatjes in dit geval doen dat niet.

Lastig, semantiek Iemand aanwezig met wat meer kennis / ervaring met zulke gevallen?

[Verwijderd]

Je wil niet zomaar een paar plaatjes achter elkaar laten zien, je wilt een serie plaatjes laten zien die bij elkaar horen. Imho is een UL / LI dus volledig op zijn plek hier.

[Herko_ter_Horst]

Tsja, meestal zit er in een fotoalbum wel enige volgordelijkheid en "bij elkaar horen", dus zou een list m.i. wel gepast zijn. Ik denk dat de TS daar voor zijn specifieke use case wel een keuze in kan maken. Ik denk dat de discussie wel duidelijk heeft gemaakt dat er niet één allesomvattende manier is om een tabel te omzeilen (als die tabel inderdaad ongewenst is vanuit semantisch oogpunt). Zomaar DIVs adviseren is niet de manier, altijd een lijst toepassen ook niet.

Alinea's hebben overigens hun eigen (tekst-gebonden) semantiek, uitgedrukt met de P tag, dus de vergelijking gaat sowieso niet helemaal op.

[sub0kelvin]

Verwijderd schreef op dinsdag 24 maart 2009 @ 16:22:
Je wil niet zomaar een paar plaatjes achter elkaar laten zien, je wilt een serie plaatjes laten zien die bij elkaar horen. Imho is een UL / LI dus volledig op zijn plek hier.

Ok, daar kan ik inkomen, maar dan moet je natuurlijk niet blind een UL gebruiken, maar ook een OL nemen wanneer de volgorde vast staat (datum bijv).

[Eddy Dean]

Ik zie absoluut niet in waarom je hier gebruik zou maken van een ul (waarom typen jullie dat met hoofdletters?).

Juist ja, het is lekker semantisch. Heel geweldig, maar wie heeft er nu echt wat aan? Het accessibiliteits-argument doet het altijd wel goed bij me, maar bij een fotoalbum is dat echte onzin. Blinde mensen (die baat hebben bij semantische markup zodat de screenreader het ook snapt) zullen toch geen interesse hebben in je fotoalbum, en een zoekmachine kan het ook echt niet interesseren of het in een lijst staat of gewoon los in een div. Is het uberhaupt wenselijk dat een zoekmachine je site gaat indexeren?

Ik zou gaan voor een div waar alle plaatjes gewoon als img in staan, die dan door middel van css netjes inline gezet worden. Semantisch geneuzel is nu echt niet belangrijk, en alleen maar onnodige ballast.

[ Voor 4% gewijzigd door Eddy Dean op 24-03-2009 17:35 ]

[BlackIce]

Eddy Dean schreef op dinsdag 24 maart 2009 @ 17:33:
Ik zie absoluut niet in waarom je hier gebruik zou maken van een ul (waarom typen jullie dat met hoofdletters?).

Juist ja, het is lekker semantisch. Heel geweldig, maar wie heeft er nu echt wat aan? Het accessibiliteits-argument doet het altijd wel goed bij me, maar bij een fotoalbum is dat echte onzin. Blinde mensen (die baat hebben bij semantische markup zodat de screenreader het ook snapt) zullen toch geen interesse hebben in je fotoalbum, en een zoekmachine kan het ook echt niet interesseren of het in een lijst staat of gewoon los in een div. Is het uberhaupt wenselijk dat een zoekmachine je site gaat indexeren?

Ik zou gaan voor een div waar alle plaatjes gewoon als img in staan, die dan door middel van css netjes inline gezet worden. Semantisch geneuzel is nu echt niet belangrijk, en alleen maar onnodige ballast.

Waarom zou het een zoekmachine niet interesseren om te weten of iets bij elkaar hoort of gewoon een random verzameling is?
Ik ben het met je eens dat er plaatsen zijn waar het meer nut heeft, maar dat maakt het hier nog niet compleet nutteloos. Ik denk dat het een prima idee is om hier een ul te gebruiken, al is het maar om de gewoonte aan te leren om semantisch te denken.

[teh_twisted]

ik zou een containertje maken waarin de plaatjes terecht moeten komen en daarin gewoon losse img's neerplempen.

code:

<div id="fotocontainer>
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
</div>

en bijhorend zoiets:

code:

#fotocontainer { width: 720px; }
.foto {border: none; margin: 1em; float: left;}

ff hier getikt/bedacht maar denk dat dit wel redelijk doet wat je wilt

*edit* het semantische geneuzel met de ul/ol is leuk als je lijstjes hebt. maar als je deze foto niet beschouwd als een lijst heeft dat weinig zin/nut. het zijn plaatjes en moeten op een pagina worden neergeplempt, houdt 't dan lekker simpel

ow en hij wilt er waarschijnlijk naar de echte foto kunnen klikken dan kan je als extra effectje nog evt dit doen om 't plaatje:

code:

<a href="#" alt="Foto van blabla"><img src="#" /></a>

code:

#fotocontainer a img {border: none;}
#fotocontainer a img:after { content: attr(alt); } 
#fotocontainer a {padding: 1em; padding-bottom: 2em; background: white;}

l33t

[ Voor 33% gewijzigd door teh_twisted op 24-03-2009 18:07 . Reden: stukkie vergeten ^_^ ]

[H004]

teh_twisted schreef op dinsdag 24 maart 2009 @ 17:58:
ik zou een containertje maken waarin de plaatjes terecht moeten komen en daarin gewoon losse img's neerplempen.

code:

<div id="fotocontainer">
    <img src="#" class="foto" />
</div>

en bijhorend zoiets:

code:

#fotocontainer { width: 720px; }
.foto { margin: 1em; float: left;}

ff hier getikt/bedacht maar denk dat dit wel redelijk doet wat je wilt

Waarom een class toevoegen?

HTML:

<div id="fotocontainer">
<img src="#" />
</div>

en bijhorend zoiets:

Cascading Stylesheet:

#fotocontainer { width: 720px; }
#fotocontainer img { margin: 1em; float: left;}

[moozzuzz]

Voor een voorbeeldje rond een fotoboek met UL en LI's zoals ik het persoonlijk semantisch vind...

[teh_twisted]

H004 schreef op dinsdag 24 maart 2009 @ 18:03:
[...]

Waarom een class toevoegen?

HTML:

<div id="fotocontainer">
<img src="#" />
</div>

en bijhorend zoiets:

Cascading Stylesheet:

#fotocontainer { width: 720px; }
#fotocontainer img { margin: 1em; float: left;}

omdat ik sneller op verstuur ram dan eigenlijk de bedoeling is, check de edit nu maar is lol niet getest maar als't goed is moet ie nu een fotoframpje krijgen zoals zo'n palaroid met daarin de alt tekst erin... but like I said... untested

[Herko_ter_Horst]

Eddy Dean schreef op dinsdag 24 maart 2009 @ 17:33:
Ik zie absoluut niet in waarom je hier gebruik zou maken van een ul (waarom typen jullie dat met hoofdletters?).

Omdat ik dat wat prettiger vind lezen in een lopende tekst.

Juist ja, het is lekker semantisch. Heel geweldig, maar wie heeft er nu echt wat aan?

[...]

Semantisch geneuzel is nu echt niet belangrijk, en alleen maar onnodige ballast.

Adviseer dan meteen om die tabel maar te blijven gebruiken...

Verder: met icemancool.

[teh_twisted]

moozzuzz schreef op dinsdag 24 maart 2009 @ 18:07:
Voor een voorbeeldje rond een fotoboek met UL en LI's zoals ik het persoonlijk semantisch vind...

hahahahaha dat je je voorbeeld pakt van een site die nog werkt met de mooie <center> tag... lol, ja 't KAN wel... maar of je 't wilt is een 2e... meer tagjes... ik zeg altijd maar, less is more.

[moozzuzz]

teh_twisted schreef op dinsdag 24 maart 2009 @ 18:16:
hahahahaha

Noteer dat het een vb'tje is uit 2006.. een mens moet kunnen evolueren hé
Overigens:

code:

<center></center>
text-align: center;

(kies wat korste is ;^)

[teh_twisted]

moozzuzz schreef op dinsdag 24 maart 2009 @ 18:28:
[...]

Noteer dat het een vb'tje is uit 2006.. een mens moet kunnen evolueren hé
Overigens:

code:

<center></center>
text-align: center;

(kies wat korste is ;^)

<center> is deprecated, heeft niets te maken met korter of niet korter. Als je je wilt houden aan standaarden (dus semantisch wilt zijn, anders is't nutteloos) doe dat dan ook.

[Eddy Dean]

Herko_ter_Horst schreef op dinsdag 24 maart 2009 @ 18:08:
[...]

Adviseer dan meteen om die tabel maar te blijven gebruiken...

Verder: met icemancool.

Uhhm... Ik zie het verband niet? Een tabel gebruiken is gewoon volledig nutteloos, omdat het helemaal niets toevoegt. Net zoals een ul/li constructie niets toevoegt. In mijn post zeg ik dat ik vind dat je onnodige ballast in deze situatie moet voorkomen, en opeens moet ik maar een tabel gaan gebruiken? Over ballast gesproken...

In theorie vind een zoekmachine het inderdaad wel spannend, in de praktijk gaat de zoekmachine jouw pagina echt niet beter begrijpen als je er een lijst van maakt in plaats van een verzameling die ook gegroepeerd in een div staat. De ul-constructie maakt dat het een lijst is, de div-met-img-erin-constructie maakt dat het een gegroepeerde verzameling is.

Semantiek hoort mijns inziens geen doel op zichzelf te zijn, maar een middel om toegankelijkheid en indexeerbaarheid te verbeteren (en indexeerbaarheid ook alleen als dat van toepassing is. Een fotoboek met persoonlijke foto's zou ik niet geindexeerd willen hebben.)

Begrijp me trouwens niet verkeerd: semantiek vind ik wel degelijk belangrijk, mits het belangrijk is dat mensen met handicaps en zoekmachines de site goed kunnen gebruiken.

[mcDavid]

moozzuzz schreef op dinsdag 24 maart 2009 @ 18:28:
[...]

Noteer dat het een vb'tje is uit 2006.. een mens moet kunnen evolueren hé
Overigens:

code:

<center></center>
text-align: center;

(kies wat korste is ;^)

Gezien dat eerste iedere pagina over het draadje gestuurd moet worden, en dat tweede in de lokaal gecachede stylesheet terecht komt: dat tweede

_{nu nog een klok ontwikkelen die nauwkeurig genoeg is om het verschil te meten op een hedendaags systeem met hedendaagse internetaansluiting}

[mcDavid]

Eddy Dean schreef op dinsdag 24 maart 2009 @ 18:46:
[...]

Begrijp me trouwens niet verkeerd: semantiek vind ik wel degelijk belangrijk, mits het belangrijk is dat mensen met handicaps en zoekmachines de site goed kunnen gebruiken.

...óf als je over 2 jaar nog steeds wilt weten hoe je site ook al weer in elkaar zat.

Maar ook wat dat betreft brengt een list geen verbetering in dit geval!

offtopic:
excuses dit had in een edit gekund

[ Voor 6% gewijzigd door mcDavid op 24-03-2009 19:25 ]

[BlackIce]

Eddy Dean schreef op dinsdag 24 maart 2009 @ 18:46:
[...]


Uhhm... Ik zie het verband niet? Een tabel gebruiken is gewoon volledig nutteloos, omdat het helemaal niets toevoegt. Net zoals een ul/li constructie niets toevoegt. In mijn post zeg ik dat ik vind dat je onnodige ballast in deze situatie moet voorkomen, en opeens moet ik maar een tabel gaan gebruiken? Over ballast gesproken...

In theorie vind een zoekmachine het inderdaad wel spannend

Mooi, dan zijn we het erover eens dat een ul in theorie de netste oplossing is?

, in de praktijk gaat de zoekmachine jouw pagina echt niet beter begrijpen als je er een lijst van maakt in plaats van een verzameling die ook gegroepeerd in een div staat. De ul-constructie maakt dat het een lijst is, de div-met-img-erin-constructie maakt dat het een gegroepeerde verzameling is.

Ten eerste vind ik dit meer een lijst dan een verzameling. Ten tweede vind ik een Unordered List prima voor een ongegroepeerde verzameling. Of het nou naast elkaar staat of onder elkaar, het blijft een lijst. Hoe je het later vormgeeft maakt even niet uit.
Daarbij, een div is semantisch gezien een division, het is inderdaad ook een gedeelte waar foto's staan, echter zijn het foto's die bij elkaar horen. Een ul (wellicht icm een div) zegt meer over de foto's dan enkel een div met een paar plaatjes erin.

Semantiek hoort mijns inziens geen doel op zichzelf te zijn, maar een middel om toegankelijkheid en indexeerbaarheid te verbeteren (en indexeerbaarheid ook alleen als dat van toepassing is. Een fotoboek met persoonlijke foto's zou ik niet geindexeerd willen hebben.)

Ik ben het met je eens dat semantiek geen doel an sich is, maar als je dan toch een pagina moet maken, waarom niet op de best mogelijke manier?
Het lastige is dat semantiek niet altijd vaste regels heeft en context-afhankelijk is. Ik vind dat de beste semantiek in dit geval de oplossing is die het duidelijkst is.

Begrijp me trouwens niet verkeerd: semantiek vind ik wel degelijk belangrijk, mits het belangrijk is dat mensen met handicaps en zoekmachines de site goed kunnen gebruiken.

Zoals ik al eerder zei, ik kan me gevallen bedenken waarin semantiek belangrijker en nuttiger is, maar dat is toch echt geen reden om een andere oplossing te pakken als het verder geen gevolgen heeft.

[BtM909]

Ik heb het hier vanmiddag even met [Verwijderde gebruiker] over gehad en dit is een lastige

In principe is het semantisch correct om een verzameling foto's gewoon weer te geven in een lijst. Simpelweg een "bunch of photo's" in een UL en een vaste volgorde in een OL.

Als je Semantische HTML gaat extraheren, dan zou je kunnen bedenken dat de front-end zelf bepaalt hoe een Unordered List wordt weergegeven (of dat nou een tagcloud is, of letterlijk een stapel foto's) of dat je heel snel de routebeschrijving (OL) ff kan omdraaien om te kijken of je niet tever bent gereden. Helaas bieden browsers of andere user-interfaces die mogelijkheden nog niet, maar dat let je niet om nu alvast semantiek toe te passen.

In dit geval zou ik zelfs voor een DL element gaan, aangezien je beschrijvingen of tags wilt koppelen aan je foto. Semantiek en context kan perfect worden achterhaald en en deze oplossing geeft je genoeg elementen om te stylen

[Verwijderd]

Ik heb even gekeken hoe dit zit volgens de webrichtlijnen. Ik bedacht me even dat ik dit eerder ergens heb toegepast (fotogalerij koninkijkhuis.nl). We hebben hier ook gewoon van UL en Listobjecten gebruik gemaakt. Deze valideren ook geheel volgens w3c en webrichtlijnen.

[Pendaco]

Tjah, als het enkel voor een simpel persoonlijk dingetje is zou ik ook niet moeilijk doen en net als Eddy Dean, teh_twisted alle afbeeldingen zo in een DIV gooien, houdt het ook lekker compact en overzichtelijk.

Wil je het nu later uitbreiden (of wanneer er 'groot geld' mee is gemoeid ) dan geeft een UL/LI opzet je wel wat meer speelruimte. Nadeel is wel dat je de hele zooi (marges, padding etc.) eerst weer moet clearen maar zoals mcDavid zegt; het hoeft maar 1x over het draadje

BtM909 schreef op dinsdag 24 maart 2009 @ 20:18:
In dit geval zou ik zelfs voor een DL element gaan, aangezien je beschrijvingen of tags wilt koppelen aan je foto. Semantiek en context kan perfect worden achterhaald en en deze oplossing geeft je genoeg elementen om te stylen

Maar dan zou je de afbeelding als DT(?) neerzetten, is dat niet wat vergezocht? Bij een afbeelding (thumbnail) denk ik nu niet meteen aan een term. Of we maken er een Definition Thumbnail van

[Verwijderd]

Eddy Dean schreef op dinsdag 24 maart 2009 @ 18:46:
[...]
Semantiek hoort mijns inziens geen doel op zichzelf te zijn, maar een middel om toegankelijkheid en indexeerbaarheid te verbeteren (en indexeerbaarheid ook alleen als dat van toepassing is. Een fotoboek met persoonlijke foto's zou ik niet geindexeerd willen hebben.)

Begrijp me trouwens niet verkeerd: semantiek vind ik wel degelijk belangrijk, mits het belangrijk is dat mensen met handicaps en zoekmachines de site goed kunnen gebruiken.

Dan begrijp je het concept semantiek niet helemaal imo. Semantiek toepassen betekent zoveel als "betekenis geven". Het hele concept van semantiek in je websites gebruiken komt er op neer dat je in je HTML aangeeft wat elk onderdeel van je site betekent. Dat heeft in principe niets met zoekmachines of handicaps te maken.

Dat die laatste twee toevallig de gebieden zijn waar semantiek op dit moment het meeste praktisch nut heeft, wil niet betekenen dat het concept semantiek alleen bedoeld is om die twee zaken op orde te hebben. Semantiek doet zoveel meer, namelijk: het juist omschrijven van de inhoud van je document. Ongeacht de toepassing, omdat juist dan elke toepassing er op de goede manier mee om zou kunnen gaan.

Kleine vraag: als je over 2 maanden de bestandsnaam onder elke foto wil weergeven, zou je het dan wel in een list plaatsen? Ik denk het wel. Waarom dan wel? De betekenis (semantiek) is niet veranderd.

[Gersomvg]

teh_twisted schreef op dinsdag 24 maart 2009 @ 17:58:
ik zou een containertje maken waarin de plaatjes terecht moeten komen en daarin gewoon losse img's neerplempen.

code:

<div id="fotocontainer>
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
<img src="#" class="foto" />
</div>

en bijhorend zoiets:

code:

#fotocontainer { width: 720px; }
.foto {border: none; margin: 1em; float: left;}

ff hier getikt/bedacht maar denk dat dit wel redelijk doet wat je wilt

*edit* het semantische geneuzel met de ul/ol is leuk als je lijstjes hebt. maar als je deze foto niet beschouwd als een lijst heeft dat weinig zin/nut. het zijn plaatjes en moeten op een pagina worden neergeplempt, houdt 't dan lekker simpel

ow en hij wilt er waarschijnlijk naar de echte foto kunnen klikken dan kan je als extra effectje nog evt dit doen om 't plaatje:

code:

<a href="#" alt="Foto van blabla"><img src="#" /></a>

code:

#fotocontainer a img {border: none;}
#fotocontainer a img:after { content: attr(alt); } 
#fotocontainer a {padding: 1em; padding-bottom: 2em; background: white;}

l33t

Maar is dit wat de TS wil? Wil hij niet standaard 5 plaatjes naast elkaar? Als je dit doet, en er zitten een paar smalle plaatjes bij, dan kunnen er toch bijv. 7 naast elkaar komen te staan?
Ik gebruik hiervoor altijd div's (met vaste breedte) aangezien je dan ook de hele div clickable kan maken zodat je niet op het plaatje moet mikken (wanneer deze smal is).

[CH4OS]

Wat hierin ook wel verplichte kost is: semantiek.
Als je dat eenmaal begrijpt, weet je toch wat je 'moet' doen?

[Eddy Dean]

Verwijderd schreef op woensdag 25 maart 2009 @ 12:37:
Dan begrijp je het concept semantiek niet helemaal imo. Semantiek toepassen betekent zoveel als "betekenis geven". Het hele concept van semantiek in je websites gebruiken komt er op neer dat je in je HTML aangeeft wat elk onderdeel van je site betekent. Dat heeft in principe niets met zoekmachines of handicaps te maken.

Dat die laatste twee toevallig de gebieden zijn waar semantiek op dit moment het meeste praktisch nut heeft, wil niet betekenen dat het concept semantiek alleen bedoeld is om die twee zaken op orde te hebben. Semantiek doet zoveel meer, namelijk: het juist omschrijven van de inhoud van je document. Ongeacht de toepassing, omdat juist dan elke toepassing er op de goede manier mee om zou kunnen gaan.

Kleine vraag: als je over 2 maanden de bestandsnaam onder elke foto wil weergeven, zou je het dan wel in een list plaatsen? Ik denk het wel. Waarom dan wel? De betekenis (semantiek) is niet veranderd.

Ja, maar waarom geef je die betekenis? Zodat andere programma's (mensen lezen je html toch niet) het makkelijk kunnen interpreteren. Ik ben ervan overtuigd dat Google (of een andere zoekmachine) je site niet hoger of lager in de ranking gaat zetten als je een lijst maakt in plaats van een div met plaatjes erin. Een screenreader heeft er misschien wel baat bij, maar mensen die een screenreader gebruiken hebben over het algemeen sowieso niet veel aan je foto's.

Semantiek beschrijft inderdaad de inhoud van je document, maar soms is dat gewoon niet nodig. Als ik aan het schaken ben met iemand die niet blind is, waarom zou ik dan na iedere zet zeggen wat ik gedaan heb? Als diegene zowel blind als doof is, heeft het dan zin om te zeggen welke zet ik gedaan heb?
Het zelfde geldt voor deze site. Bezoekers van de site begrijpen ook zonder de ul/li wat de bedoeling is (sterker nog: ze zien geen verschil), en zoekmachines hebben er geen boodschap aan.

Als je een keyword wilt weergeven bij iedere foto is het semantisch gezien verdedigbaar een dl te gebruiken, want misschien helpt het een zoekmachine dan ook om het keyword te koppelen aan de bijbehorende foto. Alleen is dit niet wat gevraagd is. We zijn geen space shuttle aan het ontwerpen, maar een stukje html om foto's weer te geven, er is geen reden om nu al rekening te houden met alles dat eventueel ooit zou kunnen veranderen. Later over gaan naar een dl kost in deze situatie ook nauwelijks tijd, en kan dus altijd nog gedaan worden als dat waarde heeft. In de tijd dat we er nu over zitten te discussieren had het al lang af kunnen zijn.

Verder ben ik met icemancool eens dat de ul in theorie het mooiste is. Ik ben alleen van mening dat het in deze situatie niets uitmaakt. Iets dat alleen in theorie nut heeft, maar in de praktijk geen invloed heeft, mag wat mij betreft genegeerd worden. (dat is ook wat ik bedoelde met: "geen doel op zichzelf")

[DNA_Saint]

Ik had hier laatst een discussie met iemand over.
Hij had zijn site gemaakt met tabellen. Terwijl het makkelijk met divs kan en ook hoort.
Maar zijn argumenten waren dat zijn code gewoon valid was, scheelt tijd, klant ziet het niet en het werkt.
Daarnaast is het volgens hem geen SEO killer als je tables gebruikt.

Wat vinden jullie er dan van?


Trouwens, wat ik in de TS lees. Dat het css vs tables is. Maar dat zijn 2 verschillende dingen.
met tables heb je ook css nodig. Het is Divs vs Tables.
Daarna lees ik dat hij het ook gewoon met alleeen css kan maken.
Dat vind ik wel knap. Zonder enige html een site maken

[OkkE]

DNA_Saint schreef op woensdag 25 maart 2009 @ 15:10:
Ik had hier laatst een discussie met iemand over.
Hij had zijn site gemaakt met tabellen. Terwijl het makkelijk met divs kan en ook hoort.
Maar zijn argumenten waren dat zijn code gewoon valid was, scheelt tijd, klant ziet het niet en het werkt.
Daarnaast is het volgens hem geen SEO killer als je tables gebruikt.

Wat vinden jullie er dan van?

Dan vind ik die persoon een prutser die het vak een slechte naam geeft.

Als je weet waar je mee bezig bent scheelt het tijd door alles semantisch te maken, heb je meer mogelijkheden, levert het (imho) een beter resultaat en is het eenvoudiger aan te passen.

Het is misschien geen SEO killer, maar alle kleine beetjes helpen. Daarnaast gaat het ook gewoon om kwaliteit leveren naar je klant toe.

Trouwens, wat ik in de TS lees. Dat het css vs tables is. Maar dat zijn 2 verschillende dingen.
met tables heb je ook css nodig. Het is Divs vs Tables.
Daarna lees ik dat hij het ook gewoon met alleeen css kan maken.
Dat vind ik wel knap. Zonder enige html een site maken

Zeg dan Semantisch Correct vs Tables, want het is natuurlijk niet te bedoeling om alles maar in DIV's te smijten; een fout die veel beginners maken.

-- edit --

@ZanderZ:
De homepage van Google is ook heel "smerig" met inline styles, en weet-ik-veel-wat; toch is dat in mijn ogen geen reden het dan zelf dan ook maar geen nette code te schrijven.

[ Voor 9% gewijzigd door OkkE op 25-03-2009 16:23 . Reden: reactie op poster na mij ]

[Spinal]

Ter vergelijking: Panoramio zet de foto's in losse div's, en positioneert de foto's links en de kaart rechts met een tabel.
Toch niet het minste project, en zelfs daar gebeurd het semantisch niet correct.

[Herko_ter_Horst]

Het aloude: "als <blah-die-blah> het niet doet, waarom zou ik het dan doen" argument... <zucht>

Gelukkig (helaas?) is er geen wet die voorschrijft dat je perse semantisch correcte HTML moet maken. Als het je verder allemaal geen ruk interesseert: ga vooral je gang met je tables, en voeg desnoods nog een <marquee> en een <blink> toe en wat animated gifjes .

Maar ga dan niet in een topic waarin iemand expliciet vraagt om een alternatief lopen neuzelen dat die-en-die het ook niet doet en dat dat een reden is om het dan maar te laten zoals het was.

[Verwijderd]

Zo om er maar weer ff tussen te breken,

Ik heb nu 1 grote div van 500x500px met daarin de 5 losse Jpegs, dan een soft return en weer 5 plaatjes enz enz.
tot ik in totaal 5 bij 5 heb. Daarna via CSS de img een padding van 10 gegeven en dan krijg ik dit.

Ben er zelf eigenlijk wel tevreden mee.
Alleen als ik elke foto in zijn eigen div gooi als achtergrond kan ik mooi met align een simpele rollover maken.
Nu doe ik dit met HTML en is iets meer werk.

[harrald]

Verwijderd schreef op woensdag 25 maart 2009 @ 19:21:
Zo om er maar weer ff tussen te breken,

Ik heb nu 1 grote div van 500x500px met daarin de 5 losse Jpegs, dan een soft return en weer 5 plaatjes enz enz.
tot ik in totaal 5 bij 5 heb. Daarna via CSS de img een padding van 10 gegeven en dan krijg ik dit.
[afbeelding]
Ben er zelf eigenlijk wel tevreden mee.
Alleen als ik elke foto in zijn eigen div gooi als achtergrond kan ik mooi met align een simpele rollover maken.
Nu doe ik dit met HTML en is iets meer werk.

je zorgt er nu dus voor dat de foto's onder mekaar komen te staan met een <br> ?
waarom geen float:left; op je img en dan een overflow:hidden; op je container? dan maakt het ook niet uit hoe breed je container is.

en als je ipv padding margin gebruikt, dan is de afstand tussen de afbeeldingen net zo groot als de afstand tussen een afbeelding en de container.

[ Voor 7% gewijzigd door harrald op 25-03-2009 21:21 ]