[CSS] Correcte schrijfwijze

Nadat ik een tijdje maar wat aangeklooid heb met css, ben ik mij toch wat meer gaan verdiepen in de correcte manier van schrijven van css. Na mij verdiept te hebben bleven een aantal zaken onduidelijk:

1. Wanneer gebruik je een id en wanneer een class om later aan te refereren in je stylesheet? Ofwel, wanneer gebruik je #blaat en wanneer .blaat?

2. Is het een goede gewoonte om html-tags binnen je div's/blocks op te nemen, dus dat je zaken krijgt als

HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div id="block1">     <b>Vette opmaak 1</b> </div> <div id="block2">     <b>Vette opmaak 2</b> </div> //CSS #block1 b {     /*Opmaak 1*/ } #block2 b {     /*Opmaak 2*/ }

3. Kun je geneste div's/blocks ook op een 'geneste manier' aanspreken? Dus dat het block blaat binnen schaap een andere opmaak krijgt als blaat binnen schaap2? Ik snap dat mocht iets dergelijks mogelijk zijn (en tevens correct), je dan natuurlijk over classes i.p.v. id's praat.

jaapdejong wijzigde dit bericht 19-07-2005 14:52 (14%)

Meerdere elements kunnen een class aannemen, terwijl ID's uniek zijn voor elk element!

quote:

jaapdejong schreef op dinsdag 19 juli 2005 @ 14:46:
Nadat ik een tijdje maar wat aangeklooid heb met css, ben ik mij toch wat meer gaan verdiepen in de correcte manier van schrijven van css. Na mij verdiept te hebben bleven een aantal zaken onduidelijk:

1. Wanneer gebruik je een id en wanneer een class om later aan te refereren in je stylesheet? Ofwel, wanneer gebruik je #blaat en wanneer .blaat?

2. Is het een goede gewoonte om html-tags binnen je div's/blocks op te nemen, dus dat je zaken krijgt als

HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div id="block1">     <b>Vette opmaak 1</b> </div> <div id="block2">     <b>Vette opmaak 2</b> </div> //CSS #block1 b {     /*Opmaak 1*/ } #block2 b {     /*Opmaak 2*/ }

3. Kun je geneste div's/blocks ook op een 'geneste manier' aanspreken? Dus dat het block blaat binnen schaap een andere opmaak krijgt als blaat binnen schaap2?

ad 1) Je gebruikt id's voor individuele tags, zaken die maar 1 keer op je pagina voorkomen. Classes gebruik je voor zaken die meer dan eens voorkomen.

ad 2) Het is prima om HTML binnen je divs te gebruiken. Helaas gebruik je in je voorbeeld opmaaktags <b> en dat is nou net iets dat je beter in je CSS kan regelen. Probeer je HTML semantisch zo correct mogelijk te schrijven en de opmaak te beperken tot je CSS file

ad 3) Ja.. je kan een onderscheid aanbrengen tussen dezelfde klasse binnen een bepaalde andere klasse of id:


code:

#schaap .blaat {
    color: blue;
}

#schaap2 .blaat {
    color: green;
}

edit: class en id identifiers omgedraaid

Glewellyn wijzigde dit bericht 19-07-2005 15:00 (12%)

1) id gebruik je als je een bepaald element er anders uit wilt laten zien, class als je een bepaalde classe een ander uiterlijk wil geven. Onthoud dat beide attributen niks met css te maken hebben, maar alleen als kapstok worden gebruikt (net als dat kan (zou moeten kunnen) met elementnamen en elke ander attribuut) http://www.rikkertkoppes.com/thoughts/class-and-style

2) ja, in een <div> hoort eigenlijk altijd een ander element imho, maar dat heeft niks met css te maken, maar met html. Toch is het volgens de spec niet strikt noodzakelijk http://www.rikkertkoppes.com/thoughts/about-div

3) ja, zoals je in je eigen voorbeeld al aangeeft kan je die <b> op 2 manieren opmaken

edit:
wat een gespam, maar ik denk dat het er wel aardig op aansluit

mophor wijzigde dit bericht 19-07-2005 14:57 (7%)

1. Een class gebruik je als er meerdere van zijn, bijv menuitems. Een id als er maar 1 van is, bijvoorbeeld voor je layout-div's

2. Ja, hierdoor kan je code veel duidelijker worden en bespaard je een hoop html <font> werk etc
Bijvoorbeeld voor #content p en #footer p een andere opmaak

3.
.schaap .blaat {
//opmaak voor blaat binnen schaap
}

.schaap2 .blaat {
// opmaak voor blaat binnen schaap2
}


Edit: ik geloof dat het wel duidelijk is

Shadow wijzigde dit bericht 19-07-2005 14:58 (7%)

quote:

jaapdejong:
Nadat ik een tijdje maar wat aangeklooid heb met css, ben ik mij toch wat meer gaan verdiepen in de correcte manier van schrijven van css. Na mij verdiept te hebben bleven een aantal zaken onduidelijk:

1. Wanneer gebruik je een id en wanneer een class om later aan te refereren in je stylesheet? Ofwel, wanneer gebruik je #blaat en wanneer .blaat?

Bij voorkeur gebruik je classes omdat classes op meerdere elementen toegepast kunnen worden en een id maar 1x voor mag komen in het gehele document. Soms is het handiger om de #someId te gebruiken omdat een element toch al een id heeft t.b.v. van bijv. Javascript en een extra class niet veel toevoegt.

quote:

2. Is het een goede gewoonte om html-tags binnen je div's/blocks op te nemen, dus dat je zaken krijgt als
HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<div id="block1">     <b>Vette opmaak 1</b> </div> <div id="block2">     <b>Vette opmaak 2</b> </div> //CSS #block1 b {     /*Opmaak 1*/ } #block2 b {     /*Opmaak 2*/ }

Allereerst zou ik de 'b' niet meer gebruiken, die is achterhaald, maar dat was je vraag niet.

Het hangt er vanaf. Je zou het geneste element alleen maar hoeven gebruiken als het meer betekenis geeft aan de inhoud van het containing element. Bijvoorbeeld:
code:

<div>
   <!-- this section starts here, but only contains one paragraph -->
   <p>Some paragraaf</p>
</div>

Je vraag is eigenlijk een beetje te vaag om er een eenduiding antwoord op te geven.

quote:

3. Kun je geneste div's/blocks ook op een 'geneste manier' aanspreken? Dus dat het block blaat binnen schaap een andere opmaak krijgt als blaat binnen schaap2?

Volgens mij geef je in het stukje hierboven (#block2 b) eigenlijk al aan hoe dat moet.

quote:

Ik snap dat mocht iets dergelijks mogelijk zijn (en tevens correct), je dan natuurlijk over classes i.p.v. id's praat.

Geen idee wat je hiermee bedoelt

edit:
En toch wist ik stiekem van te voren al dat ik een spuit-11 post zou gaan maken

drm wijzigde dit bericht 19-07-2005 15:03 (14%)

quote:

drm schreef op dinsdag 19 juli 2005 @ 15:01:
[...]
Bij voorkeur gebruik je classes omdat classes op meerdere elementen toegepast kunnen worden en een id maar 1x voor mag komen in het gehele document. Soms is het handiger om de #someId te gebruiken omdat een element toch al een id heeft t.b.v. van bijv. Javascript en een extra class niet veel toevoegt.


[...]
Allereerst zou ik de 'b' niet meer gebruiken, die is achterhaald, maar dat was je vraag niet.

Het hangt er vanaf. Je zou het geneste element alleen maar hoeven gebruiken als het meer betekenis geeft aan de inhoud van het containing element. Bijvoorbeeld:
code:

<div>
   <!-- this section starts here, but only contains one paragraph -->
   <p>Some paragraaf</p>
</div>

Je vraag is eigenlijk een beetje te vaag om er een eenduiding antwoord op te geven.


[...]
Volgens mij geef je in het stukje hierboven (#block2 b) eigenlijk al aan hoe dat moet.

Klopt, maar dan alleen voor html-tags binnen een block.


[...]
Geen idee wat je hiermee bedoelt

Ik bedoel hiermee te zeggen dat ik snap dat je niet meerdere elementen met het zelfde ID kunt hebben. Het nesten gebeurt dus alleen met classes

edit:
En toch wist ik stiekem van te voren al dat ik een spuit-11 post zou gaan maken

Het is mij verder nu wel vrij duidelijk hoe ik correct css moet schrijven. Bedankt voor de reacties!

PS - Het valt me trouwens op dat T.net nog tabellen voor de opmaak gebruikt. Dat zal wel te maken hebben met compatibiliteit met meerdere browsers?

jaapdejong wijzigde dit bericht 19-07-2005 15:59 (11%)

quote:

jaapdejong schreef op dinsdag 19 juli 2005 @ 15:57:
[...]
PS - Het valt me trouwens op dat T.net nog tabellen voor de opmaak gebruikt. Dat zal wel te maken hebben met compatibiliteit met meerdere browsers?

De laatste layout change van de frontpage is alweer een paar jaartjes geleden. Het is dus puur legacy...
GoT heeft vorig jaar nog een complete make-over gehad en daarbij zijn we wel uitgegaan van semantische HTML; dat zal voor de FP ook nog wel gaan gebeuren

/offtopic Blaat gebruik je ALTIJD bij devven

Ik ben nu bezig met het semantisch zo correct mogelijk schrijven van mijn webpagina's. Nu vraag ik mij af of het heel ranzig is om de head-tag en de body-tag ook te gebruiken binnen een block?

HTML:

1 2 3 4

<div id="myBlock">     <head>De header van het blok</head>     <body>De body van het blok</body> </div>

da's ranzig en fout ja (lees de spec gewoon als je je zoiets afvraagt), gebruik gewoon hx voor headers en p voor alinea's erbinnen

dus:
code:

<div>
  <h1>kop</h1>
  <p></p>
  <p></p>
  <div>
    <h2>subparagraaf</h2>
    <p></p>
  </div>
  <p>nog ff een alinea in het hoofdblok</p>
</div>

zo ziet een algemene structuur eruit

mophor wijzigde dit bericht 20-07-2005 14:00 (56%)

quote:

jaapdejong schreef op woensdag 20 juli 2005 @ 13:53:
Ik ben nu bezig met het semantisch zo correct mogelijk schrijven van mijn webpagina's. Nu vraag ik mij af of het heel ranzig is om de head-tag en de body-tag ook te gebruiken binnen een block?


HTML:

1 2 3 4

<div id="myBlock">     <head>De header van het blok</head>     <body>De body van het blok</body> </div>

De head en body vallen buiten de daadwerkelijke (zichtbare) opmaak. Je begint pas met opmaken na <head> en <body> dus om deze in een div te frotten is echt bullshit

edit:
Of bedoel je met head en body de kop en de inhoud van een blok? Als je dat bedoelt, moet je ze in ieder geval niet head en body noemen

Wacky wijzigde dit bericht 20-07-2005 14:00 (18%)

quote:

Wacky schreef op woensdag 20 juli 2005 @ 13:59:
[...]


De head en body vallen buiten de daadwerkelijke (zichtbare) opmaak. Je begint pas met opmaken na <head> en <body> dus om deze in een div te frotten is echt bullshit

edit:
Of bedoel je met head en body de kop en de inhoud van een blok? Als je dat bedoelt, moet je ze in ieder geval niet head en body noemen

Dat bedoel ik inderdaad. Het lijkt mij semantisch gezien juist heel correct om 'head' en 'body' te gebruiken om de header en de body te beschrijven. Natuurlijk kun je ook 'h1' en 'p' gebruiken, waarbij die 'p' naar mijn mening niet goed duidelijk maakt dat het om een body gaat. Maar goed, de head-tag en de body-tag zijn dus expliciet gereserveerd voor de header en body van het html-document.

jaapdejong wijzigde dit bericht 20-07-2005 14:14 (6%)

quote:

jaapdejong schreef op woensdag 20 juli 2005 @ 14:08:
[...]


Dat bedoel ik inderdaad. Het lijkt mij semantisch gezien juist heel correct om 'head' en 'body' te gebruiken om de header en de body te beschrijven. Natuurlijk kun je ook 'h1' en 'p' gebruiken, waarbij die 'p' naar mijn mening niet goed duidelijk maakt dat het om een body gaat. Maar goed, de head-tag en de body-tag zijn dus expliciet gereserveerd voor de header en body van het html-document.

Een parser snapt classnames als 'head' en 'body' niet en kan daar dus ook geen enkele sematische waarde aan hechten. (even uitgaande dat je classnames bedoelt)

Tags als h1 (header categorie 1) en p (paragraaf/content deel) snapt ie wel.

In feite is dat dus precies de header- en body tag die je zoekt.

Bosmonster wijzigde dit bericht 20-07-2005 14:22 (12%)

vertaal p liever met alinea en div met paragraaf, dat maakt het in het nederlands een stuk duidelijker

quote:

mophor schreef op woensdag 20 juli 2005 @ 14:22:
vertaal p liever met alinea en div met paragraaf, dat maakt het in het nederlands een stuk duidelijker

alinea is een synoniem voor paragraaf

(of ben ik nou gek)

Bosmonster wijzigde dit bericht 20-07-2005 14:23 (5%)

mja, in het engels is het hetzelfde, in het nederlands wordt met paragraaf vaak een subhoofdstuk aangeduidt (~paragraaf 1.2), met alinea een stuk bij elkaar horende tekst. Alinea's bevatten ook geen lijsten, tabellen etc, paragrafen wel. Daarom mag p die dingen ook niet bevatten. Hier verwonderen mensen zich nogal eens over

<div> is een cluster element (paragraaf) dat alinea's, lijsten, tabellen etc met een header (hx) samenvoegt tot een paragraaf / hoofdstuk. D'r is ook nogal eens verwarring over waar div nu eigenlijk voor is, het is dus een element dat hoofdstukken / paragrafen aangeeft (zie mijn link hierboven)

In essentie is div een apart block element, namelijk een die een stapje hoger staat in de hierarchie, net als <map>, <blockquote>, en <form>. Deze laatste elementen mogen ook geen inline elementen bevatten en imho zou dat voor <div> ook moeten gelden.

Ik heb dit hier eens opgepend

mophor wijzigde dit bericht 20-07-2005 14:30 (37%)

quote:

mophor schreef op woensdag 20 juli 2005 @ 14:26:
mja, in het engels is het hetzelfde, in het nederlands wordt met paragraaf vaak een subhoofdstuk aangeduidt (~paragraaf 1.2), met alinea een stuk bij elkaar horende tekst. Alinea's bevatten ook geen lijsten, tabellen etc, paragrafen wel. Daarom mag p die dingen ook niet bevatten. Hier verwonderen mensen zich nogal eens over

is een cluster element (paragraaf) dat alinea's, lijsten, tabellen etc met een header (hx) samenvoegt tot een paragraaf / hoofdstuk

Ah ja.. zo had ik er nog nooit naar gekeken

quote:

Bosmonster schreef op woensdag 20 juli 2005 @ 14:22:
[...]


alinea is een synoniem voor paragraaf

(of ben ik nou gek)

quote: http://www.vandale.nl/opz...boek/?zoekwoord=paragraaf

pa·ra·graaf (de ~ (m.), -grafen)
1 paragraafteken
2 onderdeel van een hoofdstuk, een artikel, een wet of een officieel stuk

quote: http://www.vandale.nl/opzoeken/woordenboek/?zoekwoord=alinea

ali·nea (de ~ (v.), ~'s)
1 tekstgedeelte dat op een nieuwe regel begint en doorloopt tot de volgende nieuwe regel
2 deel van een wetsartikel, reglement enz. => lid

En voor 'div' vind ik dat je 'gedeelte' zou moeten gebruiken, precies zoals de volledige naam in het Engels luidt: 'division'.

Edit:

Mophor was me voor

jaapdejong wijzigde dit bericht 20-07-2005 14:33 (17%)

idd, zo zou je het kunnen noemen, belangrijkste is dat <p> alinea is en niet paragraaf in bovenstaande definitie (de (on)gein is dat je beiden in het engels met paragraph vertaald)

mophor wijzigde dit bericht 20-07-2005 14:33 (27%)

Hoe zit het semantisch gezien dan met de "opmaak" div's? Qua opmaak is het bij mij meestal "top","menu","content" en "footer". Kan/doet bijv. google hier iets mee? Snapt de bot dat in de content de inhoud staat? In de content div wordt uiteraard wel gebruik gemaakt van <h1> en <p>

Blijft een feit dat ik nog liever <div class="body"></div> gebruik, dan dat ik de body als alinea bestempel. Wat vinden jullie correcter:

HTML:

1 2 3 4

<div id="myBox">     <h1>Le header</h1>     <p>Le body</p> </div>

of

HTML:

1 2 3 4

<div id="myBox">     <h1>Le header</h1>     <div class="body">Le body</div> </div>

Edit:

Na het lezen van Mophor's stukje, zie ik dat het gebruik van een paragraaf (div) correcter is dan het gebruik van een alinea (p). Mijn intuïtie was juist.

Na het lezen van onderstaande reactie zou ik dus toch 'alinea' moeten gebruiken.

jaapdejong wijzigde dit bericht 20-07-2005 14:48 (79%)

in principe heb je ze bijna niet meer nodig, maar natuurlijk kom je er af en toe niet onderuit. Navigatie zou ik in een <map> element zetten, en verder zou ik div's die puur voor structuur zijn een class="structural" meegeven, omdat ze echt iets anders zijn dan div's om hoofdstukken / paragrafen mee aan te geven. Niet dat een parser er iets mee doet, maar ik vind het voor mezelf wel overzichtelijk.

Waarschijnlijk staat er verder in je header en footer dusdanig weinig "content" dat dit ook niet kwaad kan bij indexeren. (Al zou ik een class waarmee je aangeeft dat een stuk niet geindexeerd hoeft te worden wel op prijs stellen)

@hierboven: nr1, de div eromheen zorgt dat de p en de h1 bij elkaar horen, eventueel kunnen er meerdere p's achteraan. Mocht je om opmaak redenen een extra div om die p's nodig hebben, doe dat dan gewoon gerust (class="structural"), maar bebruik wel p's binnen die div. IMHO is direct inline content binnen een div not done.

reactie op je edit: een hx hoort binnen een paragraaf (div), samen met alle p's tables etc.

dus:

code:

<div id="myBox">
    <h1>Le header</h1>
    <p>Le body</p>
    <p>meer body</p>
</div>

en eventueel als je dat echt nodig hebt voor opmaak:
code:

<div id="myBox">
    <h1>Le header</h1>
    <div class="structural">
      <p>Le body</p>
      <p>meer body</p>
    </div>
</div>

note het verschil in betekenis tussen de 2 divs, de buitenste stelt een hoofdstuk / paragraaf voor, de binnenste een "generic container", die puur voor opmaak doeleinden ertussen wordt gezet, de tweede heeft ook geen semantische waarde, de eerste wel

mophor wijzigde dit bericht 20-07-2005 14:52 (63%)

quote:

mophor schreef op woensdag 20 juli 2005 @ 14:42:
in principe heb je ze bijna niet meer nodig, maar natuurlijk kom je er af en toe niet onderuit. Navigatie zou ik in een <map> element zetten, en verder zou ik div's die puur voor structuur zijn een class="structural" meegeven, omdat ze echt iets anders zijn dan div's om hoofdstukken / paragrafen mee aan te geven. Niet dat een parser er iets mee doet, maar ik vind het voor mezelf wel overzichtelijk.

Waarschijnlijk staat er verder in je header en footer dusdanig weinig "content" dat dit ook niet kwaad kan bij indexeren. (Al zou ik een class waarmee je aangeeft dat een stuk niet geindexeerd hoeft te worden wel op prijs stellen)

@hierboven: nr1, de div eromheen zorgt dat de p en de h1 bij elkaar horen, eventueel kunnen er meerdere p's achteraan. Mocht je om opmaak redenen een extra div om die p's nodig hebben, doe dat dan gewoon gerust (class="structural"), maar bebruik wel p's binnen die div. IMHO is direct inline content binnen een div not done.

reactie op je edit: een hx hoort binnen een paragraaf (div), samen met alle p's tables etc.

Het mapelement is toch puur en alleen bedoeld om te gebruiken als imagemap?

quote: http://www.w3schools.com/tags/tag_map.asp

The <map> tag
Definition and Usage

Defines a client-side image-map. An image-map is an image with clickable regions.

nope:

quote: http://www.w3.org/TR/html401/struct/objects.html#edef-MAP

The MAP element specifies a client-side image map (or other navigation mechanism) that may be associated with another elements (IMG, OBJECT, or INPUT). An image map is associated with an element via the element's usemap attribute. The MAP element may be used without an associated image for general navigation mechanisms.

check de eerste en laatste zin.

mophor wijzigde dit bericht 20-07-2005 14:55 (3%)

quote:

mophor schreef op woensdag 20 juli 2005 @ 14:55:
nope:

[...]


check de eerste en laatste zin.

Je hebt gelijk, stom!

quote:

mophor schreef op woensdag 20 juli 2005 @ 14:42:
Waarschijnlijk staat er verder in je header en footer dusdanig weinig "content" dat dit ook niet kwaad kan bij indexeren. (Al zou ik een class waarmee je aangeeft dat een stuk niet geindexeerd hoeft te worden wel op prijs stellen)

Hoe krijg je dat voor elkaar dan Met meta-tags of robots.txt kun je alleen bepaalde delen van een site niet laten indexeren en niet bepaalde delen van een pagina.

dat krijg je niet voor elkaar, daarom zou ik het wel op prijs stellen als er zo'n mechanisme was (iets dergelijks als rel="noFollow", maar dan class="noIndex" ofzo) ik bedoel hetzelfde als jij

quote:

mophor schreef op woensdag 20 juli 2005 @ 15:15:
dat krijg je niet voor elkaar, daarom zou ik het wel op prijs stellen als er zo'n mechanisme was (iets dergelijks als rel="noFollow", maar dan class="noIndex" ofzo) ik bedoel hetzelfde als jij

Zou wel heel vervelend zijn als de crawler dan niet de links uit het menu mee zou pakken voor de indexering

Okee, ik heb nu een opzet gemaakt voor de linker paragraaf/structuur (met de tips en handvatten uit dit topic in mijn achterhoofd). Ik ben benieuwd wat jullie van mijn opzet vinden? Tips en suggesties zijn welkom!


De opmaakcode:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>     <head>         <title>Untitled Document</title>         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">         <link href="../styles/style.css" rel="stylesheet" type="text/css">     </head>     <body>         <span class="structure" id="navigation">             <h1>Woningaanbod</h1>             <map id="navigation">                 <p>                     <ol>                         <li>Kopen</li>                         <li>Verkopen</li>                         <li>Bestaande bouw</li>                         <li>Nieuwbouw</li>                     </ol>                 </p>             </map>             [img]"../images/navigation_bottom_illustration.png"[/img]         </span>     </body> </html>

Ik heb de structuur de klasse 'structuur' meegegeven omdat de structuur tot de structuur van het document behoort, en daarnaast een ID omdat het wel een apart gedeelte is namelijk het navigatiegedeelte. Daarnaast twijfelde ik of ik de afbeelding een ID mee zou geven. Ik heb de afbeelding toch een ID meegegeven, omdat ik alleen een afbeelding op zich zelf te vaag vind. Ook voor een spraakbrowser is alleen een afbeelding zonder ID te vaag lijkt me.

Het voorbeeld (dat ik om moet zetten in html/css):


PS - Ik heb onder een nieuwe naam geregistreerd omdat ik mijn oude wachtwoord vergeten ben.

deprogrammeur wijzigde dit bericht 21-07-2005 15:26 (15%)

ik zie 2 id's navigation en een span waar een div meer apropriate is

verder denk ik dat dat plaatje ook beter naar de css kan

quote:

mophor schreef op donderdag 21 juli 2005 @ 16:52:
ik zie 2 id's navigation en een span waar een div meer apropriate is

verder denk ik dat dat plaatje ook beter naar de css kan

1. Nee, ik heb een ID 'navigation' en een ID 'navigationBottomIllustration'.
2. Het plaatje naar CSS lijkt me indeed een goed idee.

Maar verder vind je het dus wel okee qua opmaak?

nee,
je hebt wel 2x hetzelfde id, in de map en de span
verder een ol in een p, wat niet correct is
je link en meta zijn geen xhtml, maar sowieso zou ik geen xhtml gebruiken, je meta zegt sowieso html
en verder zou ik die h1 binnen de map doen, hij zegt vermoedelijk daar wat over? gezien je layout

om maar even een voorzet te geven:

code:

<body>
  <div>
    <map>
      <h1>woningaanbod</h1>
      <ol>
    </map>
    <div>
      <h1>bestaande bouw</h1>
      <!-- etc -->
    </div>
  </div>
</body>

verder kan je je code natuurlijk ook zelf valideren

mophor wijzigde dit bericht 21-07-2005 17:14 (60%)

quote:

deprogrammeur schreef op donderdag 21 juli 2005 @ 15:17:
PS - Ik heb onder een nieuwe naam geregistreerd omdat ik mijn oude wachtwoord vergeten ben.

offtopic:
Daar hebben we de passmailer voor, klonen is in principe niet toegestaan dus heb ik je oude account op slot gezet

crisp wijzigde dit bericht 21-07-2005 17:27 (9%)

quote:

mophor schreef op donderdag 21 juli 2005 @ 17:04:
nee,
je hebt wel 2x hetzelfde id, in de map en de span
verder een ol in een p, wat niet correct is
je link en meta zijn geen xhtml, maar sowieso zou ik geen xhtml gebruiken, je meta zegt sowieso html
en verder zou ik die h1 binnen de map doen, hij zegt vermoedelijk daar wat over? gezien je layout

om maar even een voorzet te geven:

code:

<body>
  <div>
    <map>
      <h1>woningaanbod</h1>
      <ol>
    </map>
    <div>
      <h1>bestaande bouw</h1>
      <!-- etc -->
    </div>
  </div>
</body>

verder kan je je code natuurlijk ook zelf valideren

1. Je hebt gelijk, dat had ik over het hoofd gezien.
2. Op je website gaf je een voorbeeld waarbij je de links die dienen voor de navigatie, in een lijst binnen het map-element plaatst:

quote: http://www.rikkertkoppes.com/thoughts/map-element

So, instead of wrapping a div around your navigation elements (lists probably), put it in a map element, which is much more meaningful.

<map name="navigation" id="navigation">
<ol>
<li>item 1</li>
<li>item 2</li>
<!-- etc -->
</ol>
</map>

Note that the name attribute on this element is mandatory in HTML, in XHTML, the id attribute is mandatory.

Dat lijkt mij ook het meest logische aangezien de links bedoeld zijn voor de navigatie. De titel (h1) heeft mijns inziens niets met de navigatie van doen. Verder denk ik dat ik het ID 'navigation' bij het map-element weg kan laten aangezien het map-element al impliceert dat het om navigatie gaat? Of vind je dat te vaag?

3. Is het niet beter om als doctype 'XHTML' door te geven aangezien je zo expliciet aangeeft de volledige opmaak met CSS te regelen?

4. Heb je tips m.b.t. goede boeken aangaande het schrijven van semantisch correcte (X)HTML?

Edit:

Ik zit nu ook te twijfelen of ik de afbeelding nu wel of niet een ID zal meegeven, want in principe zou alleen een titel ook moeten volstaan? Dan zou je dus het volgende krijgen:

HTML:

1	[img]"../images/navigation_bottom_illustration.png"[/img]

Moet je trouwens het alt-element ook nog gebruiken bij de afbeelding? Ik zie daar namelijk niets over staan op je webstie:

quote: http://www.rikkertkoppes.com/thoughts/2004/12/02

[img]"foo.gif"[/img]

Edit 2:

Ik zie in de broncode van je website het volgende staan:

quote:

<map name="mainmenu" id="mainmenu">
<ul>
<li class="non_visual"><a href="#content">skip to main content</a></li>
<li><a href="/news" rel="chapters" title="news">news</a></li>
<li><a href="/artwork" rel="chapters" title="artwork">artwork</a></li>
<li><a href="/thoughts" rel="chapters" title="thoughts">thoughts</a></li>
<li><a href="/artist" rel="chapters" title="artist">artist</a></li>
<li><a href="/links" rel="chapters" title="links">links</a></li>
</ul>
</map>

Voor de navigatie van je eigen website gebruik je zo te zien een ongeordende lijst, terwijl je in het voorbeeld op je website uitgaat van een geordende lijst. Zelf zou ik een geordende lijst logischer vinden (i.p.v. een ongeordende lijst) aangezien je de links voor de navigatie vaak in een geordende volgorde zet.

Kun je die lijst trouwens niet gewoon helemaal weglaten?

deprogrammeur wijzigde dit bericht 22-07-2005 14:08 (70%)

reagerende:

2) je moet zelf even uitzoeken of de titel bij de navigatie hoort of niet, afhankelijk van het antwoord plaats je 'm binnen of buiten de map (mij lijkt ie er binnen te horen als ik naar je ontwerp kijk)

3) ook in html kan j eprima opmaak en content scheiden, zou je ook gewoon moeten doen. XHTML is niet meer semantisch, niet meer modulair, niet korter en niet sneller dan html. Het is gewoon compleet iets anders.

4) boeken weet ik niet, er is veel op internet over te vinden iig, anne (van kesteren) heeft er wel wat artikelen over, chem heeft ook wat geschreven en ik dus ook. nog een erg illustratieve link

5) id is niet altijd nodig, title in dit geval ook niet, alt altijd

6) ol of ul gebruik je als de volgorde van belang is of juist niet (heeft niets met al of niet verschijnen van nummertjes te maken, daar heb je css voor). In mijn geval ben ik van mening dat m'n menu een arbitraire volgorde heeft.

7) een menu is in essentie een lijstje van links, vandaar de lijst, voor de opmaak heb je 'm misschien niet strict nodig, maar semantisch is het logischer

mophor wijzigde dit bericht 22-07-2005 16:26 (14%)

quote:

mophor schreef op vrijdag 22 juli 2005 @ 16:04:
reagerende:

2) je moet zelf even uitzoeken of de titel bij de navigatie hoort of niet, afhankelijk van het antwoord plaats je 'm binnen of buiten de map (mij lijkt ie er binnen te horen als ik naar je ontwerp kijk)

3) ook in html kan j eprima opmaak en content scheiden, zou je ook gewoon moeten doen. XHTML is niet meer semantisch, niet meer modulair, niet korter en niet sneller dan html. Het is gewoon compleet iets anders.

4) boeken weet ik niet, er is veel op internet over te vinden iig, anne (van kesteren) heeft er wel wat artikelen over, chem heeft ook wat geschreven en ik dus ook.

5) id is niet altijd nodig, title in dit geval ook niet, alt altijd

6) ol of ul gebruik je als de volgorde van belang is of juist niet (heeft niets met al of niet verschijnen van nummertjes te maken, daar heb je css voor). In mijn geval ben ik van mening dat m'n menu een arbitraire volgorde heeft.

7) een menu is in essentie een lijstje van links, vandaar de lijst, voor de opmaak heb je 'm misschien niet strict nodig, maar semantisch is het logischer

2) Ik heb de titel bij de navigatie gezet.

3) Ik zal me dan eens wat meer verdiepen in XHTML. Op w3schools las ik dat het voordeel van het meegeven van een XHTML-doctype is, dat je de HTML puur als omschrijving laat interpreteren en dat de HTML dus geen rol meer vervuld in de opmaak van de webpagina.

6) Links zet je toch niet in een willekeurige volgorde? Ik bedoel: je zet een link als 'links' toch vaak bewust niet vooraan?

3) ik zal je nog sterker vertellen: xhtml werkt niet eens in internet explorer, maar daar is zat over te vinden. HTML (en XHTML) horen uberhaupt geen rol te spelen in de opmaak van je pagina.

6) een bewuste volgorde is wat anders dan of die volgorde van belang is. Je moet je afvragen of de betekenis van de lijst veranderd als je de boel husselt. In mijn geval vind ik dat niet. Bij een lijstje met prijswinnaars ofzo is dat wel het geval.

mophor wijzigde dit bericht 22-07-2005 16:43 (10%)

quote:

mophor schreef op vrijdag 22 juli 2005 @ 16:35:
3) ik zal je nog sterker vertellen: xhtml werkt niet eens in internet explorer, maar daar is zat over te vinden. HTML (en XHTML) horen uberhaupt geen rol te spelen in de opmaak van je pagina.

6) een bewuste volgorde is wat anders dan of die volgorde van belang is. Je moet je afvragen of de betekenis van de lijst veranderd als je de boel husselt. In mijn geval vind ik dat niet. Bij een lijstje met prijswinnaars ofzo is dat wel het geval.

3) Okee duidelijk.
4) Ik snap je punt.

Ik wil onderstaand voorbeeld realiseren in HTML:


Voor de realisatie heb ik onderstaande code geschreven:

HTML:

1	<h3><h1>29</h1> object(en) gevonden in de categorie: <h2>bestaande bouw</h2>.</h3>

Nu vraag ik mij af of mijn code semantisch correct is aangezien MSIE renderproblemen (foute lettergroottes) geeft bij het gebruik van head-tags (h1, h2 etc.) binnen head-tags?

Wellicht handiger om eens goed de specificaties door te lezen (10 minute HTML guide. Ook waar elementen voor bedoeld zijn. Als je naar jouw voorbeeld kijkt, dan ga je mij toch niet vertellen dat die drie koppen de drie belangrijkste items op je pagina zijn?

Daarnaast geeft de specificatie aan dat een header alleen inline elementen mag bevatten (en dus geen header, wat een block-element is: http://www.w3.org/TR/html4/struct/global.html#h-7.5.5).

Dat kan je ook achterhalen via de validator van w3. De validator is niet heilig, maar geeft wel genoeg informatie waarom bepaalde HTML schrijfwijze niet correct is.

Ik vind het wel grappig dat je HTML probeert aan te leren, maar verdiep je wel eerst in de manier waarop je het moet toepassen, voordat je lukraak elementen gaat gebruiken

BtM909 wijzigde dit bericht 25-07-2005 12:13 (17%)

quote:

BtM909 schreef op maandag 25 juli 2005 @ 12:12:
Wellicht handiger om eens goed de specificaties door te lezen (10 minute HTML guide. Ook waar elementen voor bedoeld zijn. Als je naar jouw voorbeeld kijkt, dan ga je mij toch niet vertellen dat die drie koppen de drie belangrijkste items op je pagina zijn?

Daarnaast geeft de specificatie aan dat een header alleen inline elementen mag bevatten (en dus geen header, wat een block-element is: http://www.w3.org/TR/html4/struct/global.html#h-7.5.5).

Dat kan je ook achterhalen via de validator van w3. De validator is niet heilig, maar geeft wel genoeg informatie waarom bepaalde HTML schrijfwijze niet correct is.

Ik vind het wel grappig dat je HTML probeert aan te leren, maar verdiep je wel eerst in de manier waarop je het moet toepassen, voordat je lukraak elementen gaat gebruiken

Okee die head-tags zijn dus fout. Echter lijkt het gebruik van p-tags mij ook niet echt logisch aangezien ik die '29' bijvoorbeeld niet snel als alinea kwalificeer. Het beste lijkt het me dan om een div te gebruiken?

deprogrammeur wijzigde dit bericht 25-07-2005 13:19 (6%)

Die '29' moet je ook niet als <p> gebruiken want het is geen paragraaf.
Je kan hiervoor best wel <span>'s voor gebruiken, dus zoiets:


HTML:

1	<span class="regeltje"><b>29</b> object(en) gevonden in de categorie: <span class="cat">bestaande bouw</span>.</span>

Maar het is wel onderdeel van de alinea, en laat een <p/> nu juist een alinea aangeven . Als je per se wil dat '29' een semantische opmaak krijgt, dan zul je moeten gaan kijken naar andere dingen dan gewoon pure HTML, zie ook Semantic web daarvoor.

Ik zou jouw zinnetje zo opmaken:
HTML:

1	<p><span class="aantal">29</span> object(en) gevonden in de categorie: <span class="categorie">bestaande bouw</span>.</p>

zou iets doen als
<p><span>29</span> object(en) gevonden in de categorie: <i>bestaande bouw</i>.</p>

met die <i> in de lijn van de gedachte van http://www.whatwg.org/specs/web-apps/current-work/#the-i

b zou ik niet gebruiken, die stelt semantisch niets voor (i in de oude definitie ook niet)

edit: in essentie wat harm dus zegt. Alleen zou ik zijn class="aantal" liever class="number" maken, om het wat algemener te houden

mophor wijzigde dit bericht 25-07-2005 13:22 (27%)

Okee ik snap het. Wederom hartelijk bedankt!

Edit:

Ik realiseer nu onderstaand voorbeeld:



Voor de 'Plaats', 'Status' etc. gebruik ik de head-tag. Volgens de W3-specs mag dat, aangezien head-elementen inline-elementen zijn. Echter vraag ik me af of het ook een juiste toepassing van de head-tag is? Ik vind het gebruik van span-tag met als class 'head' o.i.d. namelijk niet echt netjes. Kortom vinden jullie het gebruik van de head-tag binnen deze context gerechtvaardigd, of moet ik toch een span-tag gebruiken?

HTML:

1 2 3 4 5 6 7 8 9 10 11 12

<div class="structure" id="recent">     <h1>Van der Helstraat 50</h1>     <p>         [img]"../images/image_small.png"[/img]         <p>             <h1>Plaats: </h1>Leeuwarden             <h1>Status: </h1>te koop             <h1>Opp. perceel: </h1>127 m2             <h1>Vraagprijs: </h1>E 125.000,- kk         </p>     </p> </div>

deprogrammeur wijzigde dit bericht 25-07-2005 17:26 (92%)

kijk eens naar een dl

verder is h1 echt een block element hoor, die mag ook never niet in een p

verder mogen genestte p's ook niet. Misschien moet je de specs toch iets beter doorlezen, zelfs in die 10 min HTML guide die al genoemd is staat een dl genoemd overigens. Er zijn een hoop nuttige links langsgekomen, lees je die ook door?

id=recent lijkt me niet handig, ga je al die blokken aan de rechterkant recent noemen? Naast het blok links en midden is rechts volgens mij een apart "hoofdstuk" je zou daarvoor zelfs een h1 recent kunnen doen, de blokken erin zijn paragrafen erbinnen


HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id="recent">     <h1>recent</h1> <!-- deze geef je niet weer dmv css -->     <div>       <h2>Van der Helstraat 50</h2>       <p>[img]"../images/image_small.png"[/img]</p>       <dl>             <dt>Plaats: </dt>             <dd>Leeuwarden</dd>         </dl>     </div>     <div>       <!-- volgende huis -->     </div> </div>

edit: dit is dus voor het complete rechter deel. Als algemene tip: probeer je css zo min mogelijk van id's en classes af te laten hangen, het hele rechter deel kan je selecteren op het id=recent

die h1 heb ik erbij gezet voor de duidelijkheid, da's wellicht handig voor text- en speechbrowsers. met css laat je die gewoon niet zien als je dat niet wilt: #recent h1 {display: none}

mophor wijzigde dit bericht 25-07-2005 18:48 (27%)

Voor het stukje met plaats, oppervlakte en de gegevens kun je ook prima een tabelletje gebruiken. Het zijn immers gewoon zuivere gegevens die je opnoemt.

alt="Image of the object" is natuurlijk gewoon fout, omdat de alt-tekst niet in de taal van je document is.

quote:

mophor schreef op maandag 25 juli 2005 @ 18:41:
kijk eens naar een dl

verder is h1 echt een block element hoor, die mag ook never niet in een p

verder mogen genestte p's ook niet. Misschien moet je de specs toch iets beter doorlezen, zelfs in die 10 min HTML guide die al genoemd is staat een dl genoemd overigens. Er zijn een hoop nuttige links langsgekomen, lees je die ook door?

id=recent lijkt me niet handig, ga je al die blokken aan de rechterkant recent noemen? Naast het blok links en midden is rechts volgens mij een apart "hoofdstuk" je zou daarvoor zelfs een h1 recent kunnen doen, de blokken erin zijn paragrafen erbinnen


HTML:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<div id="recent">     <h1>recent</h1> <!-- deze geef je niet weer dmv css -->     <div>       <h2>Van der Helstraat 50</h2>       <p>[img]"../images/image_small.png"[/img]</p>       <dl>             <dt>Plaats: </dt>             <dd>Leeuwarden</dd>         </dl>     </div>     <div>       <!-- volgende huis -->     </div> </div>

edit: dit is dus voor het complete rechter deel. Als algemene tip: probeer je css zo min mogelijk van id's en classes af te laten hangen, het hele rechter deel kan je selecteren op het id=recent

die h1 heb ik erbij gezet voor de duidelijkheid, da's wellicht handig voor text- en speechbrowsers. met css laat je die gewoon niet zien als je dat niet wilt: #recent h1 {display: none}

Ik heb je tips toegepast. Ik vraag me alleen af hoe ik de automatische pagebreak na het dt-element uit kan zetten? page-break-after: none; werkt in ieder geval niet in MSIE.

Edit:

Bovenstaand probleem is inmiddels opgelost d.m.v. een float: left.

deprogrammeur wijzigde dit bericht 26-07-2005 12:55 (11%)

Inmiddels heb ik het document af:

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 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>     <head>         <title>Untitled Document</title>         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />         <link href="../styles/style.css" rel="stylesheet" type="text/css" />     </head>     <body>         <div class="structure" id="navigation">             <map name="navigation">                 <h1>Woningaanbod</h1>                 <ul>                     <li><a href="javascript://">» Kopen</a></li>                     <li><a href="javascript://">» Verkopen</a></li>                     <li><a href="javascript://">» Bestaande bouw</a></li>                     <li><a href="javascript://">» Nieuwbouw</a></li>                 </ul>             </map>             [img]"../images/navigation_bottom_illustration.png"[/img]         </div>         <div class="structure" id="overview">             <h1>Bestaande bouw</h1>             <map name="navigation">                 <p><a href="javascript://">[img]"../images/page_navigation_previous.png"[/img]</a> Pagina 1 van 6 <a href="javascript://">[img]"../images/page_navigation_next.png"[/img]</a></p>             </map>             <p><span class="quantity">29</span> object(en) gevonden in de categorie: <a href="javascript://">bestaande bouw</a>.</p>               <p>                 <div class="objects">                     <h1>Akkrum, Buterwal 8</h1>                     <p>[img]"../images/image.png"[/img]</p>                     <p><span class="price">Vraagprijs:</span> E 480.000,- kk <span class="status">Status: </span><span class="statusSold">verkocht OV</span></p>                     <p>                         In het centrum bij de pasagiershaven gelegen                         uitstekend onderhouden VRIJSTAANDE VILLA met                         GARAGE en AANLEGPLAATS... <a href="javascript://">Lees Verder »</a>                      </p>                 </div>                 <div class="objects">                     <h1>Akkrum, Buterwal 8</h1>                     <p>[img]"../images/image.png"[/img]</p>                     <p><span class="price">Vraagprijs:</span> E 480.000,- kk <span class="status">Status: </span><span class="statusForSale">Te koop</span></p>                     <p>                         In het centrum bij de pasagiershaven gelegen                         uitstekend onderhouden VRIJSTAANDE VILLA met                         GARAGE en AANLEGPLAATS... <a href="javascript://">Lees Verder »</a>                      </p>                 </div>             </p>             <map name="navigation">                 <p><a href="javascript://">[img]"../images/page_navigation_previous.png"[/img]</a> Pagina 1 van 6 <a href="javascript://">[img]"../images/page_navigation_next.png"[/img]</a></p>             </map>         </div>         <div id="recent">             <div>                 <h1>Paulus Moreelstraat 6</h1>                   <p>[img]"../images/image_small.png"[/img]</p>                   <dl>                     <dt>Plaats: </dt>                     <dd>Leeuwarden</dd>                     <dt>Status: </dt>                     <dd>te koop</dd>                     <dt>Opp. perceel: </dt>                     <dd>86 m2</dd>                     <dt>Vraagprijs: </dt>                     <dd>20.990.000,- kk</dd>                 </dl>             </div>             <div>                 <h1>Paulus Moreelstraat 6</h1>                   <p>[img]"../images/image_small.png"[/img]</p>                   <dl>                     <dt>Plaats: </dt>                     <dd>Leeuwarden</dd>                     <dt>Status: </dt>                     <dd>te koop</dd>                     <dt>Opp. perceel: </dt>                     <dd>86 m2</dd>                     <dt>Vraagprijs: </dt>                     <dd>20.990.000,- kk</dd>                 </dl>             </div>             <div>                 <h1>Paulus Moreelstraat 6</h1>                   <p>[img]"../images/image_small.png"[/img]</p>                   <dl>                     <dt>Plaats: </dt>                     <dd>Leeuwarden</dd>                     <dt>Status: </dt>                     <dd>te koop</dd>                     <dt>Opp. perceel: </dt>                     <dd>86 m2</dd>                     <dt>Vraagprijs: </dt>                     <dd>20.990.000,- kk</dd>                 </dl>             </div>         </div>     </body> </html>

Ik heb het document getest tegen de W3-validator en ik kreeg nog wel een paar fouten, maar die zijn waarschijnlijk aan de inspringen te wijten?

quote:

Below are the results of attempting to parse this document with an SGML parser.

1.

Line 6, column 68: document type does not allow element "LINK" here

...yles/style.css" rel="stylesheet" type="text/css" />

The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).

✉
2.

Line 7, column 7: end tag for element "HEAD" which is not open

</head>

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occured in a script section of your document, you should probably read this FAQ entry.

✉
3.

Line 8, column 6: document type does not allow element "BODY" here

<body>

✉
4.

Line 52, column 6: end tag for element "P" which is not open

</p>

deprogrammeur wijzigde dit bericht 26-07-2005 13:35 (23%)

HTML:

1 2	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link href="../styles/style.css" rel="stylesheet" type="text/css">

This should do the trick! Verderop heb je een onnodige <p> die kan je even weghalen. Weet niet of je nesting wel goed is (regel 27 en 48 heb ik weggehaald)

Daarnaast zou ik zelf gebruik maken van het stricte document model, maar die keuze is aan jou

ik zou die h1 van de huizen namen door h2 vervangen, ze zitten duidelijk onder de h1 "bestaande bouw" ook in je recent blok zitten ze een niveau lager eigenlijk (vandaar mijn suggestie van een hidden h1, dat maakt de boel wat logischer in elkaar.

alle hx elementen samen zouden een nette inhoud van je pagina moeten vormen

gooi de boel eens zonder css online, en kijk dan of het er logisch uitziet, dat zou wel het geval moeten zijn.

mophor wijzigde dit bericht 26-07-2005 14:00 (12%)

De code met doorgevoerde wijzigingen ('100% valide HTML 4.01 transitioneel' volgens de W3-validator) :

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 84 85 86 87 88 89 90 91 92 93 94 95 96 97

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>     <head>         <title>Untitled Document</title>         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">         <link href="../styles/style.css" rel="stylesheet" type="text/css">     </head>     <body>         <div class="structure" id="navigation">             <map name="navigation">                 <h1>Woningaanbod</h1>                 <ul>                     <li><a href="javascript://">» Kopen</a></li>                     <li><a href="javascript://">» Verkopen</a></li>                     <li><a href="javascript://">» Bestaande bouw</a></li>                     <li><a href="javascript://">» Nieuwbouw</a></li>                 </ul>             </map>             [img]"../images/navigation_bottom_illustration.png"[/img]         </div>         <div class="structure" id="overview">             <h1>Bestaande bouw</h1>             <map name="navigation">                 <p><a href="javascript://">[img]"../images/page_navigation_previous.png"[/img]</a> Pagina 1 van 6 <a href="javascript://">[img]"../images/page_navigation_next.png"[/img]</a></p>             </map>             <p><span class="quantity">29</span> object(en) gevonden in de categorie: <a href="javascript://">bestaande bouw</a>.</p>             <div class="objects">                 <h2>Akkrum, Buterwal 8</h2>                 <p>[img]"../images/image.png"[/img]</p>                 <p><span class="price">Vraagprijs:</span> E 480.000,- kk <span class="status">Status: </span><span class="statusSold">verkocht OV</span></p>                 <p>                     In het centrum bij de pasagiershaven gelegen                     uitstekend onderhouden VRIJSTAANDE VILLA met                     GARAGE en AANLEGPLAATS... <a href="javascript://">Lees Verder »</a>                  </p>             </div>             <div class="objects">                 <h2>Akkrum, Buterwal 8</h2>                 <p>[img]"../images/image.png"[/img]</p>                 <p><span class="price">Vraagprijs:</span> E 480.000,- kk <span class="status">Status: </span><span class="statusForSale">Te koop</span></p>                 <p>                     In het centrum bij de pasagiershaven gelegen                     uitstekend onderhouden VRIJSTAANDE VILLA met                     GARAGE en AANLEGPLAATS... <a href="javascript://">Lees Verder »</a>                  </p>             </div>             <map name="navigation">                 <p><a href="javascript://">[img]"../images/page_navigation_previous.png"[/img]</a> Pagina 1 van 6 <a href="javascript://">[img]"../images/page_navigation_next.png"[/img]</a></p>             </map>         </div>         <div id="recent">             <h1>Recent</h1>             <div>                 <h2>Paulus Moreelstraat 6</h2>                   <p>[img]"../images/image_small.png"[/img]</p>                   <dl>                     <dt>Plaats: </dt>                     <dd>Leeuwarden</dd>                     <dt>Status: </dt>                     <dd>te koop</dd>                     <dt>Opp. perceel: </dt>                     <dd>86 m2</dd>                     <dt>Vraagprijs: </dt>                     <dd>20.990.000,- kk</dd>                 </dl>             </div>             <div>                 <h2>Paulus Moreelstraat 6</h2>                   <p>[img]"../images/image_small.png"[/img]</p>                   <dl>                     <dt>Plaats: </dt>                     <dd>Leeuwarden</dd>                     <dt>Status: </dt>                     <dd>te koop</dd>                     <dt>Opp. perceel: </dt>                     <dd>86 m2</dd>                     <dt>Vraagprijs: </dt>                     <dd>20.990.000,- kk</dd>                 </dl>             </div>             <div>                 <h2>Paulus Moreelstraat 6</h2>                   <p>[img]"../images/image_small.png"[/img]</p>                   <dl>                     <dt>Plaats: </dt>                     <dd>Leeuwarden</dd>                     <dt>Status: </dt>                     <dd>te koop</dd>                     <dt>Opp. perceel: </dt>                     <dd>86 m2</dd>                     <dt>Vraagprijs: </dt>                     <dd>20.990.000,- kk</dd>                 </dl>             </div>         </div>     </body> </html>

gaat de goeie kant op, nog wat opmerkingen

- je hebt verschillende elementen met name="navigation" nu hoeven names geloo fik niet strikt uniek te zijn maar dat zou ik wel doen

- waar is de class op de elementen met class="object" voor? om zet te onderscheiden kan, maar dan lijkt het mij dat de div's in het laatste stuk van hetzelfde type moeten zijn. Voor css is het iig niet nodig omdat je deze div's al kan bereiken met "#overview div {}" (wat ik zeker aanraad)

- ook het gebruik van class="structure" volg ik niet helemaal. Bedenk goed of je classen van elementen zou willen onderscheiden en hoe ze dan zouden moeten heten. Voor de CSS zou het iig niet nodig hoeven zijn, als ik zo effe snel kijk.

Transactional en strict ineen, verbaast me dat dat wordt gevalideerd

Recommended DTDs to use in your Web document.

quote:

BtM909 schreef op dinsdag 26 juli 2005 @ 15:27:
Transactional en strict ineen, verbaast me dat dat wordt gevalideerd

Recommended DTDs to use in your Web document.

Ja dat was een foutje. Ik had alleen even de DTD aangepast zonder op de rest van het doctype te letten.

quote:

mophor schreef op dinsdag 26 juli 2005 @ 15:26:
gaat de goeie kant op, nog wat opmerkingen

- je hebt verschillende elementen met name="navigation" nu hoeven names geloo fik niet strikt uniek te zijn maar dat zou ik wel doen

- waar is de class op de elementen met class="object" voor? om zet te onderscheiden kan, maar dan lijkt het mij dat de div's in het laatste stuk van hetzelfde type moeten zijn. Voor css is het iig niet nodig omdat je deze div's al kan bereiken met "#overview div {}" (wat ik zeker aanraad)

- ook het gebruik van class="structure" volg ik niet helemaal. Bedenk goed of je classen van elementen zou willen onderscheiden en hoe ze dan zouden moeten heten. Voor de CSS zou het iig niet nodig hoeven zijn, als ik zo effe snel kijk.

1. Je hebt gelijk, ik had het even snel aangepast om de validator te plezieren.
2. 'Objects' slaat op de blokken met huizeninformatie. Ik heb de klasse 'objects' inmiddels verwijderd.
3. 'Structure' gebruik ik juist op jouw aanraden? Je adviseert toch op je website om de div-elementen die voor de structuur van je website zorgen de klasse 'structure' mee te geven?

Edit:

Waarom is het beter om de afbeelding in een aparte paragraaf te plaatsen i.p.v. hem binnen de paragraaf waarin ook de tekst staat te zetten?

Edit 2:

Zou je die huizenopsomming ook in een tabel mogen zetten?

deprogrammeur wijzigde dit bericht 26-07-2005 16:09 (53%)

HTML:

1	<a href="javascript://">

"als het geen link is, gebruik dan geen anchor..."

quote:

crisp schreef op dinsdag 26 juli 2005 @ 16:10:
HTML:

1	<a href="javascript://">

"als het geen link is, gebruik dan geen anchor..."

Het is een opzet voor een template, dus die links worden later ingevuld.

huizenopsomming kan ook in een tabel, dan is elk huis een soort record
wat je ook kan doen is wat cheatah aangaf, alleen de eigenschappen in een tabel ipv een dl, denk dat dat niet heel veel uitmaakt, maar als ik kijk naar hoe je ontwerp in elkaar steekt lijkt me de huidige structuur makkelijker stylen dan een tabel

class="structure" geef ik idd ook aan div's die verder geen semantische waarde hebben en dus puur voor structuur (/opmaakdoeleinden) zijn toegevoegd. In jouw geval is dat volgens mij alleen de eerste.

Afbeeldingen kan je in een paragraaf zetten als ie ermee gerelateerd is. Je moet zelf even bedenken in hoeverre dat het geval is. Het komt niet zo heel nauw imho.

Je hebt nu de belangrijkste dingen op orde denk ik, dingen als wel of geen classes, en de naam ervan, een paar extra div's omwille van opmaak, plaatjes al of niet bij een paragraaf trekken of een tabel ipv een dl zijn allemaal kleine dingetjes, kies gewoon wat het makkelijkst te stylen valt en wat voor jou het handigst overkomt.

quote:

mophor schreef op dinsdag 26 juli 2005 @ 16:20:
huizenopsomming kan ook in een tabel, dan is elk huis een soort record
wat je ook kan doen is wat cheatah aangaf, alleen de eigenschappen in een tabel ipv een dl, denk dat dat niet heel veel uitmaakt, maar als ik kijk naar hoe je ontwerp in elkaar steekt lijkt me de huidige structuur makkelijker stylen dan een tabel

class="structure" geef ik idd ook aan div's die verder geen semantische waarde hebben en dus puur voor structuur (/opmaakdoeleinden) zijn toegevoegd. In jouw geval is dat volgens mij alleen de eerste.

Afbeeldingen kan je in een paragraaf zetten als ie ermee gerelateerd is. Je moet zelf even bedenken in hoeverre dat het geval is. Het komt niet zo heel nauw imho.

Je hebt nu de belangrijkste dingen op orde denk ik, dingen als wel of geen classes, en de naam ervan, een paar extra div's omwille van opmaak, plaatjes al of niet bij een paragraaf trekken of een tabel ipv een dl zijn allemaal kleine dingetjes, kies gewoon wat het makkelijkst te stylen valt en wat voor jou het handigst overkomt.

Okee, thanks! Blijf ik alleen met die border-attribuut zitten die ik omwille van MSIE aan de paginanavigatie moet toevoegen:

HTML:

1	<a href="javascript://">[img]"../images/page_navigation_next.png"[/img]</a>

deprogrammeur wijzigde dit bericht 26-07-2005 16:58 (14%)

code:

img {
    border: none;
}

quote:

Bosmonster schreef op dinsdag 26 juli 2005 @ 17:01:
code:

img {
    border: none;
}

Vaag.. nu werkt het wel inderdaad. Thanks!