WordPress.org

Support

Support » How-To and Troubleshooting » Duplicate anchors inside divs

Duplicate anchors inside divs

  • I added some custom code to header.php which simply includes a few divs and anchors.

    The anchors themselves are structured like this:

    <a id="map-pin-1" class="map-pin" href="#">
         <div class="map-tag">
              <a href="#"></a>
         </div>
    </a>

    When the page loads, I get this:

    <a id="map-pin-1" class="map-pin" href="#"></a>
    <div class="map-tag">
         <a id="map-pin-1" class="map-pin" href="#"></a>
         <a href="#"></a>
    </div>

    Could I get an explanation and a fix please? I can’t link to the site, it’s not live yet.

Viewing 4 replies - 1 through 4 (of 4 total)
  • don’t use a div within an a tag, it is improper – what are you trying to achieve exactly?

    The map-pin anchor is meant to make the map-tag div appear on hover, which is then clickable.

    You need to make two divs, one with the map, one with the second item, the pin, and use CSS to float one over the other.

    This is only an example but would be valid HTML code, a div in a div:

    <div id="map-pin-1" class="map-pin">
    <a href="#"></a>
    <div class="map-tag"><a href="#"></a></div></div>

    The CSS onmouseover event is used.

    Example:

    <div onmouseover="this.class.name='top2'" onmouseout="this.class.name='top'">

    and display:none; style on the div or element for the pin which the onmouseover event overrides (basic hover menu logic)

    You could use CSS3 and two background url images for it all (but it’s not fully supported yet)

    Ah I see now. I restructured the code like this:

    <div id="map-pin-1" class="map-pin">
         <a href="#"></a>
         <div class="map-tag">
              <a href="#"></a>
         </div>
    </div>

    Thanks for the tip, I’ll know to avoid that technique in the future.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Duplicate anchors inside divs’ is closed to new replies.
Skip to toolbar