How to position a ul element over a background link-image? - html

Question

I want to position the <ul> element over the background link-image (black square).
To the right of the words "ABOUT" and "CONTACTS", I cannot click on the link image.
I need to be be able to click on the background link-image every where outside of the
link texts.
Here is what I have tried: Jsfiddle
HTML:
<div class="weekend">
<a href="/all">
<img src="http://cdn.allfun.md/2014/01/23/10/52e0cd02e892f.jpg">
</a>
<ul class="all">
<li class="about">About</li>
<li class="contacts">Contacts</li>
</ul>
CSS:
.all{
position: absolute;
width: 290px;
top: 15px;
left: 15px;
}
.about{
display: block;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
}
.contacts{
display: block;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
}

Answer 1

Here is one way of doing it without having to absolutely positioning each link.
Start with your HTML:
<div class="weekend">
<a href="/all">
<img src="http://cdn.allfun.md/2014/01/23/10/52e0cd02e892f.jpg">
</a>
<ul class="all">
<li class="about">About</li>
<li class="contacts">Contacts</li>
</ul>
</div>
And modify your CSS as follows:
.weekend {
position: relative;
}
.all {
display: inline-block;
position: absolute;
width: 10px; /* Set to a small value, 0 will also work */
top: 15px;
left: 15px;
margin: 0;
padding: 0;
border: 1px dashed yellow;
}
.all li {
display: inline-block;
font-size: 20px;
text-transform: uppercase;
border: 1px dotted yellow;
}
.about{
font-weight: 700;
}
.contacts{
font-weight: 400;
}
First: set position: relative to .weekend, that way ul.all is positioned with respect
to its parent block container.
For ul.all, zero out the margin and padding to reset any unwanted whitespace, and
then set display: inline-block to get a shrink-to-fit width.
For the link link elements, ul.all li, use display: inline-block which will
give you better control over padding and margins if needed.
The key point now is to set the width of ul.all to a small value, 10px for example,
(0 also works). This shrinks the edges of ul.all so that they no longer extend
beyond the edges of the li link elements, so you can then click on the background
element outside of the edges of the inline boxes containing the link text.
Essentially, the ul.all li elements are overflowing outside the edges of the parent
ul.all container, which is a bit odd but in this case, exactly what is needed.
See demo at: http://jsfiddle.net/audetwebdesign/91ea4tfw/
Note that you can add top/bottom margins to ul.all li and the resulting whitespace
will also allow you to click on background link-image. In this case, be sure to
set width: 0 to ul.all and remove the yellow border (for demo only).