[CSS] Meerdere divs met dezelfde id*

[Verwijderd]

Zoals elke design purist haal ik graag mijn webdesign werk door de validator van het w3c. Nu voldoet de pagina waar mijn vraag over gaat in zijn geheel aan de HTML 4.01 strict norm behalve op een zestal errors na.

Het is binnen de doctype HTML 4.01 strict niet mogelijk om div id's vaker te gebruiken dan 1 keer. Nu is dit geen probleem als je gewoon voor elke div een aparte id in de CSS maakt.

Echter dit is de manier waarop de div's tot leven komen:

code:

<h1>Nieuws</h1>

<?

$query = mysql_query('SELECT * FROM `index` ORDER BY id DESC LIMIT 3 ');
while($index = mysql_fetch_object($query)){
echo ("

<div id=\"nieuws\">

<div id=\"nieuwshead\">

<img src=\"img/subindex.gif\" alt=\"hokje\">
<span class=\"datum\">$index->datum</span>
<span class=\"titel\">$index->titel</span>

</div>

<div id=\"nieuwsbody\">

<p>$index->bericht</p>

</div>

</div>

");} ?>

Door deze code krijg je drie keer drie divs die allemaal hetzelfde heten. Het zorgt voor geen problemen binnen de browsers maar omdat je maar 1 keer een id mag aanroepen krijg je errors bij het validaten.

De vraag: hoe kan ik in deze situatie zorgen dat de id's steeds een oplopend cijfer achter hun originele naam krijgen? Dus "nieuwsbody1", "nieuwsbody2", "nieuwsbody3" ipv 3x "nieuwsbody".

[crisp]

Waarom hebben die elementen een ID nodig?
Als het voor styling is dan zou je denk ik beter een class kunnen gebruiken als deze elementen meerdere keren voor kunnen komen

En waarom gebruik je geen Hx element voor je titel?

[ Voor 13% gewijzigd door crisp op 23-11-2006 11:38 ]

[Verwijderd]

crisp schreef op donderdag 23 november 2006 @ 11:37:
Waarom hebben die elementen een ID nodig?
Als het voor styling is dan zou je denk ik beter een class kunnen gebruiken als deze elementen meerdere keren voor kunnen komen

This Page Is Valid HTML 4.01 Strict!

Ik heb nooit classes op die manier gebruikt. Bedankt voor de tip.

En waarom gebruik je geen Hx element voor je titel?

Ik heb ze toegepast alleen .nieuwshead ziet er zo uit:

code:

.nieuwshead {
    height: 15px;
    margin-bottom: 5px;
}

Het is een 500px horizontaal balkje waarin de datum én de titel in staan. Hx's geven een automatische <br> die ik in dit geval dus niet wil. Hoe tackel je dat?

[Tanuki]

Verwijderd schreef op donderdag 23 november 2006 @ 11:50:
[...]


[...]


Ik heb nooit classes op die manier gebruikt. Bedankt voor de tip.


[...]


Ik heb ze toegepast alleen .nieuwshead ziet er zo uit:

code:

.nieuwshead {
    height: 15px;
    margin-bottom: 5px;
}

Het is een 500px horizontaal balkje waarin de datum én de titel in staan. Hx's geven een automatische <br> die ik in dit geval dus niet wil. Hoe tackel je dat?

Door de display op inline te zetten. En misschien moet je ook nog iets aan de margin/padding doen.

[Verwijderd]

Ah, merci. margin/padding van de h3 en h4 had ik al gefixed.

[CH4OS]

l0c4lh0st schreef op donderdag 23 november 2006 @ 11:53:
Door de display op inline te zetten. En misschien moet je ook nog iets aan de margin/padding doen.

Ik zet dan altijd de bottom-margin op 0px, display: inline; heeft hier volgens mij niets mee te maken... Mocht dat wel zo zijn, dan verneem ik dat graag: heb ik weer een leermoment

[ Voor 11% gewijzigd door CH4OS op 23-11-2006 16:56 ]

[BtM909]

Het is idd geen break maar een margin-bottom wat je op een heading hebt... Net zoals Word het bijvoorbeeld ook doet

[Verwijderd]

GJ-tje schreef op donderdag 23 november 2006 @ 16:29:
[...]
Ik zet dan altijd de bottom-margin op 0px, display: inline; heeft hier volgens mij niets mee te maken... Mocht dat wel zo zijn, dan verneem ik dat graag: heb ik weer een leermoment

Ik krijg de tekst horizontaal door display op inline te zetten. Op het moment dat ik dat weghaal gaat het zooitje weer onder elkaar staan. Leermomenten alom.

[Verwijderd]

BtM909 schreef op donderdag 23 november 2006 @ 16:46:
Het is idd geen break maar een margin-bottom wat je op een heading hebt... Net zoals Word het bijvoorbeeld ook doet

Het is geen break, maar de Hx is wel een block level element, dus neemt het de beschikbare ruimte in, dus verschijnt het volgende element eronder. Dat zal ongetwijfeld zijn waarom de TS het op een break vindt lijken

[BtM909]

Verwijderd schreef op donderdag 23 november 2006 @ 20:37:
[...]

Het is geen break, maar de Hx is wel een block level element, dus neemt het de beschikbare ruimte in, dus verschijnt het volgende element eronder. Dat zal ongetwijfeld zijn waarom de TS het op een break vindt lijken

Ach so, ik ging daar al even vanuit (headers zijn block elementen ) en dacht aan de extra space onder het element (hence the extra break / enter)...

[Tranq]

Mocht je om andere redenen id's willen gebruiken op elementen kan je natuurlijk altijd het id van het nieuwsbericht hiervoor gebruiken:

code:

$query = mysql_query('SELECT * FROM `index` ORDER BY id DESC LIMIT 3 ');
while ($index = mysql_fetch_object($query))
{
   ?>
   <div id="nieuws_<?= $index->id ?>">
      <div id="nieuwshead_<?= $index->id ?>">
         <img src="img/subindex.gif" alt="hokje" />
         <span class="datum"><?= $index->datum?></span>
         <span class="titel"><?= $index->titel ?></span>
      </div>
      <div id="nieuwsbody_<?= $index->id ?>">
         <p>$index->bericht</p>
      </div>
   </div>
   <?
}