I have a group of images which each have their own links. I want the images to be in a list (<ul><li>
.. etc) and have each item have a different background-image
.
Would I run into any issues with something like this?
<ul>
<a href="#"><li class="1"></li></a>
<a href="#"><li class="2"></li></a>
<a href="#"><li class="3"></li></a>
<a href="#"><li class="4"></li></a>
<a href="#"><li class="5"></li></a>
<a href="#"><li class="6"></li></a>
</ul>
You would do better to write it like this
<ul>
<li class="1"><a href="#"></a></li>
<li class="2"><a href="#"></a></li>
<li class="3"><a href="#"></a></li>
</ul>
Then you could add the background-image
to either the a
or the li
.
However, you would style the a
s as display:block
and give them the same height
and width
of the li
. That way the background-image would show and the entire li
would be clickable.
It is not valid HTML because the only thing allowed in an <ul>
element is <li>
s.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With