Make the link clickable only over the text

Page 1 of 1

6 Replies - 610 Views - Last Post: 19 September 2012 - 03:35 AM

#1 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Make the link clickable only over the text

Posted 19 September 2012 - 12:05 AM

I have this simple web page.

Posted Image

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />

</head>
<body id="body_services">

<div id="tasks">
	<ul>
    	<a href="#"><li>Add a new taxi service</li></a>
        <a href="#"><li>Update a taxi service</li></a>
        <a href="#"><li>Delete a taxi service</li></a>
        <a href="#"><li>View taxi services</li></a>
    </ul>
</div>

</body>
</html>




#body_services{ background-color:#FFFF4F; font-family:Segoe UI, Calibri, sans-serif; }

#tasks ul li { height:35px; }

#tasks { padding-left:40px; padding-top:100px; }

#tasks a { color:#000; }

#tasks a:hover { font-weight:bold; }


The problem is that you can click a link anywhere within that particular line(showed from the red line in the screenshot). I want to make the links clickable only when the cursor is hovered its text.

How can I do this?

Thank you.

Is This A Good Question/Topic? 0
  • +

Replies To: Make the link clickable only over the text

#2 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 994
  • View blog
  • Posts: 3,547
  • Joined: 05-June 09

Re: Make the link clickable only over the text

Posted 19 September 2012 - 12:53 AM

Write correct markup, ie. put your <a ..> inside the <li>, and then it should work just fine :)
Was This Post Helpful? 1
  • +
  • -

#3 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: Make the link clickable only over the text

Posted 19 September 2012 - 01:58 AM

Right! Thank you :D
Was This Post Helpful? 0
  • +
  • -

#4 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: Make the link clickable only over the text

Posted 19 September 2012 - 02:06 AM

I have another issue. I have put a small form in the page and floated it to the right side.

Posted Image

But it appears after the unordered list. I want the form to appear at the top right corner. How can I do that?

I thought my previous question had something to do with that and correcting that would right this as well but apparently not.

This post has been edited by nK0de: 19 September 2012 - 02:08 AM

Was This Post Helpful? 0
  • +
  • -

#5 StefanOnRails  Icon User is offline

  • D.I.C Head

Reputation: 35
  • View blog
  • Posts: 105
  • Joined: 31-July 12

Re: Make the link clickable only over the text

Posted 19 September 2012 - 02:23 AM

View PostnK0de, on 19 September 2012 - 11:06 AM, said:

I want the form to appear at the top right corner. How can I do that?

You can wrap that form inside a div and use:
div.form{
  position: absolute; 
  top: 0;
  right: 0;
}
This will place your div at the top-right corner of your page.
Was This Post Helpful? 0
  • +
  • -

#6 RudiVisser  Icon User is offline

  • .. does not guess solutions
  • member icon

Reputation: 994
  • View blog
  • Posts: 3,547
  • Joined: 05-June 09

Re: Make the link clickable only over the text

Posted 19 September 2012 - 02:40 AM

View PostnK0de, on 19 September 2012 - 10:06 AM, said:

I have another issue. I have put a small form in the page and floated it to the right side.

But it appears after the unordered list. I want the form to appear at the top right corner. How can I do that?

I thought my previous question had something to do with that and correcting that would right this as well but apparently not.

Float your list to the left.

#tasks {
    float: left;
    padding-left: 40px;
    padding-top: 100px;
}


When you play around more with floatiness, you'll start to understand the model behind floating, and it will become almost natural to get the elements exactly where you want them :)

@StefanOnRails, using position: absolute should always be a somewhat last resort attempt to position the element as it's almost always not needed.

This post has been edited by RudiVisser: 19 September 2012 - 02:41 AM

Was This Post Helpful? 1
  • +
  • -

#7 nK0de  Icon User is offline

  • Catch me As Exception
  • member icon

Reputation: 204
  • View blog
  • Posts: 823
  • Joined: 21-December 11

Re: Make the link clickable only over the text

Posted 19 September 2012 - 03:35 AM

Thanks again! That works :)
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1