0

I am trying to add a link around a section of code that I have made previously because the client wanted me to. The problem is the link doesn't work how it should. Instead of appearing around the the div it is appearing inside of the div but not only that it is appearing multiple times and has even rearranged elements of the div. I believe that this must have something to do with Craft because it is not an issue I have ever come across before.

The code I am using is this:

{% for entry in craft.entries.section('courses') %}
    <li>
        <a class="course-link" href="/courses/course">
            <h3 class="grey-box-h3">{{ entry.title }}</h3>

            {% for instructors in entry.instructor %}
                <p class="teacher">{{ instructors.title }}</p>
            {% endfor %}

            <img src="{{ entry.banner[0].getUrl('courseImage') }}" width="{{ entry.image[0].getWidth('courseImage') }}" height="{{ entry.image[0].getHeight('courseImage') }}">

            <div class="list-info">
                <div class="price">
                    <p>{{ entry.price }}</p>
                    <p>WACOM included*</p>
                </div>

                {% for block in entry.terms.limit(1) %}
                    <ul class="dates">
                        <li>{{ block.time }} ({{ block.hours }} hrs)</li>
                        <li>{{ block.date }} {{ block.year }}</li>
                        <li>8 Weeks - {{ block.day }}</li>
                    </ul>
                {% endfor %}

                <p class="desc">{{ entry.shortCourseDescription }}</p>
                <div class="req">
                    <p>Req:</p>

                    {% if entry.requiredPrograms.contains('Photoshop') %}
                        <a class="photoshop" target="_blank" href="http://www.adobe.com/au/products/photoshop.html">Photoshop</a>
                    {% endif %}                                    

                    {% if entry.requiredPrograms.contains('Sketch Up') %}
                        <a class="sketch-up" target="_blank" href="http://www.sketchup.com/">Sketch Up</a>
                    {% endif %}                      

                    {% if entry.requiredPrograms.contains('Maya') %}
                        <a class="maya" target="_blank" href="http://www.autodesk.com.au/products/maya/overview">Maya</a>
                    {% endif %}                   

                    {% if entry.requiredPrograms.contains('Zbrush') %}
                        <a class="zbrush" target="_blank" href="http://pixologic.com/">Zbrush</a>
                    {% endif %}  

                    {% if entry.requiredPrograms.contains('After Effects') %}
                        <a class="after-effects" target="_blank" href="http://www.adobe.com/au/products/aftereffects.html">After Effects</a>
                    {% endif %}                      

                    {% if entry.requiredPrograms.contains('Mud Box') %}
                        <a class="mudbox" target="_blank" href="http://www.autodesk.com/products/mudbox/overview">Mud Box</a>
                    {% endif %} </div>

                    <a class="button" href="{{ entry.getURL }}">More Info</a>

                </div>
        </a>
    </li>
{% endfor %}

But the code that is appearing is this

<li>
  <a class="course-link" href="/courses/course">
  <h3 class="grey-box-h3">Intro to Drawing and Character Design</h3>
  <p class="teacher">Tim McBurnie</p>
  <img src="http://cdwstudios.com/uploads/images/banners/_courseImage/course-introCHARACTER.jpg" width="350" height="165"> </a>
  <div class="list-info"><a class="course-link" href="/courses/course">
    <div class="price">
      <p>$595.00</p>
      <p>WACOM included*</p>
    </div>
    <ul class="dates">
      <li>Time</li>
      <li>Date</li>
      <li>Date2</li>
    </ul>
    <p class="desc">content</p>
    </a>
    <div class="req">
    <a class="course-link" href="/courses/course">
      <p>Req:</p>
      </a>
    <a class="photoshop" target="_blank" href="http://www.adobe.com/au/products/photoshop.html">Photoshop</a> 
    </div>
    <a class="button" href="http://cdwstudios.com/courses/introduction-to-drawing-character-design">More Info</a> 
    </div>
</li> 

Notice how the is appearing multiple times and has actually change the order of the divs.

Does anyone know why it is doing this?

2

Was just cleaning up the formatting of your HTML and noticed that you seem to be missing the closing </div> for <div class="list-info">.

It also looks like you've got nested anchor tags, which W3 defines as illegal:

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.

| improve this answer | |
  • Additionally, an <a> anchor tag is an inline element, and shouldn't be wrapped around block elements like <h3>, <div>, <p>, or <ul>. – Lindsey D Jul 14 '15 at 5:21
  • @LindseyD if you go from the new HTML5 spec, this isn't the case anymore. "The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)" w3.org/TR/html51/semantics.html#the-a-element :) – Alec Ritson Jul 14 '15 at 6:05
  • @AlecRitson Excellent, I didn't know that! Thanks. :) – Lindsey D Jul 14 '15 at 6:12
  • What's the best way to do to have links within links? I don't really want to do it but the client specifically wants the entire area to be a link but also for there to be the specific and different links with that area. I'll have a look at the missing </div> and try see what I can do with the links first thing in the morning and will get back to you. Thanks for the help. – JeffTalbot Jul 14 '15 at 13:30
  • 1
    Links within links? I would have two like so: <a>...</a><a>...</a> and then absolutely position the 2nd one on top of the 1st one. – Marion Newlevant Jul 14 '15 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.