Archief - xHTML: xhtml valid, maar geeft het niet juist weer

Ik ben dus aan mijn eerste site in xhtml en css begonnen. Eens je de basis wat begrijpt, is het wel aangenaam om in te werken (maar ik ken uiteraard alleen nog maar de basis)

Anyway, het probleem:
Afgelopen weekend heb ik de eerste pagina die ik gemaakt heb eens gecheckt of die xhtml-valid was. Na enige aanpassingen, kreeg ik de melding dat alles in orde was, dus ik uiteraard gelukkig.
Maar doordat ik die wijzigingen heb gedaan, klopt er iets niet meer juist.
Ik heb de 2 versies ge-upload zodat het duidelijk zichtbaar is:
Versie voor check: http://users.pandora.be/XA4/notvalid
Versie na check: http://users.pandora.be/XA4/valid
(geen reacties op de hoofding please, die moet ik nog onder handen nemen...)

De onderdelen in het menu (menu, producten, contacteer, info en home) staan in de versie na de check niet meer op hun plaats. Allé, menu wel, maar de rest niet.

Wat is er nu gewijzigd zodat het volledig xhtml valid werd?
(wat uiteraard te maken heeft met die items)
Zoals je kan zien, had ik elk van die items apart benoemd tot die class, terwijl dat dus volgens de check overbodig was (wat eigenlijk wel waar is, aangezien je dat openzet voor het eerste item en na het laatste item gewoon weer sluit)

Vraag:
Hoe kan ik dat nu oplossen zodat hij het goed weergeeft en toch xhtml-valid is?

bij de notvalid:
een id gebruik je 1 maal en jij had het verschillende keren gebruikt (wat wel kan met een class)

bij de valid:
producten, info enz. zitten in je ul met id=menu. In de css file laat je ul#menu een margin-left van 15px hebben dus dan is het logisch dat deze ook mee verplaatst worden.

Oplossing:
Ruim eerst je xhtml op:
<p class="menu_h1">Producten</p>
</li>

Je laat deze p's behoren tot de laatste li, sluit die er voor:
</li><p class="menu_h1">Producten</p>

Nu in css:
ul#menu {
list-style: none;
padding: 0;
margin-left: 15px;
width: 165px;
}
Verwijder de margin-left en zet hem bij de li's zodat je de p er niet mee beïnvloedt. Zoals:

ul#menu li {
margin-top: none;
margin-left: 15px;
list-style-type: none
}

Je hebt nu 1 groot menu dat ook p tags bevat (valideert het?), je kan ook een ul voor elk onderdeel maar geef deze dan niet dezelfde id maar een class.
Verwijder al die overbodige class atributen zoals bij de links in je menu.
ul#menu li a
je hebt ze zo aangesproken in css en toch hebben ze allemaal de class=menu

En euhm, goede/valid code betekent natuurlijk niet dat het er uitziet zoals je wil.

zal ik vanavond eens bekijken, bedankt alvast.

Ik heb alles opgevolgd, maar het is toch nog niet in orde.
Die laatste wijziging (overbodige class-attributen) dat was inderdaad wel waar. Ik leer weer bij (is eigenlijk continu als je er veel mee bezig bent)

Die </li> voor die 5 subtitels (menu, producten, etc) zetten, heeft dus blijkbaar niet het juiste effect, al vond ik het eigenlijk wel logisch dat het zo had gekund. En wordt trouwens ook niet echt goedgekeurd door de xhtml validator...

De update staat trouwens op http://users.pandora.be/XA4/update

Dus best gewoon de notvalid-versie nemen (met het verwijderen van de overbodige class-attributen dan) of is er toch een mogelijkheid om die subtitels gelijk te krijgen met de eerste "menu"?


Edit: in Firefox geeft hij het wel goed weer... Nu IE nog, hé.
Maar ja, is op deze manier ook niet xhtml-valid. Dus kan ik, zoal ik zei, evengoed teruggrijpen naar de valid-versie.
Ben ik nu eigenlijk te veel bezig met dit xhtml-valid te krijgen of is het eigenlijk de bedoeling om het valid te hebben?

een <p> zet je niet in een <li>

gebruik niet "&" maar "&ndash"
dat wordt dan in iedere taal en browser herkent als het "&" teken

SMa zei:

een <p> zet je niet in een <li>

Klik om te vergroten...

hoe kan ik dan wel zo'n subtitels krijgen tussen mijn menu-knoppen?

SMa zei:

gebruik niet "&" maar "&ndash"
dat wordt dan in iedere taal en browser herkent als het "&" teken

Klik om te vergroten...

ik ben sowieso niet voor het gebruik van &, maar soms willen mensen het eenmaal zo. Bedankt in ieder geval, ik pas het aan.

XA4_ zei:

hoe kan ik dan wel zo'n subtitels krijgen tussen mijn menu-knoppen?

Klik om te vergroten...

neem dan een defenition list
<dd><dt><dl>

SMa zei:

gebruik niet "&" maar "&ndash"
dat wordt dan in iedere taal en browser herkent als het "&" teken

Klik om te vergroten...

Je bedoelt "&amp;" neem ik aan? "&ndash;" is gewoon een koppelteken...

Foute opmerking, sorry.

EDIT:
<p class="menu_h1">Menu</p>
<ul class="menu">
<li><a href="hetbelangvan.htm">Het belang van...</a></li>
</ul>
<p class="menu_h1">Producten</p>
<ul class="menu">
<li><a href="antiveroudering.htm">Anti-veroudering</a>
</li><li><a href="afslanking.htm">Afslanking</a>
</li><li><a href="beenderenengewrichten.htm">Beenderen &amp; gewrichten</a>
</li><li><a href="cholesterol.htm">Cholesterol</a>
</li><li><a href="hartenbloedvaten.htm">Hart en bloedvaten</a>
</li><li><a href="haarenhuidverzorging.htm">Haar- en huidverzorging</a>
</li><li><a href="ontharingsproducten.htm">Ontharingsproducten</a>
</li><li><a href="immuunsysteem.htm">Immuunsysteem</a>
</li><li><a href="maagenspijsvertering.htm">Maag en spijsvertering</a>
</li><li><a href="natuurlijkeantibiotica.htm">Natuurlijke antibiotica</a>
</li><li><a href="vitaminenenmineralen.htm">Vitaminen/Mineralen</a>
</li><li><a href="antioxidanten.htm">Anti-oxidanten</a>
</li><li><a href="stress.htm">Stress</a>
</li><li><a href="vrouwen.htm">Voor vrouwen</a>
</li><li><a href="heren.htm">Voor heren</a>
</li><li><a href="zonnelijn.htm">Zonnelijn</a>
</li><li><a href="zoutlampen.htm">Himalaya zoutlampen</a>
</li></ul>
ENZ...
Maak dus onder elke <p></p> een nieuwe ul met CLASS menu

Dan je css aanpassen:
ul.menu {
ul.menu li {
ENZ...

Omdat je nu geen id gebruikt, alle hekjes door een . veranderen bij menu

Ik had gister alleen in ff getest sorry, maar zoals ik ook opmerkte, je mag geen p in ul. Hopelijk lukt het nu, misschien kijk ik ergens over. Post maar wat er gebeurt.

Fr3aK zei:

Je bedoelt "&amp;" neem ik aan? "&ndash;" is gewoon een koppelteken...

Klik om te vergroten...

idd
ben hier al heel de tijd bezig met die &ndash;
site staat er vol van, om zot van te worden

LATO zei:

<p class="menu_h1">Menu</p>
<ul class="menu">
<li><a href="hetbelangvan.htm">Het belang van...</a></li>
</ul>
<p class="menu_h1">Producten</p>
<ul class="menu">
<li><a href="antiveroudering.htm">Anti-veroudering</a>
...
</li></ul>
ENZ...
Maak dus onder elke <p></p> een nieuwe ul met CLASS menu

Klik om te vergroten...

zo had ik het dus in mijn allereerste versie (de not-valid: http://users.pandora.be/XA4/notvalid) Maar dat geraakte dus niet door de validator.
In ieder geval, ik ga het toch op die manier doen. Ik kreeg toen in FF en IE het resultaat zoals het moest zijn, dus dat moet dan maar goed genoeg zijn

Oei, bijna vergeten: bedankt!

nee je gebruikte toen ID's op verschillende plaatsen, je moet er class van maken en de css aanpassen zoals ik zei. Zoek het verschil tussen een ID en class maar op.

LATO zei:

nee je gebruikte toen ID's op verschillende plaatsen, je moet er class van maken en de css aanpassen zoals ik zei. Zoek het verschil tussen een ID en class maar op.

Klik om te vergroten...

ow ja, nu zie ik het...
Ik zal inderdaad best eerst eens opzoeken wat het verschil juist is en wanneer je wat gebruikt zodat ik ook daadwerkelijk weet waarom dat daar zo moet zijn.