login  Naam:   Wachtwoord: 
Registreer je!
 Forum

w3c valid div als link (Opgelost)

Offline GroundZero - 07/04/2012 02:22
Avatar van GroundZeroLid Beste,

ik werk met sprites. ik wil dus niet het volgende doen:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <div class="a"><img src="test.png" alt="home"></div>


als ik een button wil maken.

Echter wil ik wel een link maken van deze button, maar als ik nu doe:

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="http://site.nl" title="visit us"><div class="a"><img src="test.png" alt="home"></div></a>


dan is mijn HTML niet meer geldig, ik krijg dan de volgende foutmelding:

Line 113, Column 38: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

Kan iemand mij vertellen hoe ik dit op een correcte manier kan oplossen?

9 antwoorden

Gesponsorde links
Offline vinTage - 07/04/2012 07:46
Avatar van vinTage Nieuw lid Een onClick eraan hangen met een location.href
Offline Pieter - 07/04/2012 12:13
Avatar van Pieter Gouden medaille

SEO guru		 Je mag geen link op de div zetten. Waarom nog een div gebruiken trouwens?

Geef je a die achtergrondafbeelding, display block en fixed afmetingen en bij hover een verschuiving van de achtergrondafbeelding. Die div is voor niets nodig.

Je kan dan zelfs de buttontekst in de a zetten en met text indent die onzichtbaar maken. Beter voor SEO en semantisch veel correcter plus toegankelijker. Dus:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <a href="home" class="home">Home</a>


En als CSS:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. a.home{background: url('sprite.png') no-repeat 10px -300px;display:block; height:40px;width:100px;text-indent:-9000px;}
  2. a.home:hover{background-position: 20px -200px;}


@vinTage: javascript moet je vermijden als het kan .
Offline vinTage - 07/04/2012 12:24
Avatar van vinTage Nieuw lid
Pieter schreef:
@vinTage: javascript moet je vermijden als het kan .


Pieter, ergens snap ik je reactie wel hoor, maar welke site maakt nu geen gebruik van js ? 
Tegnwoordig zit alles vol met modernizr, jquery, htmlshiv, etc.. 
Offline Pieter - 07/04/2012 15:49
Avatar van Pieter Gouden medaille

SEO guru		 vinTage, 1 à 2 procent van de mensen heeft javascript disabled staan. Dat is superweinig en dus verwaarloosbaar. Het gaat mij er eerder om dat het niet nodig is om javascript erbij te sleuren. Het is semantisch minder correct, zoekmachines kunnen -nog steeds- te weinig overweg met js.

Als het netjes kan opgelost worden zonder js en zonder veel werk, waarom niet? 
Offline Martijn - 11/04/2012 19:54
Avatar van Martijn Crew PHP @vintage, javascript is misschien een oplossing, maar een onclick is tegenwoordig net zo giftig als een iframe eventhandlers are the way (dus in je javascript bestand afhandelen, niet in het element, eigenlijk net als css in html, of html in php dus).
Offline vinTage - 11/04/2012 20:08 (laatste wijziging 11/04/2012 20:10)
Avatar van vinTage Nieuw lid Een eventhandler('CLICK', ...) doet EXACT hetzelfde hoor, behalve dat het meer code is (en in een externe file een extra http request)

De reden dat ik trouwens niet op Pieter zn reply reageerde, is omdat ik wel weet dat het mooier is op zijn manier, en ik alleen reageerde op het 'gebruik zo min mogelijk js' versus de vraag.

Verder maakt het mij geen drol uit wat de TS ermee doet, hij laat toch nooit weten wat 'de oplossing' uiteindelijk is en er dus niet veel beginners iets aan zn topics hebben 
Offline Pieter - 12/04/2012 08:44
Avatar van Pieter Gouden medaille

SEO guru		 Lol@vinTage.

Wel, voor de beginners die het topic doorlezen: probeer het op mijn aangehaalde manier. Als dat niet lukt, kan je altijd vinTage zijn manier proberen of hier nog eens hier terug komen. 
Offline Martijn - 18/04/2012 15:04
Avatar van Martijn Crew PHP @vintage: inline-stylen van een element doet exact hetzelfde als een stylesheet, maar daar maak je ook een eigen css-je voor 
Offline vinTage - 18/04/2012 18:25
Avatar van vinTage Nieuw lid Kevin, niet voor EEN stijltje 
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.212s