[HTML][PHP] a href dupliceert zich in onderliggende elemente

[IMarks]

Probleem is opgelost, het lag hem bij de a tag binnen de a tag, te zien op regel 19


Ik ben bezig met een foto-album waar een thumbnail van de foto te zien is (op dit moment gewoon geschaald) om de volledige div zit me a href naar een lightbox (versie 2).

echter dat de a alleen om de div heen zit gaat die ook om alle elementen zitten (fysiek, de link zelf is wel gewenst) met als resultaat dat 1 foto ongeveer 6 keer terugkeert in me lightbox fotoalbum

zelf heb ik bij eerdere site's gezien dat dit wel gewoon zou moeten werken zoals ik het nu wil hebben
(één enkele a die alleen inliggende elementen een href geeft)

ook een display: block; heb ik geprobeerd (werd aangeraden bij soortgelijke problemen) maar ook dit had geen effect.

plugins/library's die draaien op mijn site zijn jQuery, lightbox 2 en GoogleAnalytics

PHP:

<?php
    $fotos = $this->fotos;
    foreach($fotos as $foto):
    ?>
        <section id="header"  style="background-image: url(<?php echo $foto->filepad; ?>); background-position: 0 400px;"></section>
    <?php
        break;
    endforeach;
?>
<section class="content">
    <section class="links">
        <?php foreach ($fotos as $foto): ?>
            <a href="<?php echo $foto->filepad; ?>" rel="lightbox[outerlink]">
                <div>
                    <article class="foto">
                        <h1><?php echo $foto->titel; ?></h1>
                        <img src="<?php echo $foto->filepad; ?>" width="244" height="115" title="<?php echo $foto->titel; ?>" alt="<?php echo $foto->titel; ?>" />
                        <footer>
                            <a href="<?php echo $foto->filepad; ?>" rel="lightbox[innerlink]" class="link">Bekijk het origineel</a>
                        </footer>
                    </article>
                </div>
            </a>
        <?php endforeach; ?>
    </section>
</section>

[Tarilo]

Ik snap niet precies wat je bedoelt met de <a> die om alle elementen heen zit. Alle elementen die je in je code tussen de <a> en </a> tags worden onderdeel van die link.

In je code heb je ook een link in je buitenste link gedefinieerd, dat gaat zowieso niet goed. Daarnaast kan een <a> tag voor zover ik weet geen block-level elementen bevatten, zoals <div>.

[NMe]

Het probleem zit dan ook niet op regel 19 maar op regel 13 inderdaad.

[Rickets]

7laurens7 schreef op dinsdag 13 november 2012 @ 11:47:
Daarnaast kan een <a> tag voor zover ik weet geen block-level elementen bevatten, zoals <div>.

Terzijde: voorheen was dat niet toegestaan, maar volgens de specificatie van HTML5 mag dat wel. Zie "Flow content" in onderstaande lijst:

quote: http://dev.w3.org/html5/s...lement.html#the-a-element

4.6.1 The a element
Categories:
Flow content.
Phrasing content.
Interactive content.
Palpable content.

Het heeft overigens altijd al gewerkt en is daarom backwards compatible. Een a-element met daarin een div kan je dus prima gebruiken.

[Tarilo]

Rickets schreef op dinsdag 13 november 2012 @ 12:04:
Het heeft overigens altijd al gewerkt en is daarom backwards compatible. Een a-element met daarin een div kan je dus prima gebruiken.

Dank, ik wist niet dat de html5 specificatie dat wel toestaat. Dat het altijd gewerkt heeft is niet echt een reden vind ik, er zijn wel meer dingen in html die altijd gewerkt hebben.