XHTML website valideert niet bij w3c*

[radem205]

Hey,

Onderstaande code gebruik ik op een pagina om een menuutje te maken:

<div class="submenu_links_items_top"><a href="http://www.adigo.nl/studenten/aanmelden/1">
<ul>
<li>Aanmeldformulier</li>
</ul>
</a></div>
<div class="submenu_links_items_top"><a href="http://www.adigo.nl/studenten/aanmelden/2">
<ul>
<li>Bedrijfsgegevens</li>
</ul>
</a></div>

Wanneer ik de pagina waar deze code instaat valideer geeft ie als enige fout dat de <a href ... niet op deze positie mag staan (dus niet na een div en voor een <ul>). Dit kan ik wel begrijpen maar wanneer ik de <a href... tussen de <li> en de </li> tags zet dan wordt alleen het li gedeelte een link en niet de totale div er om heen.

Weet iemand hoe ik dit kan oplossen zodat ie de validatie wel door komt?

Alvast bedankt.

[André]

Ik zien niet in waarom je een link om de lijst heen wil hebben? Je kunt de link ook gewoon in de li plaatsen en er dan een display: block op gooien.

[2]

Je <a> mag wel in je <div> staan, maar je <ul> niet in je <a>, dat is het meer.

Maar waarom wil je het eigenlijk in een lijst hebben? Om een bullet ervoor te krijgen? Dna kun je misschien beter met een achtergrond plaatje werken:

code:

<a
   href="inloggen.html"
   style="
          padding: 0 0 0 10px;
          background: url(../images/bullet.gif) no-repeat;
">Aanmelden</a>

[RM-rf]

Waar om in godsnaam 4 tags (DIV, A, UL en LI ) gebruiken voor wat eigenlijk maar één element hoeft te zijn namelijk een menu-linkje?

een logische, veel overzichtelijker code zou volgens mij zijn:

code:

<ul>
   <li> <a href="/studenten/aanmelden/1">Aanmeldformulier</a> </li>
    <li> <a href="/studenten/aanmelden/2"> Bedrijfsgegevens </a> </li>
</ul>

de visuele presentatie moet je dan laten doen door CSS en niet door je HTML structuur

[moozzuzz]

Meer zelfs, zo ver ik me herinner mag je in een <a>-tag geen <ul> hebben, maar daarvoor check je best de specs op w3c. Geeft de validator geen hint wat er fout ging? Dat kan wel es helpen als je hier in toekomst geholpen wilt worden

http://www.w3.org/TR/html401/struct/links.html (hoopte dat het er zeker zou instaan, maar dat lijkt toch niet zo duidelijk gesteld.

Deze zegt het duidelijker:
http://www.handleidinghtml.nl/html/elementen/ul.html

[ Voor 0% gewijzigd door moozzuzz op 07-11-2006 13:36 . Reden: oei te laat, middagpausze te lang... ]

[radem205]

Ik wil dus hetzelfde krijgen als op onderstaande website (waar ik dus nu mee bezig ben):

http://www.adigo.nl/studenten/overadigo (zie het menu aan de linkerkant).

Hoe kan ik dit dan maken met alleen <ul> en <li>, want ik krijg die achtergrond, wanneer men met de muis over een link gaat, er niet goed achter?

[erwin85]

radem205 schreef op dinsdag 07 november 2006 @ 15:15:
Ik wil dus hetzelfde krijgen als op onderstaande website (waar ik dus nu mee bezig ben):

http://www.adigo.nl/studenten/overadigo (zie het menu aan de linkerkant).

Hoe kan ik dit dan maken met alleen <ul> en <li>, want ik krijg die achtergrond, wanneer men met de muis over een link gaat, er niet goed achter?

display: block in je CSS

[Rowanov]

Neem de code die RM-rf je geeft en geef het a element dit:

Cascading Stylesheet:

a {
  display: block;
  width: 150px; /* je eigen waarde invullen */
  height: 30px; /* idem */
}

Vervolgens kan je met een :hover op de a, de achtergrondkleur aanpassen.

[radem205]

Rowanov schreef op dinsdag 07 november 2006 @ 15:19:
Neem de code die RM-rf je geeft en geef het a element dit:

Cascading Stylesheet:

a {
  display: block;
  width: 150px; /* je eigen waarde invullen */
  height: 30px; /* idem */
}

Vervolgens kan je met een :hover op de a, de achtergrondkleur aanpassen.

Moet ik dan de <ul> ook een display: block meegeven?

[erwin85]

radem205 schreef op dinsdag 07 november 2006 @ 15:23:
[...]


Moet ik dan de <ul> ook een display: block meegeven?

Nee, alleen de a

[Rowanov]

Een lijst is al een blocklevel element, dus die hoef je niet nog eens te vertellen dat hij een blok moet zijn. Deze pagina en de rest van de referentie kan je in het vervolg misschien nuttig gebruiken om zulk soort dingen op te zoeken

[shnazzle]

radem205 schreef op dinsdag 07 november 2006 @ 15:23:
Vervolgens kan je met een :hover op de a, de achtergrondkleur aanpassen.

Zou ik niet doen, heeft wat compatibility issues.
gewoon op onmouseovers en zo houden...tenzij je :hover tot de a houdt

[ Voor 27% gewijzigd door shnazzle op 07-11-2006 15:48 ]

[erwin85]

shnazzle schreef op dinsdag 07 november 2006 @ 15:41:
[...]


Zou ik niet doen, heeft wat compatibility issues.
gewoon op onmouseovers en zo houden

Ik heb er zelf nooit problemen mee gehad, met a:hover

Neem b.v. deze website die ik heb gemaakt : liever geen spam

[ Voor 6% gewijzigd door BtM909 op 08-11-2006 15:20 ]

[Rowanov]

Ahum; de :hover werkt in IE6, IE7, Firefox en Opera op het a element en dat is exact wat radem205 beschrijft. Ik zie je probleem niet en onmouseover is in dit geval een slecht advies; je gaat geen javascript gebruiken als je iets simpel met css op kan lossen.

[moozzuzz]

Rowanov schreef op dinsdag 07 november 2006 @ 15:51:
Ahum; de :hover werkt in IE6, IE7, Firefox en Opera op het a element en dat is exact wat radem205 beschrijft. Ik zie je probleem niet en onmouseover is in dit geval een slecht advies; je gaat geen javascript gebruiken als je iets simpel met css op kan lossen.

Ik vermoed dat ie dat bedoelde maar misschien slecht verwoordde. Voor de TS is het gewoon belangrijk te weten: enkel hoveren op A, want andere elementen worden niet overal op dezelfde/juiste manier in de verschillende browsers ondersteund. Door je A als block te definiëren, lijkt het voor de gebruiker of je hele LI reageert op de hover. Je kan bij problemen ook even spelen met padding en margin van de betrokken elementen om het achtergrondfiguurtje net op de manier die jij wilt, te laten aanpassen. (mijn excuses als de zin wat chaotisch overkomt ;^)

[Rowanov]

Als hij dat bedoelt, begrijp ik niet waarom hij dat stuk quote waar het aangeraden word, om het af te raden en vervolgens aan te raden alleen bij a toe te passen terwijl dat er oorspronkelijk al stond (Het wordt idd een chaos )

[radem205]

http://www.adigo.nl/studenten/aanmelden2.php

Nu heb ik dus alleen de <ul> en <li> gebruikt om het menu weer te geven, maar hoe kan ik er nu voor zorgen dat die square (list-style-type) ook binnen het kader komt, dus net voor de tekst in het menu?

[André]

Spelen met de paddings en margins op de ul en li? Heb je uberhaupt al wat geprobeerd?

[radem205]

Ik heb echt al heel veel geprobeerd. Maar als ik met padding en margin speel op de ul en li dan komt ie wel binnen het kader, maar dan vershuift de hover ook mee.

[moozzuzz]

Dat kan (volgens mijn kennis) enkel met de truc van 2, in dit topic. Misschien dat negatieve margin/padding-combo's ook werken (dat zou ik in elk geval proberen als je niet met de tip van 2 verder wilt).

[MBV]

je kan zeggen dat die list-style-position proberen of je wat kan bereiken. Ik zie die hele square trouwens niet in firefox/ubuntu, misschien idd omdat hij eruit valt.

[erwin85]

Mag ik vragen waarom je voor elk menu item een apparte id hebt aangemaakt?
Ze doen toch allemala het zelfde? Kan je dan niet beter 1 id of class aanmaken ervoor? Dus li#menu_items of zo.

Scheelt weer wat CSS code

Ow sorry. Zie dat je voor elk menu item een afbeelding gebruikt. Kan je niet beter 1 achtergrond afbeelding gebruiken voor elk menu item, en dat je dan er gewoon tekst overheen zet. Is ook beter denk ik.

[ Voor 32% gewijzigd door erwin85 op 08-11-2006 14:44 ]

[moozzuzz]

Ik meen me te herinneren dat de bullet x pixel van de rechterkant van de linkerpadding valt bij browser A en y pixel van de linkerkant van de linkerpadding bij browser B (=dus van de rechterkant van de margin). Het kan dus zijn dat je bullets buiten de viewport vallen. Kan iemand dit nog es bevestigen?

[shnazzle]

Rowanov schreef op dinsdag 07 november 2006 @ 15:51:
Ahum; de :hover werkt in IE6, IE7, Firefox en Opera op het a element en dat is exact wat radem205 beschrijft. Ik zie je probleem niet en onmouseover is in dit geval een slecht advies; je gaat geen javascript gebruiken als je iets simpel met css op kan lossen.

Late reactie... better late than never.
Ik heb het een keer geprobeerd en het is me niet gelukt om in IE6, IE7 en FF met een hover over een NIET-A element te werken. Heb het ook wel opgezocht maar kreeg het niet werkend. Als ik tijd heb zal ik de website van erwin85 bekijken om te zien hoe je het doet. Dus...thanx erwin

Was gewoon mijn ervaring dat het alleen goed met A werkt.

No harm meant

[radem205]

shnazzle schreef op woensdag 08 november 2006 @ 14:34:
[...]


Late reactie... better late than never.
Ik heb het een keer geprobeerd en het is me niet gelukt om in IE6, IE7 en FF met een hover over een NIET-A element te werken. Heb het ook wel opgezocht maar kreeg het niet werkend. Als ik tijd heb zal ik jouw site bekijken om te zien hoe je het doet. Dus...thanx

Was gewoon mijn ervaring dat het alleen goed met A werkt.

No harm meant

Dit heb ik dus ook gemerkt. Ik heb dus wel degelijk veel manieren uitgeprobeerd, maar omdat het A element binnen de <li> staat zal er nooit een hover kunnen komen over de bullet (deze zit immers buiten het <li> element.

Edit: Ik heb het opgelost door de tip in post 2 van dit topic (d.m.v. een bullet image). Bedankt voor jullie reacties en excuses wanneer ik wat onduidelijk was in mijn vraagstelling!

[ Voor 11% gewijzigd door radem205 op 08-11-2006 14:57 ]

[Rowanov]

shnazzle schreef op woensdag 08 november 2006 @ 14:34:
Late reactie... better late than never.
Ik heb het een keer geprobeerd en het is me niet gelukt om in IE6, IE7 en FF met een hover over een NIET-A element te werken. Heb het ook wel opgezocht maar kreeg het niet werkend. Als ik tijd heb zal ik de website van erwin85 bekijken om te zien hoe je het doet. Dus...thanx erwin

Was gewoon mijn ervaring dat het alleen goed met A werkt.

No harm meant

Lees wat ik typ; ik beperk het tot het a element en leg uit waarom jouw reactie niet klopte. Je gaf aan dat je dit standaard beter met een onmouseover kon regelen en dit is onjuist. Bij een a werkt de :hover perfect en aangezien je met css alles als een blok kan stijlen en het in dit geval semantisch ook nog eens perfect is zie ik geen reden voor onmouseover. Daarnaast is er naast onmouseover een nog elegantere oplossing en dat is de hover.htc van Clay.

Edit: Ik zie dat je je bericht later hebt aangepast, dit zal tot de verwarring hebben geleid

[ Voor 4% gewijzigd door Rowanov op 08-11-2006 16:37 ]

[shnazzle]

Rowanov schreef op woensdag 08 november 2006 @ 16:36:
[...]

Edit: Ik zie dat je je bericht later hebt aangepast, dit zal tot de verwarring hebben geleid

Idd
Het als je :hover kunt gebruiken voor A, vooral doen! duh... Maar ik geef toe dat ik het een beetje vaag en suggestief heb opgeschreven in mijn eerste post.
Maar, wanneer denkt men :hover toe te passen aan alle andere elementen? Want soms is het handig voor andere toepassingen

[Rowanov]

Met die hover.htc kan je alles laten hoveren, dus opzich kan het al wel. Ik raad je ook zeker aan dat gebruiken als je browseronafhankelijk wilt werken. De nieuwste browsers supporten :hover op een aantal andere elementen, die ik niet uit mijn hoofd weet. Dit wordt vooral gelimiteerd door IE7, die een brakke ondersteuning of ontbrekende ondersteuning voor :hover heeft op bepaalde elementen.