Here is some HTML code that I'm working with:
<span>
<a href="#">
<span class="caption">
<p id="first">Text1</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing1.jpg" width="218" height="181"
alt="thing1"/>
</a>
</span>
<span>
<a href="#">
<span class="caption">
<p id="first">Text2</p>
<p id="desc">click to read</p>
</span>
<img class="img_link" src="img/thing2.jpg" width="218" height="181"
alt="thing2"/>
</a>
</span>
I am trying to create a transition effect for images using CSS with this code, but I keep getting an error message about duplicate IDs ("first" and "desc"). I need to style the text differently by resizing the font of "first" to 14px and "desc" to 12px.
The issue is that the paragraphs with IDs "first" and "desc" cannot be direct children of the "span" element according to validation rules.
If anyone has a solution or suggestion on how to tackle this problem, I would appreciate it!
UPDATE: Thanks to the advice I received, I have changed the IDs to classes. However, I still need help with resizing the text within the "first" and "desc" classes as it seems unconventional to place inline elements within block elements.
UPDATE 2: Problem solved! By using div elements instead of spans, I was able to achieve the desired result. This project is for a school assignment focused on creating a gallery layout with images aligned side by side using float: left.
Thank you for all the helpful tips!