CODEWITHSUNDEEP
html
Karem
Karem

Reputation: 18103

HTML: li and a href

So i have styled my ul li, it comes in a dropdown box and when you mark over each li it a:hover with purple. Now in each li there´s a name. I want to make it all a link, so when you click anywhere in the marked li you go to the link.

Right now, when you click somewhere in the li nothing happens, only if you click on the name IN the li..

Here's my code:

  echo '<a href="profil.php?id='.$result->id.'"><li onClick="fill(\''.addslashes($result->full_name).'\');">'.$result->full_name.'</li></a>';

How do i do this?

    .suggestionsBox {
    position: absolute;
    left: 0px;
    top: 10px;
    margin: 26px 0px 0px 0px;
    width: 200px;
    padding:0px;
    background-color: #000;
    border-top: 3px solid #000;
    color: #fff;
}
.suggestionList {
    margin: 0px;
    padding: 0px;
}
.suggestionList ul li {
    list-style:none;
    margin: 0px;
    padding: 6px;
    border-bottom:1px dotted #5a2156;
    cursor: pointer;
}
.suggestionList ul li:hover {
    background-color: #5a2156;
    color:#000;
}
ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#FFF;
    padding:0;
    margin:0;
}

Upvotes: 4

Views: 39674

Answers (5)

yanike
yanike

Reputation: 847

This is what I'm using on my project and it works great. The overflow stops the a href from expanding outside of the li and 100% padding fills the space.

#cbtn li
{
    height: 61px;
    border: none;
    outline: none;
    list-style: none;
    float: left;
    overflow: hidden;
}

#cbtn li a
{
    padding: 100%;
    outline: none;
}

Example of it working: http://jsbin.com/ilocow/4/

Upvotes: 0

SixKnight
SixKnight

Reputation: 21

Maybe a bit late, but for those who have the same problem:

I would (and did) it like so:

.suggestionList ul li {
list-style:none;
margin: 0px;
padding: 0px;
border-bottom:1px dotted #5a2156;
cursor: pointer;
}
.suggestionList ul li a {
display: block;
padding: 6px;
}

The li element has no more padding, and the a inside is as big as the li element.

Upvotes: 2

Moses
Moses

Reputation: 9173

First, a li element must be a direct child of a ul element, so you have to have the a tag inside the li tags.

Here is how I would construct the HTML / CSS; incorporate it into your php however you think it would work best.

<ul>
  <li><a href="#"><span class="list1">Content 1</span></a></li>
</ul>

.list1 {width: 120px;} /* Set this to whatever width you want the list to fill*/

Upvotes: 0

Alex B
Alex B

Reputation: 1019

I'm not sure you should put an <li> inside an anchor <a> like that. If you want the whole line to be clickable just put the <a> inside of the <li> and it should take up the right width. if not, give it a set height and width and the <li> should fit tightly around it, making it all clickable.

so like:

echo '<li onClick="fill(\''.addslashes($result->full_name).'\');"><a href="profil.php?id='.$result->id.'">'.$result->full_name.'</a></li>';

and then the css:

a{height : 20px;}

<a> is inline so its width cannot be set but it will wrap tightly around it's text.

Upvotes: 0

Gumbo
Gumbo

Reputation: 655239

The A element can only contain level elements and LI is only allowed in OL and UL. But LI allows A inside, so make it the other way round:

echo '<li onClick="fill(\''.addslashes($result->full_name).'\');"><a href="profil.php?id='.$result->id.'">'.$result->full_name.'</a></li>';

To make the A fill the available space, display it as block element:

li > a {
    display: block;
}

Upvotes: 13

Related Questions