validator fout in <div> tag.

[djeric]

hallo.

ik heb op de volgende pagina: hitdance
een soort menu staan. m.b.v. een java scrip.

Dit zijn vragen met een + teken ervoor en als je erop klikt vouwt deze zich open met het antwoord.Het werkt allemaal goed. maar probleem is die validator.

zie hier de volledige fout code

als ik bij me antwoorden een <li> plaats dan komt daar ook weer een menu lijst te staan, welke niet mag.

hoe krijg ik deze fout weg: document type does not allow element "DIV" here; assuming missing "LI" start-tag ???





edit aan moderator:
"ik denk dat deze vraag beter hierin past - anders moderators graag verplaatsen dit bericht."

 

[Tha Devil]

Bijna in de juiste sectie Ik verplaats hem naar Javascript

Je kunt het als extra list-items aanmaken ipv DIV maar dan moet je via CSS die eerst laten verbergen. Dat kan via CSS3 :nth-child(even) of :nth-child(odd): http://www.w3.org/Style/Examples/007/evenodd

 

[djeric]

tja ik begrijp wat je bedoeld:

I.p.v. de div komt er dan een extra <li>…</li> met een class waarmee het list-item verborgen wordt.

maar hoe doe ik dat? (dat stukje code begrijp ik niet)

 

[Tha Devil]

Je kunt er een class aan meegeven inderdaad, dan wordt één item dus zo:

<li>Ik krijg geen geluid als ik naar de radio luisterd, wat moet ik doen?</li>
<li class="answer">U heeft waarschijnlijk het geluid op dempen staan of uw instellingen staan niet goed. Controlleer op uw pc of u normaal wel werkende geluid heeft op uw speler. Ook heeft u alle drivers en update's nodig om een goed werkende speler te krijgen.</li>

Je CSS wordt dan

.faq-list .answer { display: none; }

Vervolgens moet je dan je JS aanpassen zodat hij wat met de .answer gaat doen in plaats van een div

 

[djeric]

Vervolgens moet je dan je JS aanpassen zodat hij wat met de .answer gaat doen in plaats van een div

:shocked:en dat terwijl deze vraag in de javascript staat.

Dat stukje html/css had ik wel zoiets idd. vernomen, maar ben niet zo thuis in die java scripten.

dus ja wat aanpassen?

mijn java script nu is:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("li").click(function(){
$(this).toggleClass("active");
$(this).next("div").stop('true','true').slideToggle("slow");
});
});
</script>

 

[Tha Devil]

Meestal verwachten we ook dat mensen zelf wat proberen, alleen een vraag stellen is niet altijd voldoende

Begrijp je wat je JS op dit moment doet?
[js]
$(document).ready(function() {
$("li").click(function(){
$(this).toggleClass("active");
$(this).next("div").stop('true','true').slideToggle("slow");
});
});[/js]
De eerste regel houdt in dat dit stukje wordt uitgevoerd wanneer het document klaar is met laden.
Dan wordt het klik-event aan alle <li>-tags gekoppeld
Wanneer er wordt geklikt wordt bij het geklikte list-item de CSS-klasse "active" toegevoegd wanneer die nog niet bestond, en anders verwijderd.
Tevens wordt bij de DIV die na het geklikte item komt eerst de huidige animatie gestopt en vervolgens wordt deze uit- of ingeklapt.

Wat in dat gedrag moet je aanpassen denk je?

 

[djeric]

De eerste regel houdt in dat dit stukje wordt uitgevoerd wanneer het document klaar is met laden.
Dan wordt het klik-event aan alle <li>-tags gekoppeld
Wanneer er wordt geklikt wordt bij het geklikte list-item de CSS-klasse "active" toegevoegd wanneer die nog niet bestond, en anders verwijderd.
Tevens wordt bij de DIV die na het geklikte item komt eerst de huidige animatie gestopt en vervolgens wordt deze uit- of ingeklapt.

Wat in dat gedrag moet je aanpassen denk je?

tja denken kan ik wel, en gokken ook. maar het uitvoeren niet.
maar ik denk haast iets met die regel 4 omdat de div niet goed functioneert met me <li> tag.
dus denk ik nu:
$(this).next("div").stop('true','true').slideToggle("slow");

dat het dit moet zijn:

$(this).answer("div").stop('true','true').slideToggle("slow");

 

[Tha Devil]

Helaas gaat dat niet werken, je hebt nu de jQuery functie "next()" gewijzigd in een "answer()" maar die functie bestaat niet

Je wilt de selector wijzigen dus wordt het dit:
[js]$(this).next(".answer").stop('true','true').slideToggle("slow");[/js]

 

[djeric]

Je kunt er een class aan meegeven inderdaad, dan wordt één item dus zo:

<li>Ik krijg geen geluid als ik naar de radio luisterd, wat moet ik doen?</li>
<li class="answer">U heeft waarschijnlijk het geluid op dempen staan of uw instellingen staan niet goed. Controlleer op uw pc of u normaal wel werkende geluid heeft op uw speler. Ook heeft u alle drivers en update's nodig om een goed werkende speler te krijgen.</li>

Je CSS wordt dan

.faq-list .answer { display: none; }

Vervolgens moet je dan je JS aanpassen zodat hij wat met de .answer gaat doen in plaats van een div

als ik bij me antwoorden een <li> plaats dan komt daar ook weer een menu lijst te staan, welke niet mag.

hoe krijg ik deze fout weg: document type does not allow element "DIV" here; assuming missing "LI" start-tag ???

Ik krijg nu dus als ik dat zo met die html/css/java toevoeg toch weer een lijst van de antwoorden.
Daarom vind ik het zo moeilijk.
dus ik denk dat ik dan me css hierop moet aanpassen?
ik snap er totaal niks van.

me webpagina werkt hier wel goed.
de antwoorden staan niet in een lijst. die <li> maakt er juist een lijst van.
ik moet iets met non-list doen ofzo, maar krijg t niet uitgevist.
die <li class... moet er staan

ik heb dit bv geprobeerd:

.answer {list-style:none;}

maar geen resultaat.

 

[Tha Devil]

Het handigste lijkt mij om voor elke vraag een CSS-klasse toe te voegen, bijvoorbeeld "question".

Één item zal er dan zo uit zien:

<li class="question">Ik krijg geen geluid als ik naar de radio luisterd, wat moet ik doen?</li>
<li class="answer">U heeft waarschijnlijk het geluid op dempen staan of uw instellingen staan niet goed. Controlleer op uw pc of u normaal wel werkende geluid heeft op uw speler. Ook heeft u alle drivers en update's nodig om een goed werkende speler te krijgen.</li>

Vervolgens je huidige "ul.faq-list li" en "ul.faq-list li:before" aanpassen naar "ul.faq-list li.question" en "ul.faq-list li.question:before".

 

[djeric]

Vervolgens je huidige "ul.faq-list li" en "ul.faq-list li:before" aanpassen naar "ul.faq-list li.question" en "ul.faq-list li.question:before".

heey bedankt.

ik ben er nu uit.

heb ook deze code aangepast:

ul.faq-list li.active:before {content: "-"; padding:10px 10px 10px 0; color:red; font-weight:bold;}

naar:

ul.faq-list li.answer:before {content: "-"; padding:10px 10px 10px 0; color:red; font-weight:bold;}

dit laatste heb ik gedaan omdat ik anders een - teken krijg als ik in het antwoord aan het klikken ben. (dan lijkt het of hij een link wordt.)

 

[Tha Devil]

Moet die niet op .question toegepast worden?

ul.faq-list li.question.active:before {content: "-"; padding:10px 10px 10px 0; color:red; font-weight:bold;}

 

[djeric]

Moet die niet op .question toegepast worden?

ul.faq-list li.question.active:before {content: "-"; padding:10px 10px 10px 0; color:red; font-weight:bold;}

ik weet t zelf niet meer nu

heb het nu wel voor elkaar dat de pagina html validate en css validate is.
maar alleen 1 klein foutje. ik heb een achtergrond kleur bij het antwoord bij een mouse over effect.

zie: hier voor de rest werkt alles naar me zin goed.

Of is het nu helemaal verkeerd?

 

[djeric]

devil?

 

[Tha Devil]

Lijkt me aardig in orde qua syntax in ieder geval

Dat je die hover krijgt komt door regel 192 in hitdance.css:

ul.faq-list li:hover

Daar mist natuurlijk nu de CSS-klasse

ul.faq-list li.question:hover

 

[djeric]

hey devil.

geweldig joh :thumb: t werkt supers. :love: