WordPress.org

Ready to get started?Download WordPress

Forums

Duplicate anchors inside divs (5 posts)

  1. AusQB
    Member
    Posted 1 year ago #

    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.

  2. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    don't use a div within an a tag, it is improper - what are you trying to achieve exactly?

  3. AusQB
    Member
    Posted 1 year ago #

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

  4. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    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)

  5. AusQB
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic