Validatie probleem
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class="grid_8 padtop3">
<h4 class="padtop">Nieuwsberichten</h4>
<p class="padbot35">Hier komen nieuwsberichten.</p>
<p class="padbot36">
<ul class="icons">
<li><a href="https://www.facebook.com/pages/Rigging-Experts/1454326911455393"><img src="http://www.jcsl.nl/rigging/icons/facebook.jpg" alt="" /></a></li>
</ul>
</p>
</div>
<h4 class="padtop">Nieuwsberichten</h4>
<p class="padbot35">Hier komen nieuwsberichten.</p>
<p class="padbot36">
<ul class="icons">
<li><a href="https://www.facebook.com/pages/Rigging-Experts/1454326911455393"><img src="http://www.jcsl.nl/rigging/icons/facebook.jpg" alt="" /></a></li>
</ul>
</p>
</div>
De </p> geeft hierbij de volgende melding:
line 100 column 9 - Fout: No p element in scope but a p end tag seen.
[code]-tags geplaatst ipv <?php. Zou je in het vervolg alleen PHP code tussen PHP code tags willen zetten?[/modedit]
Gewijzigd op 15/01/2014 18:46:47 door Wouter J
Gewijzigd op 15/01/2014 18:55:13 door Willem vp
is div dan een goede oplossing?
Gewijzigd op 15/01/2014 18:58:20 door J C
Dat is nog fouter dan de huidige situatie.
JC, je hebt 2 oplossingen. 1tje is semantisch veel beter. Een p staat voor paragraph (alinea). Een lijst die onderdeel van een alinea is ziet er ongeveer zo uit: item een; twee; drie; en vier. Dat wil jij hier niet. Jij hebt een lijst die er zo uitziet:
- item een
- twee
- drie
- en vier
Zoals je ziet staat deze tussen 2 alinea's in: tussen 2 <p> elementen dus. Niet in een alinea. Dus:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<p>Een alinea</p>
<ul>
<li>item een</li>
<li>twee</li>
<li>drie</li>
<li>en vier</li>
</ul>
<ul>
<li>item een</li>
<li>twee</li>
<li>drie</li>
<li>en vier</li>
</ul>
Als we dan naar jouw huidige lay-out kijken lijkt die <p class="padbot36"> helemaal niet te kloppen. Dat is namelijk geen alinea, maar een blokje met een willekeurige content (lijst, plaatje, tekst, etc.). Een <div> (een block element zonder betekenis) zou dus het beste weer staan in dit geval.
En als je dat niet wilt aanpassen. Gewoon zo laten en je geen zorgen maken over die validator. Browsers supporten het en wat maakt het dan uit dat het tegen de regels is? Het is een beetje miepen over de te kleine details. Maar goed, semantiek (wat ik hierboven uitlegde) is wel goed om op orde te hebben.
Ik zou dan zoiets krijgen denk ik:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<div class="grid_8 padtop3">
<h4 class="padtop">Nieuwsberichten</h4>
<div class="padbot35">Hier komen nieuwsberichten.</div>
<div class="padbot36">
<ul class="icons">
<li><a href="https://www.facebook.com/pages/Rigging-Experts/1454326911455393"><img src="http://www.jcsl.nl/rigging/icons/facebook.jpg" alt="" /></a></li>
</ul>
</div>
</div>
<h4 class="padtop">Nieuwsberichten</h4>
<div class="padbot35">Hier komen nieuwsberichten.</div>
<div class="padbot36">
<ul class="icons">
<li><a href="https://www.facebook.com/pages/Rigging-Experts/1454326911455393"><img src="http://www.jcsl.nl/rigging/icons/facebook.jpg" alt="" /></a></li>
</ul>
</div>
</div>
Naja, je moet niet altijd de drang hebben om alles valid te krijgen. Heeft trouwens niks te maken met mobiel enzo. W3C is het team dat de regels heeft bedacht en browsers implementeren deze regels. Hoe browsers er mee omgaan is wat uitmaakt, of W3C het dan misschien niet leuk vind dat je een spatie daar hebt een een & teken daar is allemaal een beetje teveel gemiep.
>> Ik zou dan zoiets krijgen denk ik
Dat ligt aan wat je doel is en of je HTML5 gebruikt.
Zomaar iets dat me bijv. al opvalt: <div class="padbot35">Hier komen nieuwsberichten.</div>
Nieuwsberichten zijn een opsomming van berichten, een lijst dus, geen div.
Het laatste moet inderdaad later nog een lijst worden, maar ben er nog niet uit hoe ik dat ga voorgeven of indelen, dus heb er even tijdelijk een blok van gemaakt.
Wouter J op 15/01/2014 19:18:44:
W3C is het team dat de regels heeft bedacht en browsers implementeren deze regels. Hoe browsers er mee omgaan is wat uitmaakt, of W3C het dan misschien niet leuk vind dat je een spatie daar hebt een een & teken daar is allemaal een beetje teveel gemiep.
Dat is absoluut geen gemiep. Wat jij beschrijft is juist de bron van alle ellende.
Weg met alle quirks- en compatibility modes. Wat je nu ziet, is dat de ene browser zich niet aan de standaard houdt, waar vervolgens een webdesigner weer gebruik van maakt, zodat andere browsers kunstgrepen uit moeten halen om de betreffende website te kunnen tonen. Maar omdat elke browser weer een andere rendering engine heeft, zal het resultaat voor elke browser weer net iets anders zijn. En doordat iedere browser zal proberen een site die zich niet aan de standaards houdt zo goed mogelijk te tonen, worden ontwerpers ook niet geprikkeld goed werk af te leveren, waardoor het probleem alleen maar groter wordt.
Op dit moment is het gewoon onmogelijk om een site te maken die op alle browsers goed werkt, en dat schrijf ik voor het grootste deel toe aan de vergevingsgezindheid van de browsers betreffende de bagger die ze aangeleverd krijgen. Hoe was dat spreekwoord ook weer van die zachte heelmeesters die stinkende wonden maken? Het huidige wereldwijde web is een grote stinkende wond van kansloze HTML-rommel.
Het probleem is dat wanneer je nu een stricte compliancy zou afdwingen, zo'n 98% van de web"designers" gaat blaten omdat hun site niet meer werkt. Toch denk ik dat het de enige manier is om van de stank af te komen.
Gewijzigd op 15/01/2014 19:55:13 door Willem vp