Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Making whole <li> clickable

Reply
Thread Tools

Making whole <li> clickable

 
 
JJ
Guest
Posts: n/a
 
      11-20-2011
Suppose you had an unordered list, and each li in the list functioned as
a link to an article, with a title, a short text snippet and a thumbnail
image.

Now suppose that, instead of having just the title as a link to the
article, you want the entire li to be clickable. I know that this isn't
allowed:

<li>
<a href="somelink">
<h3>Article title</h3>
<p>Article snippet...</p>
<img src="/news/thumb.jpg" alt="">
</a>
</li>

Nonetheless I've seen this quite a lot, although I don't know if the
authors were deliberately breaking the rules or just doing it out of
ignorance.

Still, it seems to me you can understand why people are doing this
because what are the alternatives? Use Javascript? Or how about adding
the link to everything in the li:

<li>
<h3><a href="somelink">Article title</a></h3>
<p><a href="somelink">Article snippet...</a></p>
<a href="somelink"><img src="/news/thumb.jpg" alt=""></a>
</li>

And then styling it in such a way that all areas of the li are covered
by the links' hotspots (then use li:hover etc.) ?

Neither seems like a good solution to me. What do you guys think is the
best approach to this sort of thing?
 
Reply With Quote
 
 
 
 
Jukka K. Korpela
Guest
Posts: n/a
 
      11-20-2011
2011-11-20 16:46, JJ wrote:

> I know that this isn't allowed:
>
> <li>
> <a href="somelink">
> <h3>Article title</h3>
> <p>Article snippet...</p>
> <img src="/news/thumb.jpg" alt="">
> </a>
> </li>


Yet, browsers support it, and it is being made allowed, according to
HTML5 drafts.

However, it doesn't quite work in the sense of making the entire <li>
element clickable. If that element is wider than the image, clicking on
the right hand side of the image has no effect. The reason is that the
<li> element is not contained in the <a> element. If the <li> element
(which by default occupies 100% of the the available width minus perhaps
left margin) is wider than the image (which by default has its inherent
width), then clicking on the right of the image has no effect. it is the
<li> element's area. The way to overcome this is to introduce an
intermediary element that has 100% width:
<li><a href="somelink"><div><h3> ... </div></a></li>

The main practical problem with this is: how do you convey the idea of a
single link to the user? That is, the idea that there is a link in the
first place and that the heading, the text, and the image are all one
link, pointing to one resource. By default, browsers render the text in
the heading and in the paragraph as underlined and in link color and
(depending on browser) a colored border around the image. This conveys
the link idea, but the elements look like separate links, and there's no
quick way to see that they all point to the same resource.

This problem of course exists independently of the techniques you use,
though the implementation of solutions varies by technique to some
extent. Here's one idea of a solution: remove the underlining (but keep
the link color), remove the image border, but draw a border with link
colors (by state of link) around the entire <li> element, making it look
like a unit. This takes some CSS code and isn't quite trivial when done
right, but surely doable.

> Nonetheless I've seen this quite a lot, although I don't know if the
> authors were deliberately breaking the rules or just doing it out of
> ignorance.


Probably they mostly just don't care about the formal syntax.

> Still, it seems to me you can understand why people are doing this
> because what are the alternatives? Use Javascript?


Using Javascript is one way, and relatively easy. People often implement
things like this all wrong, making the functionality depend on
Javascript, instead of e.g. making just the heading text a link (<h3><a
href="...">...</a></h3>) and assigning an onclick event handler to the
<li> element so that when Javascript is enabled, the entire element
effectively acts as a link.

An alternative is to use just text-level elements inside the <a>
element, e.g.

<a href="somelink"><span class="h3">Article title</span><br>
<span class="p">Article snippet...</span><br>
<img src="/news/thumb.jpg" alt=""></a>

It's poor markup, but it is formally correct, and you can style the
parts as desired. Search engines won't treat the article title as a
heading, but it is not really known outside their houses how much they
do that to <h3> either and what the implications might be.

> Or how about adding
> the link to everything in the li:


To text pieces there, you mean. That would make the markup valid, but
it's a very bad idea for several reasons. Accessibility and usability
guidelines say that there should not be two links with different link
texts pointing to the same resource. Separate links would make it even
more difficult to see that they point to the same resource. Keyboard
navigation would become awkward. And so on.

> What do you guys think is the
> best approach to this sort of thing?


I think the first question should be whether the idea of making the
entire <li> element a link is a good one. It's surely better than making
the heading, the text, and the image separate links to the same resource
(which is not uncommon), but isn't it simpler to make e.g. just the
heading text a link?

There's a point, though, behind the idea. Normally, if a user becomes
interested either due the heading or the image, he often reads the text
too and then decides he's really interested. It would be natural to
click on some point near the place where his eyes were focused on -
whether it was the heading, the text, or the image.

(There's also a design that does not make the heading, the text, or the
image a link but have a separate link after the text, with link text
like "Read more". That's problematic for several reasons, including the
problem that the page then contains several links with the same link
text "Read more" pointing to different resources, and link texts like
that cannot do good when it comes to search engines.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      11-20-2011
In article <jab7ms$vr6$(E-Mail Removed)>,
"Jukka K. Korpela" <(E-Mail Removed)> wrote:

> An alternative is to use just text-level elements inside the <a>
> element, e.g.
>
> <a href="somelink"><span class="h3">Article title</span><br>
> <span class="p">Article snippet...</span><br>
> <img src="/news/thumb.jpg" alt=""></a>


The <br>s are not necessary in this approach. 'display: block' on
the style of the inline elements could be used, it even perhaps
gets more in the spirit of the original intent and allows more
flexible styling.

--
dorayme
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      11-20-2011
2011-11-20 22:23, dorayme wrote:

> In article<jab7ms$vr6$(E-Mail Removed)>,
> "Jukka K. Korpela"<(E-Mail Removed)> wrote:
>
>> An alternative is to use just text-level elements inside the<a>
>> element, e.g.
>>
>> <a href="somelink"><span class="h3">Article title</span><br>
>> <span class="p">Article snippet...</span><br>
>> <img src="/news/thumb.jpg" alt=""></a>

>
> The <br>s are not necessary in this approach.


They are necessary if you don't want the content to run into one block
of text when your style sheet is not applied.

>'display: block' on
> the style of the inline elements could be used, it even perhaps
> gets more in the spirit of the original intent and allows more
> flexible styling.


Indeed, but the approach ignores the usual CSS caveats
( http://www.cs.tut.fi/~jkorpela/css-caveats.html )

--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      11-20-2011
In article <jabnuu$e5b$(E-Mail Removed)>,
"Jukka K. Korpela" <(E-Mail Removed)> wrote:

> 2011-11-20 22:23, dorayme wrote:
>
> > In article<jab7ms$vr6$(E-Mail Removed)>,
> > "Jukka K. Korpela"<(E-Mail Removed)> wrote:
> >
> >> An alternative is to use just text-level elements inside the<a>
> >> element, e.g.
> >>
> >> <a href="somelink"><span class="h3">Article title</span><br>
> >> <span class="p">Article snippet...</span><br>
> >> <img src="/news/thumb.jpg" alt=""></a>

> >
> > The <br>s are not necessary in this approach.

>
> They are necessary if you don't want the content to run into one block
> of text when your style sheet is not applied.
>


True. It is interesting how delicate we can be when we are doing
something rather awkward in the first place. Like robbing a bank
but being mindful to leave as few psychological scars on the
victims as possible. <g>

> >'display: block' on
> > the style of the inline elements could be used, ...


--
dorayme
 
Reply With Quote
 
JJ
Guest
Posts: n/a
 
      11-23-2011
On 20/11/2011 15:51, Jukka K. Korpela wrote:
> 2011-11-20 16:46, JJ wrote:
>
>> I know that this isn't allowed:
>>
>> <li>
>> <a href="somelink">
>> <h3>Article title</h3>
>> <p>Article snippet...</p>
>> <img src="/news/thumb.jpg" alt="">
>> </a>
>> </li>

>
> Yet, browsers support it, and it is being made allowed, according to
> HTML5 drafts.


That's interesting. But how will that work given that a is an inline
element and the h3 and p above are blocks?

<snip>
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      11-23-2011
2011-11-23 20:54, JJ wrote:

> On 20/11/2011 15:51, Jukka K. Korpela wrote:
>> 2011-11-20 16:46, JJ wrote:
>>
>>> I know that this isn't allowed:
>>>
>>> <li>
>>> <a href="somelink">
>>> <h3>Article title</h3>
>>> <p>Article snippet...</p>
>>> <img src="/news/thumb.jpg" alt="">
>>> </a>
>>> </li>

>>
>> Yet, browsers support it, and it is being made allowed, according to
>> HTML5 drafts.

>
> That's interesting. But how will that work given that a is an inline
> element and the h3 and p above are blocks?


Browsers implement so that each of the child elements of <a> is an
active area, and they all act as one link, despite (possibly) consisting
of separate pieces. You can see this if you mouse over the page. When
the mouse is over the heading, the pointer is link-indicating, a hand,
but when you move downwards, it turns to an arrow, then back to a hand.
The reason is that between the <h3> and <p> elements, there is (by
default) a margin that does not belong to either of those elements.
Illogical as it may sound, that margin is not part of the active area.

Similarly, for the <img> element, only the image is active area, not the
empty space on the right of it.

Of course, the <a> element is not really "inline" in this context, and
"inline" isn't even an HTML5 concept. It's just an element that contains
various elements.


--
Yucca, http://www.cs.tut.fi/~jkorpela/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Making GridView results clickable. Mike ASP .Net 0 08-24-2009 09:12 PM
how to use an iframe as a link (make the whole iframe clickable) mi HTML 4 05-21-2008 10:13 PM
Making a TableCell Appear Clickable Nathan Sokalski ASP .Net 1 05-16-2005 08:16 AM
Make the whole row clickable in datagrid RJN ASP .Net 1 09-27-2004 04:59 PM
Making form labels clickable Nick Howes HTML 5 05-03-2004 11:36 AM



Advertisments