vraag over Classes en ID's

Hoi,

Ik ben een beetje op 't internet aan 't struinen voor informatie over CSS.
Nu heb ik mijn site al online staan, maar ik kan maar geen duidelijke
verschillen vinden tussen “classes” en “ID’s”.

Er staat af en toe wel eens iets dat de waarden/omschrijvingen van ID’s (#main bijvoorbeeld)
doorlopen, en dat classes (.main bijvoorbeeld) dat niet zo is.
Maar kan iemand me misschien uitleggen wat nu 't beste is om te gebruiken,
en wat écht de verschillen zijn in gebruik?

Mvg,
Joram

id's zijn unieke identificaties. Vaak gebruikt in javascript en forms om een element een identificatie mee te geven. Je kan ook naar een id linken, bijvvoorbeeld: [code:1:ab920686df] <a href="pagina.html#faq"> [/code:1:ab920686df]

en dan op pagina.html:

[code:1:ab920686df]
<h2 id="faq">F.A.Q.</h2>
[/code:1:ab920686df]

Je mag een id daarom ook maar 1 keer gebruiken op een pagina.

Zie ‘id’ een klein beetje als de HTML4 opvolger van het HTML3 attribute ‘name’.

Classes zijn CSS attributen om een bepaalde opmaak toe te passen op een HTML-element. Classes mag je oneindig vaak toepassen, classes mage je ook combineren:

[code:1:ab920686df]
<p class="red greenborder">
[/code:1:ab920686df]

waar zowel ‘red’ als ‘greenborder’ aparte klassen zijn in je CSS.

Nu het vervelende aspect wat vaak voor de verwarring zorgt: browser pikken het gewoon als je een #id meer dan 1 keer toepast op een pagine en past dezelfde CSS vrolijk opnieuw toe. Verder zijn er veel serverside talen (zoals PHP) die nog steeds ‘name’ nodig hebben en niet met ‘id’ kunnen omgaan.

Oh, dus eigenlijk is de CSS van mijn [url=http://home.wanadoo.nl/joramoudenaarde/mijncss.css]site[/url] niet goed :o Maar de id's snap ik niet helemaal. Je zegt dat ze vaak gebruikt worden in Javascript en forms om een element een identificatie mee te geven. Maar als je meerdere elementen een identificatie wilt meegeven, dan moet je dat dus eigenlijk anders doen?

Maar qua mogelijkheden kun je met id’s net zoveel als met classes dus?
Dus als ik op mijn hele site de #'s vervang voor .'s, en de ID’s voor CLASSES,
dan zou 't ook exact hetzelfde moeten werken dus?

[quote="joram"] Maar als je meerdere elementen een identificatie wilt meegeven, dan moet je dat dus eigenlijk anders doen? [quote]

Voorbeeld:

[code:1:8b3be1fbab]
<form action="verwerk.php" method="post">
<label>Je naam: <input type="text" id="naam" /></label>
<label>Je e-mail: <input type="text" id="email" /></label>
</form>
[/code:1:8b3be1fbab]

[quote=“joram”]
Maar qua mogelijkheden kun je met id’s net zoveel als met classes dus?

[quote]

In je CSS wel. In je javascript e.d. heb je andere routines nodig om een element met een id of een class eruit te pikken.

[quote:a9931f8592="joram"]Oh, dus eigenlijk is de CSS van mijn [url=http://home.wanadoo.nl/joramoudenaarde/mijncss.css]site[/url] niet goed :o [/quote:a9931f8592]

Qua id’s e.d. klopt je CSS wel. Je geeft bepaalde div’s een identificatie die uniek is: #main, #menu etc. en je gebruikt ze maar 1 keer op je pagina.

Wel zie ik dat je enkele en dubbele quotes door elkaar gebruikt. Leer jezelf aan om overal dubbele quotes om te zetten.

Oh, dan heb ik 'm verkeerd begrepen denk ik :)

Als ik 'n .content heb bijvoorbeeld, kan ik die op meerder plekken in een pagina
neerzetten? Maar hoe werkt dat dan? In een class/id geef je toch de positie en
maat al aan van een DIV? Hoe kun je die dan op meerdere plekken van een pagina
laten terugkomen?

Een id is echt uniek, net als je eigen id(sofinummer) is er daarvan maar 1 op je pagina (zo zou het tenminste moeten). Een class is vaker te gebruiken op je pagina.

Wanneer je een id of een class gebruikt is idd best vaag zo nu en dan. In principe is het zo dat, mocht je een bepaalde style defenitie op meer dan 1 element in je pagina willen toepassen, je een class gebruikt. Een style defenitie hoeft niet perse een positie en grootte te bevatten dus wat je schreef:

“Maar hoe werkt dat dan? In een class/id geef je toch de positie en
maat al aan van een DIV? Hoe kun je die dan op meerdere plekken van een pagina
laten terugkomen?”

is niet per defenitie waar.

Een goede (engelse) uitleg over de CSS syntax kun je vinden op:

http://www.w3schools.com/css/css_syntax.asp

Dat is toch helder?

[code:1:fd7872d321]
<div class="content">
… tekst …
</div>

<div class="content">
…tekst…
</div>

.content {
position : absolute;
top : 20px;
left : 20px;
}
[/code:1:fd7872d321]

zorgt ervoor dat elke div met de class ‘content’ absoluut gepositioneer wordt, 20px van de top, 10 px naar links. Als je het zo in je HTML zet dan worden de <div>'s op elkaar gestapeld, dat wil je niet, dus zal je dat nooit zo doen.

Maar stel je nu eens voor dat je het volgende doet:

[code:1:fd7872d321]
<div class="frame">
<div class="content">
… tekst …
</div>
</div>

<div class="frame">
<div class="content">
… tekst …
</div>
</div>

.frame {
position : relative;
}

.content {
position : absolute;
top : 20px;
left : 20px;
}
[/code:1:fd7872d321]

Dan wordt de content ineens 20px van links en 20px van boven binnen de div met de class ‘frame’ geplaats. Je doet dit bijvoorbeeld omdat je voor iedere frame dezelfde achtergrond hebt die je steeds opniew wilt gebruiken en waarboven je een contentvlak wilt plaatsen net een eigen achtegrondkleur en een border (de vraag is overigens of je dan twee div’s nodig hebt … maar het gaat hier even om het voorbeeld)

Kortom:
Je gebruikt id’s als je een element 1 malig wil plaatsen op een pagina: een menu, een footer, een sidebar etc.

Je gebruikt classes voor elementen die herhaalt terugkomen.

't Begint te dagen denk ik... Classes gebruik je dus bijvoorbeeld om diverse tekst-vormen (cursief, bold e.d.) te kunnen combineren. Of om bij het ene plaatje 'n dotted, en het andere 'n dotted en dik kader te geven. [code:1:ff0441a618]h1 {font: arial} .naam1 { font-weight: bold} .naam2 {font-color: red}

< h1 class="naam1" >testje één< /h1 >
< h1 class="naam1" "naam2">een testje< /h1 >[/code:1:ff0441a618]
Dit zou dus een reden zijn om een class te gebruiken?

Mvg,
Joram

ja, behalve dat je een syntax fout maakt:

[code:1:f38aacd9a1]
<h1 class="naam1 naam2">een testje</h1>
[/code:1:f38aacd9a1]

Je hoeft niet altijd classes te combineren, het mag. Soms is het handiger om alles in 1 class te hebben die je dan steeds weer kan toepassen; bijvoorbeeld:

[code:1:f38aacd9a1]
.highlight {
background-color : yellow;
border-bottom : 1px solid red;
font-weight : bold;
}

<p>In de wei lopen <span class="highlight">koeien</span>, schapen en paarden. De melk van de <span class="highlight">de koe</span> wordt in Nederland het meest gebruikt voor kaas, maar ook van schapenmelk kan kaas gemaakt worden, zoals de Spaanse mancebo</p>
[/code:1:f38aacd9a1]

Ah ok :) 't was m'n eerste combo, hehe. Maar dit is dus het principe?

Even een aanvullend vraagje;
Stel dat je een site wilt maken met elk onderwerp in een apart gekleurd
vlak (dus Onderwerp1 is licht grijs, Onderwerp2 donker, Onderwerp3 weer licht).

Zou je dan dit ook in classes moeten doen? Je krijgt dan dus een nieuwe
div voor elk nieuw onderwerp, met allemaal hun eigen maat.
Ze worden allemaal schaalbaar, zodat als je de tekst zoomtin IE of Safari,
dat de contentblokken meeschalen.

Een beetje zoals: http://www.sevenzest.com/ , maar dan zouden de lichtgroene
delen waar de maincontent in staat schaalbaar moeten zijn.

Mvg,
Joram

update:
foutje… verkeerde link ingevuld :smiley: 2 dingen tegelijk doen moet je ook overlaten
aan vrouwen :wink:

Ik snap je vraag niet; kan je wat duidelijker zijn, want ik zie geen lichtgroene vlakken op de voorbeeldsite die je noemt.