#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2009
    Posts
    31
    Rep Power
    15

    Make <li> labels clickable in an <ol>


    This seems so simple, yet my hour of searching has yeilded nothing!!

    I simply want to make the numbers that appear for each <li> to be clickable.

    I tried moving the ,a> tags outside the <li>, but that doesn't work.

    I tried (to no avail) in CSS:
    li a {list-style-position:inside; }
    ans: ol li a {list-style-position:inside; }

    also i added a property that enabled me to click anwhere to the right of the number across the whole page, but I forgot now what that was.


    In the simplest illustration, I would like to be able to click on the no. 1 from the HTML code below.

    <ol>
    <li><a href="#a1" /></li>
    </ol>
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    The reason it's not clickable is because the number is part of the <li> and the clickable part is the <a>. You can either use some javascript to make the element clickable, or you could use some CSS kajiggery:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style>
    	OL A {margin-left: -20px; padding-left: 20px; border: 1px solid black}
    </style>
    </head>
    
    <body>
    <ol>
        <li><a href="#a1">test</a></li>
        <li><a href="#a2">test</a></li>
        <li><a href="#a3">test</a></li>
        <li><a href="#a4">test</a></li>
    </ol>
    </div>
    </body>
    </html>

IMN logo majestic logo threadwatch logo seochat tools logo