[DIV] Hoe precies gebruiken?

[Kwartjuh]

Hallo mensen.

Ik heb tot voor een jaar sombeetje nooit iets met webdesign gedaan. Tot ik bij een stagebedrijf van alles leerder over het ontwerpen en maken van websites.

Ik leerde daar voornamelijk met frames en tables een opbouw maken, ondersteunt door CSS.
Dit werkt allemaal prima, hoewel de die-hard webdesigners het mischien te vies voor woorden vind.
Uiteindelijk is een tabel daar niet voor bedoelt

Ik heb me de laatste tijd verdiept in het gebruik van Divs. Maar ik snap niet precies hoe deze gebruikt worden. Ik wil voor mijn broer een leuke site maken met een schaduw aan de randen van de site.
Ik heb begrepen van [link=http://alistapart.com/articles/customcorners]deze link[/link] begrepen dat dit inderdaad met Div's kan.
Ik heb op die site gezocht naar een simepele uitleg van het gebruik van Div's maar die kon ik er niet vinden. Ook w3schools.com leverde niet echt bruikbare info te vinden.

Kan iemand mij vertellen (of een link geven) hoe Div's toe te passen zijn in je site. Ik begrijp dat een div samen werkt met je css?

iig bedankt.

[Tim_R]

Je maakt in je stylesheet gewoon een class 'naam' aan ( dus "div.naam { insert CSS-code }" ), en wijst deze toe aan een <div class="naam">.

De betreffende CSS is dan alleen van toepassing op die <div>.

[ Voor 51% gewijzigd door Tim_R op 16-11-2005 20:48 ]

[Borizz]

Een DIV element is net zoals een table of een frame een bouwsteen van HTML. Met CSS kan je ieder html element opmaken dus ook een div element. Div elementen worden vaak gebruikt om een webpagina in bepaalde stukken in te delen (denk aan een header, navigatie, content en footer). Vandaar ook de naam Div (van Divisions).
Door deze div elementen goed te positioneren met behulp van CSS kan je je site net zo indelen als dat je dat nu doet met tabellen / frames.

[Kwartjuh]

Dus in zekere zin is een Div een soort Frame, alleen dan meer dynamisch?

[r0b]

Kwartjuh schreef op woensdag 16 november 2005 @ 20:50:
Dus in zekere zin is een Div een soort Frame, alleen dan meer dynamisch?

Frame .. mwa, eerder een bouwsteen.
Stel, je hebt een site met een header, menu er onder, content daar onder, en footer daar weer onder.
Dan is de meest gebruikte manier om vier div's aan te maken, namelijk voor elk 'deel' van de site 1, en deze met behulp van CSS te positioneren en stylen.
Iets wat je hiervoor misschien wel met tables hebt gedaan.

[ Voor 5% gewijzigd door r0b op 16-11-2005 20:57 ]

[Borizz]

Kwartjuh schreef op woensdag 16 november 2005 @ 20:50:
Dus in zekere zin is een Div een soort Frame, alleen dan meer dynamisch?

Ja en nee , een div is een soort van container waar je andere HTML elementen in plaatst. Bij een frame wordt hiervoor een nieuwe pagina ingeladen. Een div sectie laad geen nieuwe pagina maar bevat gewoon andere html elementen in dezelfde file.

Zoek anders maareens op google naar div en html css dan vind je genoeg resultaten waar je iets aan hebt. Bijvoorbeeld deze.

[Anoniem: 26306]

Kwartjuh schreef op woensdag 16 november 2005 @ 20:50:
Dus in zekere zin is een Div een soort Frame, alleen dan meer dynamisch?

Nee, een div is helemaal niks. Alleen een block-level element. Net als alle andere HTML elementen heeft een div een functie, en dat is andere elementen groeperen. Een div wordt normaal gesproken gebruikt om stukken van een site te bevatten, zoals Borizz al aangaf bijvoorbeeld waar de content komt, waar de navigatie komt. Niet op je scherm, maar in je document. Met HTML geef je niet aan hoe iets er uit moet zien. Je geeft alleen aan wat het is.

En elke browser zal vervolgens proberen het document op een begrijpelijke manier aan een gebruiker te presenteren. En daarbij gebruikt hij standaard een ingebouwde stylesheet, maar jet je eigen stylesheet kun je dat weer veranderen, zodat de weergave meer aan jouw wensen voldoet.

De oude manier van websites maken was: het ziet er toch goed uit?

Die oude manier is vaak lastig als je iets moet gaan onderhouden. Er stond in een HTML document vanalles door elkaar heen om iets op de juiste positie te krijgen. Die tabellen maakten de code er niet duidelijker op.

Frames zijn weer iets anders. Die kun je gebruiken voor bijvoorbeeld een webapplicatie. Voor een standaard website zeker niet meer.

Tabellen gebruik je voor gegevens als een tabel met productspecificaties van verschillende producten, of om een lijst van bijvoorbeeld nieuwsberichten, data en auteurs (van de nieuwsberichten) te maken.

Eigenlijk geldt gewoon: gebruik HTML zoals het bedoeld is. Die afspraken zijn er niet voor niets, en een browser en zoekmachine mogen ook best een beetje weten wat voor gegevens ze ongeveer weergeven.

[ Voor 6% gewijzigd door Anoniem: 26306 op 16-11-2005 21:04 ]

[Anoniem: 9542]

wordt weer een hoop gebrabbeld hier

div heeft 2 functies
1) content clusteren in hoofdstukken en subhoofdstukken (paragraven)
2) een container om je elementen te clusteren (dat doet 1) ook al, maar soms heb je ze extra nodig gewoon) (zeg maar de block variant van <span>)

een uitgebreid verhaal:
http://www.rikkertkoppes.com/thoughts/about-div

en w3c (op een maffe plek ja): http://www.w3.org/TR/html401/struct/global.html#h-7.5.5

Borizz schreef op woensdag 16 november 2005 @ 20:59:
[...]
Zoek anders maareens op google naar div en html css dan vind je genoeg resultaten waar je iets aan hebt. Bijvoorbeeld deze.

Dat is dus echt een slechte link, alle elementen kan je namen geven en align=center is zo deprecated als wat, ik zou dat artikel maar overslaan

[ Voor 53% gewijzigd door Anoniem: 9542 op 16-11-2005 21:25 ]

[Kwartjuh]

Boriz: die link had ik ook al gevonden. In principe wel interressant... maar net niet zeg maar.
Ik zoek een beetje een tutorial-achtig iets met een voorbeeld ofsow.

Iig wel heel erg bedankt voor de reacties, want het is me iig wel wat duidelijker geworden.

[Kwartjuh]

mophor: erg interressant, die ga ik even doorlezen...

_{er zal niet toevallig een tweakertje zijn die tijd te veel heeft en een simpel voorbeeld kan laten zien van het toepassen van div?}

[Anoniem: 9542]

voorbeeldjes zat, een uitgebreide:

code:

<map>
  <h1>Navigation</h1>
  <ul />
</map>
<div>
  <h1>All about my dog<h1>
  <p /><ul /><table /><!-- etc -->
  <div>
    <h2>Subchapter</h2>
    <p />
  </div>
</div>
<form>
  <h1>React</h1>
  <p>something on the use of this form</p>
  <fieldset>
    <legend />
    <h2>Subset</h2>
    <p><label /><input /></p>
  </fieldset>
</form>

zoals je ziet omringt <div> hoofdstukken en subhoofdstukken, het is dus een clustercontainer (wat een woord) voor "gewone" tekst. Voor navigatie heb je daar <map> voor form controls heb je daar <fieldset>. Binnen deze elementen (die ik vaak structure level elementen noem) heb je je block level elementen (p, ul, ol, table, h1..h6, address, dl etc) en daarbinnen weer je inline elementen (a, strong, em etc)

[Anoniem: 77658]

beetje een raar onduidelijk voorbeeld, map gebruik je niet voor navigatie:
Map - Defines an image map ?

[Anoniem: 9542]

even verder lezen dan je neus lang is
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.

[ Voor 66% gewijzigd door Anoniem: 9542 op 17-11-2005 09:32 ]

[Anoniem: 77658]

weer wat geleerd