Make a DIV with inside a LIST and make the whole DIV linkable?

Question

I am a complete newbie and I posted another question to help me out to get a DIV with a LIST inside and then make the entire DIV clickable/link-able with when hover over it, it changes color.

I messed it up with all kinds of stunts and now I am looking forward to know what's the best way to do this.

Thanks a lot.

Welcome to Stack Overflow Simon! At Stack Overflow, we don't write code for you. This site is for help with trying to fix your code, not giving you code. If you want people to help you, then you are going to need to show some evidence of research — Cody Guldner, May 27 '13 at 22:29
Hi Cody, here is my evidence of research... http://stackoverflow.com/questions/16776332/make-an-entire-div-linkable-when-a-module-is-loaded-inside-to-it — bgree, May 27 '13 at 23:14

Kyle G. · Answer 1 · 2013-05-27T20:38:42.693

0

It can be done fairly simply with CSS.

To make the "clickable area" of the link take up the whole div add display:block to the CSS for that link.

Colour changing on mouse hover can also be done with CSS, like this:

a:hover {
    background-color:green;
}

My understanding is that you're looking to make an entire list into a single link. It seems a little odd, but all it takes is putting the <a> tags on the outside of the <ul> or <ol> tags, like this:

<a href="yourlink.html">
<ul>
    <li>List Item 1</li>
    <li>List Itme 2</li>
</ul>
</a>

Check out http://www.w3schools.com for excellent beginner web development tutorials.

edited May 27 '13 at 20:38

answered May 27 '13 at 19:37

Kyle G.

870
2
10
22

1

**NOT EXCELLENT TUTs** Use MDN, W3C, html5rocks instead of w3schools – Sourabh May 27 '13 at 20:22
There's no need to start arguing over who provides the best tutorials. I've learned a lot from w3schools, but, as always, YMMV. – Kyle G. May 27 '13 at 20:41
Thank you, Kyle. I am so happy it worked finally. – bgree May 27 '13 at 22:36

score 0 · Answer 2 · answered May 27 '13 at 19:43

0

Try this:

HTML

<div class="clickable">
<ul>
    <li>hello</li>
    <li>world</li>
</ul>

CSS:

.clickable {
background-color: #ddd;
}

.clickable:hover {
    background-color: #8F8
}

Test:

http://jsfiddle.net/guPan/

If you want to act this like a link, you better just use a link tag and set display: block css for it

answered May 27 '13 at 19:43

Jakub Matczak

15,341
5
46
64

Hi Dragoste, thanks a lot, worked like a charm. – bgree May 27 '13 at 22:35
Hi Dragoste, could you elaborate more on your last phrase... I get my list items to link, but not the whole div... what I did was put the a href inside the div, but it does not validate (outside the div does not work either)....? – bgree May 27 '13 at 23:26
Hi Dragoste, could you elaborate more on your last phrase... I get my list items to link, but not the whole div... what I did was put the a href inside the div, but it does not validate (outside the div does not work either)....? – bgree May 27 '13 at 23:26
Just use instead of
and add `display:block` CSS style. Modified example: http://jsfiddle.net/guPan/1/ Thanks for downvote btw.
– Jakub Matczak May 28 '13 at 16:52
Hi, sorry about the downvote, didnt know what it was and I must have accidently clicked it. Thanks for the additional explanation. As soon as I get the 15 reputation points, I will give you the +1 vote. Thanks again. – bgree May 28 '13 at 19:30

score 0 · Accepted Answer · answered May 27 '13 at 19:49

0

a few things you need to know:

you can make an anchor (<a>) that acts like a <div> by setting:

a{display:block;}
to make the link background change color on hover use:

a:hover {background:red;}

you can add an ordered list inside (valid in HTML5) like this:

<a title="My Link" href="http://www.somelinkurl.com">
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol></a>

answered May 27 '13 at 19:49

Yotam Omer

15,310
11
62
65

Hi Yotam, thanks a lot. You gave me new insights. – bgree May 27 '13 at 22:36
Cheers mate. I tried to be as clear as I can. – Yotam Omer May 27 '13 at 22:40

score 0 · Answer 4 · answered May 27 '13 at 21:28

Set width and height for the anchor tag and to declare it display:block.

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style type="text/css">
            #link {
                width:300px;
                height:300px;
            }
            #link a {
                width:300px;
                height:300px;
                display:block;
                background-color:orange;
            }
            #link a:hover {
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div id="link">
            <a href="#">I am a Link</a>
        </div>
    </body>
</html>

Make a DIV with inside a LIST and make the whole DIV linkable?

4 Answers4