[CSS] Style aan een element koppelen i.p.v DIV gebruiken

[DerKleinePunkt]

Laat ik beginnen met een korte inleiding en het uitleggen van de topictitel. Ik ben reeds enige tijd actief als "webprogrammeur". Ik hield me bezig met de programmeer aspecten van een site en liet het design zoveel mogelijk links liggen (lees ik gebruikte tables voor de opmaak ).

Sinds enkele maanden houd ben ik me meer bezig gaan houden met het "design" gedeelte. Ik ben verre van een profesionele designer (m.b.t. looks), maar de toekomstige sites die ik maak bezig ga houden zich aan de programmeer als de design regels en structuren (lees ik gebruik geen tables maar div en veel meer css welke W3 compliant zijn). Afgezien van de nodig browser issues en wat align en box opvul troubles bevalt css me prima. Behalve meer controlle en een betere leesbaarheid, bespaart het me ook code.

Over dit laatste wil ik het met jullie hebben. Ik heb nu al verschillende testsites gemaakt waarop ik op verschillende manieren mijn code heb opgebouwd:
- zoveel mogelijk <div> en zo weinig mogelijk overige xHTML elementen. Voorbeeld, <h1> ik gebruik een <div> die de functie van een header gebruikt i.p.v. het <h1> element te gebruiken.
- zoveel mogelijk xHtml elementen en zo weinig mogelijk <div> gebruiken. Voorbeeld, ik gebruik een <h1> voor een header een <p> voor een paragraaf enz. .
- een combinatie van beide. Een zo goed mogelijke scheiding tussen <div> en overige xHtml elementen. Voorbeeld <div> om de inhoud te alignen en hier en daar vaste opmaak mee te geven. Eventuele extra opmaak wordt gekoppeld aan het het <h1> element zelf (achtergrond plaatje tot weet ik veel wat).

Mijn eerste vraag, wat is nu de juiste manier? Manier 1 en 2 leveren de minste code op, waarvan methode 1 mijn voorkeur geniet. Methode 3 levert de meeste code op, maar zorgt voor een beter onscheid tussen site en tekst opmaak.

Mijn tweede vraag (eigenlijk gekoppeld aan de eerste). Moet je alleen <div> gebruiken wanneer het niet anders kan (bijv. alignen). Voor zover ik weet zorgt <div> voor de nodige structuur en heeft het als voordeel dat je layout minder snel verneukt wordt (mijn ervaring is wel dat dit geldt voor situaties waar je wel div moet gebruiken). Maar zoals methode 2 laat zien, kan ik een <h1> element ook een vaste positie meegeven, de opmaak bepalen enz. Hierdoor heeft deze geen invloed heeft op de inhoud van de rest van de layout.

Ik hoop dat jullie mij het een en ander duidelijk kunnen maken (en uiteraard hoop ik zelf ook duidelijk genoeg te zijn geweest met mijn vraagstelling).

[BtM909]

Manier 2, no doubt.

Los van 't feit of je XHTML moet gebruiken, maar voor HTML werd ook al verkondigd om zo veel mogelijk elementen te gebruiken waar ze voor bedoeld zijn.

<div> staat voor division en kan dus niet zomaar ipv een <h1> gebruikt worden

div en spans zijn eigenlijk je laatste redmiddelen

[Woudloper]

Zoals BtM909 al zegt moet je in principe gaan voor 'manier 2' aangezien je DIV tags niet moet misbruiken voor een heading tag o.i.d.

Je 2^de vraag is meer basic HTML/CSS kennis en dit kan je gewoon nalezen in de specificaties van W3C.

[Rowanov]

www.alistapart.com/articles/eatcake, is nuttig artikel met goede uitleg over het scheiden van opmaak en code.

[DerKleinePunkt]

Duidelijk, dus alleen div en span gebruiken wanneer nodig en niet meer. De tweede vraag is inderdaad wat basic. Dit is dan ook meer een vraag waarbij ik in "conflict" komt met mijn innerlijke programmeur (alhoewel mijn collega's wel eens wat anders over me zeggen ). Ik wil zoveel mogelijk bereiken met zo weinig mogelijk en goed geoptimaliseerde code.

[Verwijderd]

zoveel mogelijk beschrijvende elementen, dat is het hele punt van html
http://www.rikkertkoppes.com/thoughts/2004/11/01 heb er ooit een beginnersuitlegje voor gemaakt.

overal divs zetten is smurfentaal: dat begrijpt niemand (lees google) meer. Zodra je zoveel mogelijk verschillende woorden (elementen) gebruikt wordt je taal begrijpelijk. (dan moet je wel een taal hebben waarvan de betekenis van de woorden bekend is

(kwam in een ander topic al iemand tegen die riep dat xml de toekomst was; xml is een taal waarvan niemand de woorden begrijpt omdat je ze zelf mag bedenken. Er zijn wel een aantal voorgedefinieerde woordenboeken als xhtml en mathml, maar met je eigen xml kom je nergens)

[ Voor 62% gewijzigd door Verwijderd op 07-01-2005 11:44 ]

[DerKleinePunkt]

Verwijderd schreef op vrijdag 07 januari 2005 @ 11:41:
zoveel mogelijk beschrijvende elementen, dat is het hele punt van html
http://www.rikkertkoppes.com/thoughts/2004/11/01 heb er ooit een beginnersuitlegje voor gemaakt.

overal divs zetten is smurfentaal: dat begrijpt niemand (lees google) meer. Zodra je zoveel mogelijk verschillende woorden (elementen) gebruikt wordt je taal begrijpelijk. (dan moet je wel een taal hebben waarvan de betekenis van de woorden bekend is

(kwam in een ander topic al iemand tegen die riep dat xml de toekomst was; xml is een taal waarvan niemand de woorden begrijpt omdat je ze zelf mag bedenken. Er zijn wel een aantal voorgedefinieerde woordenboeken als xhtml en mathml, maar met je eigen xml kom je nergens)

Je hebt helemaal gelijk, maak me er zelf ook schuldig aan. Maar moet ook zeggen dat veel sites je nogal vrijlaten in de mogelijkheden welke je kunt gebruiken. Misschien is het in de toekomst handig een taal te maken die veeel stricter is. Hierdoor krijgen mensen zoals ik niet zoveel vrijheid . Tevens moet ik zeggen dat er wel ENORM veel sites zijn die niet werken volgens de "regels" en dus xHtml elementen gebruiken voor zaken waarvoor ze niet nodig zijn (myself included).

De site die het voor mij allemaal veranderd heeft:
http://www.hotdesign.com/seybold/index.html

[Kleine toevoeging, na aanleiding van jouw link]

Wanneer spreek je van een lijst of een tekst met inhoud? Ik had namelijk eens een onderdeel op gebouw waarbij een plaatje werd getoond (product bijv.) en dat aan de onderkant en bovenkant van die plaatje links stonden. Het onderdeel was in mijn ogen zowel een menu als een stukje informatie. Ik heb dit toen opgelost door alles in <li> te pakken (ook de titel van het betreffende item), dit omdat het gehele item bestond uit links en voor zover ik het had begrepen moeten deze gesorteerd worden.

[ Voor 17% gewijzigd door DerKleinePunkt op 07-01-2005 11:57 ]

[Verwijderd]

Sites die ik maak zet ik altijd eerst helemaal op in html, geen CSS, dan heb je als het goed is een compleet kleurlloze, stijlloze pagina, met alleen plaatjes die iets bijdragen aan de content en een (simpele default) layout die begrijpbaar is.

Hiermee bedoel ik dat headers een grootte krijgen in volgorde van belangrijkheid en dus onderscheidbaar zijn van gewoon text. blockquotes worden ingesprongen, address en cite en em worden schuingedrukt etc.

in deze stap voeg ik ook al classes toe, omdat classes niet zozeer iets met je style te maken hebben, maar meer met subclassificatie van content (spammerdespam)
ook dingen met een specifieke aparte functie geef je een vast een id (mainmenu bv)

En vervolgens ga je stylen. Hiervoor zal je sommige dingen willen groeperen, dan zet je er een extra div omheen (bijvoorbeeld een header + bij behorende paragrafen in een <div class="para">, of een extra containertje in je body).

(ik ga dit ook maar eens in een artikeltje stoppen denk ik)

edit antwoord op je vraag: ik heb niet helemaal door wat nu de functie van alle onderdelen is (want daar gaat het uiteindelijk om). zo te horen is niet alles even belangrijk, maar een voorbeeld zou kunnen zijn

code:

<h3>titel van een plaatje</h3>
<dl class="figure">
 <dt><img /></dt>
 <dd>beschrijving en bronvermelding</dd>
</dl>

eventueel nog een extra div eromheen voor layout doeleinden (border om het geheel ofzo). De class="figure" heb ik toegevoegd om deze dl te onderscheiden van normale dl's

[ Voor 21% gewijzigd door Verwijderd op 07-01-2005 12:04 ]

[DerKleinePunkt]

Verwijderd schreef op vrijdag 07 januari 2005 @ 12:00:
Sites die ik maak zet ik altijd eerst helemaal op in html, geen CSS, dan heb je als het goed is een compleet kleurlloze, stijlloze pagina, met alleen plaatjes die iets bijdragen aan de content en een (simpele default) layout die begrijpbaar is.

Hiermee bedoel ik dat headers een grootte krijgen in volgorde van belangrijkheid en dus onderscheidbaar zijn van gewoon text. blockquotes worden ingesprongen, address en cite en em worden schuingedrukt etc.

in deze stap voeg ik ook al classes toe, omdat classes niet zozeer iets met je style te maken hebben, maar meer met subclassificatie van content (spammerdespam)
ook dingen met een specifieke aparte functie geef je een vast een id (mainmenu bv)

En vervolgens ga je stylen. Hiervoor zal je sommige dingen willen groeperen, dan zet je er een extra div omheen (bijvoorbeeld een header + bij behorende paragrafen in een <div class="para">, of een extra containertje in je body).

(ik ga dit ook maar eens in een artikeltje stoppen denk ik)

edit antwoord op je vraag: ik heb niet helemaal door wat nu de functie van alle onderdelen is (want daar gaat het uiteindelijk om). zo te horen is niet alles even belangrijk, maar een voorbeeld zou kunnen zijn

code:

<h3>titel van een plaatje</h3>
<dl class="figure">
 <dt><img /></dt>
 <dd>beschrijving en bronvermelding</dd>
</dl>

eventueel nog een extra div eromheen voor layout doeleinden (border om het geheel ofzo). De class="figure" heb ik toegevoegd om deze dl te onderscheiden van normale dl's

Op deze wijze werk ik momenteel ook. Moet zeggen het bevalt me prima, maar aangezien ik nog betrekkelijk nieuw ben op het gebied van css styling (of hoe je het ook wilt noemen), valt het soms nogal tegen. Enuh niet zoveel spammen naar dezelfde site . Die link is trouwens een zeer goede. Heelveel sites die ik tegenkwam hielden de genoemde stelling erop na (een class gebruik je voor grotere delen). Op de een of andere manier vond ik dit raar, want op W3C stond dit nergens. Dus als je het toch een eigen artikel gaat maken, zet die link dan dikgedrukt in de eerste alinea.

[DerKleinePunkt]

Verwijderd schreef op vrijdag 07 januari 2005 @ 12:00:

edit antwoord op je vraag: ik heb niet helemaal door wat nu de functie van alle onderdelen is (want daar gaat het uiteindelijk om). zo te horen is niet alles even belangrijk, maar een voorbeeld zou kunnen zijn

code:

<h3>titel van een plaatje</h3>
<dl class="figure">
 <dt><img /></dt>
 <dd>beschrijving en bronvermelding</dd>
</dl>

eventueel nog een extra div eromheen voor layout doeleinden (border om het geheel ofzo). De class="figure" heb ik toegevoegd om deze dl te onderscheiden van normale dl's

Dit sluit niet helemaal aan bij wat ik bedoelde te zeggen. Ik zal het even tekenen (van boven naar beneden:
[ Titel ] < link
[ Plaatje ] < geen link, gewoon een leuk plaatje (nee zo had ik hem niet genoemd, is bad )
[ Optionele knoppen] < links naar een site of productinformatie

Voor het gemak kun je het geheel nog inpakken binnen een border.

[Verwijderd]

het hangt er een beetje vanaf waar die knoppen heen gaan en of ze iets te maken hebben met het plaatje (aan je post te lezen niet). Als je een plaatje hebt met iets wat erbij hoort (beschrijving ofzo, of bronvermelding, of een link naar een grote versie), kan je dat imho het beste oplossen met die dl constructie (die knoopt een beschrijving aan een term; het plaatje)

Als die knoppen allemaal even belangrijkk zijn en uitwisselbaar: in een ul, zijn ze gesorteerd (op alfabet, of belangrijkheid): ol (los van het feit of je er nummertjes voor wilt of niet - da's een taak voor css).

Als je knoppen niet bij het plaatje horen dan moet je ze ook niet gaan koppelen, je kan dan het plaatje zonder dd in een dl zitten (als het eenzelfde type plaatje is als plaatjes die ergens anders wel met beschrijving terugkomen) of gewoon in een div of misschien een p als ie bij tekst hoort.

Als ie echt absoluut nergens bij hoort, en het is toch content en geen deel van je layout (want dan moet ie naar de css), zet hem dan in een div (img mogen niet los in een body) en geef die div een class="functieVanHetPlaatje)" om 'm te onderscheiden van normale divs

wat ik dus uit je verhaal opmaak:

code:

<div class="product">
  <hx><a>titel</a></hx>
  <div class="bogusImage">
    <img />
  </div>
  <ul>
    <li><a /></li>
    <li><a /></li>
    <li><a /></li>
  </ul>
</div>

[DerKleinePunkt]

Verwijderd schreef op vrijdag 07 januari 2005 @ 12:41:
het hangt er een beetje vanaf waar die knoppen heen gaan en of ze iets te maken hebben met het plaatje (aan je post te lezen niet). Als je een plaatje hebt met iets wat erbij hoort (beschrijving ofzo, of bronvermelding, of een link naar een grote versie), kan je dat imho het beste oplossen met die dl constructie (die knoopt een beschrijving aan een term; het plaatje)

Als die knoppen allemaal even belangrijkk zijn en uitwisselbaar: in een ul, zijn ze gesorteerd (op alfabet, of belangrijkheid): ol (los van het feit of je er nummertjes voor wilt of niet - da's een taak voor css).

Als je knoppen niet bij het plaatje horen dan moet je ze ook niet gaan koppelen, je kan dan het plaatje zonder dd in een dl zitten (als het eenzelfde type plaatje is als plaatjes die ergens anders wel met beschrijving terugkomen) of gewoon in een div of misschien een p als ie bij tekst hoort.

Als ie echt absoluut nergens bij hoort, en het is toch content en geen deel van je layout (want dan moet ie naar de css), zet hem dan in een div (img mogen niet los in een body) en geef die div een class="functieVanHetPlaatje)" om 'm te onderscheiden van normale divs

wat ik dus uit je verhaal opmaak:

code:

<div class="product">
  <hx><a>titel</a></hx>
  <div class="bogusImage">
    <img />
  </div>
  <ul>
    <li><a /></li>
    <li><a /></li>
    <li><a /></li>
  </ul>
</div>

Het plaatje was in dit geval van een bepaald product, een illustratie. De knoppen gaven informatie weer over het betreffende product. Eigenlijk het principe wat je bij elke webshop tegenkomt .

Maar even kijken of ik je goed snap. Is het een samenhangend geheel dan samenvoegen (voor zover ik me natuurlijk aan de regels houdt) zoniet elk onderdeel individueel opstellen. Eigenlijk zeer logisch en net zoals bij programmeren. Dat ik dit niet eerder zag , bedankt.

[ Voor 26% gewijzigd door DerKleinePunkt op 07-01-2005 13:57 ]