CODEWITHSUNDEEP
htmlcsshyperlink
user1730357
user1730357

Reputation: 355

a href not clickable in the right area

CSS:

body {
    background-image: url("../images/ITWorld.jpg");
    background-repeat: no-repeat;
    background-size: 150%;
    font-family: sans-serif;
}

p {
    font-size: 22px;
}

#navbar {
    display: inline;
    text-align: center;
    font-size: 25px;
}

a {
    text-decoration: none;
    font-family: sans-serif;
    color: black;
}

.listitem {
    padding: 7px;
    display: inline;
    border: 3px solid black;
}

a:hover {
    color: white;
}

.reference {
    font-size: 22px;
    padding-top: 50px;
    padding-bottom: 50px;
}

#overviewpara {
    width: 800px;
}

.referenceli {
    padding: 5px;
}

HTML:

<ul>
    <li class="referenceli"><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm</a></li>
    <li class="referenceli"><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011</a></li>
</ul>

My problem is that when i hover over my hyperlinks on my references page they do not react in the correct areas. For example I'll be link 5px above the link and it will not higligh or i will be right over the link, but it will not work. Sorry for messy html.

Upvotes: 0

Views: 1489

Answers (4)

Shawn Altman
Shawn Altman

Reputation: 143

Give this a try. I think that you need to style div and not the li tags. I added some borders to the reference and referenceli. Add the borders to your code to see your styling impact. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<style>
body {
    background-image: url("../images/ITWorld.jpg");
    background-repeat: no-repeat;
    background-size: 150%;
    font-family: sans-serif;
}

p {
    font-size: 22px;
}

#navbar {
    display: inline;
    text-align: center;
    font-size: 25px;
}

a {
    text-decoration: none;
    font-family: sans-serif;
    color: black;
}

.listitem {
    padding: 7px;
    display: inline;
    border: 3px solid black;
}

a:hover {
    color: red;
    font-weight:bold;
}

.reference {
    font-size: 22px;
    padding:10px 0 10px 0;
    border:green solid 1px;
}

#overviewpara {
    width: 800px;
}

div.referenceli{
   padding:20px 0 0 0;
   border:red 1px solid;
}
</style>
<ul>
  <div class="referenceli"><!--USE DIV TO FOCUS CSS -->
    <li><a class="reference" href="http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm">http://jobsearchtech.about.com/od/careersintechnology/p/ITDefinition.htm
    </a></li><!-- END LI -->
  </div><!-- END REFERENCELI -->
  <div class="referenceli">
    <li><a class="reference" href="http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011">http://www.guardian.co.uk/higher-education-network/2011/sep/05/top-100-universities-world-computer-science-and-information-systems-2011
    </a></li><!-- END LI -->
  </div><!-- END REFERENCELI -->
</body>
</html>

Upvotes: 0

iie
iie

Reputation: 1

Changed paddings top and bottom to 5px:

.reference 
{
    font-size: 22px;
    padding-top: 5px;
    padding-bottom: 5px;
}

Upvotes: 0

DextrousDave
DextrousDave

Reputation: 6793

You should make the padding on your a tag 5px, and not your list item.

.referenceli {
    padding: 5px;
}

should be

.reference {
    padding: 5px;
    text-decoration: none;
    font-family: sans-serif;
    color: black;
}

Also remove the 50px padding from the a tags: You will be better of applying that size(50px) to the margin of the list items:

.reference {
    font-size: 22px;
    padding-top: 50px;
    padding-bottom: 50px;
}

should be

.reference {
    font-size: 22px;
    padding: 5px; /*So you will have a hover effect 5px below and above the link*/
}

.referenceli {

    margin: 50px 0px;
}

Upvotes: 1

Francis Kim
Francis Kim

Reputation: 4285

Changed paddings top and bottom to 5px:

.reference {
    font-size: 22px;
    padding-top: 5px;
    padding-bottom: 5px;
}

Fiddle: http://jsfiddle.net/uNpbk/

Upvotes: 1

Related Questions