Duplicate anchors inside divs

  • AusQB

    (@ausqb)


    11 years, 7 months 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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Pioneer Web Design

    (@swansonphotos)

    11 years, 7 months ago

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

    Thread Starter AusQB

    (@ausqb)

    11 years, 7 months ago

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

    Pioneer Web Design

    (@swansonphotos)

    11 years, 7 months 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)

    Thread Starter AusQB

    (@ausqb)

    11 years, 7 months 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.

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