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?
