Nesting Links

**jamest** · 02-13-2008, 06:38 PM

I would like to nest 5 links inside each other for a star rating system I am making for my site, like this.

Code:

<a class="5star" href="#">
<a class="4star" href="#">
<a class="3star" href="#">
<a class="2star" href="#">
<a class="1star" href="#">
</a>
</a>
</a>
</a>
</a>

but the browser tries to pair these colored pairs together

Code:

<a class="5star" href="#">
<a class="4star" href="#">
<a class="3star" href="#">
<a class="2star" href="#">
<a class="1star" href="#">
</a>
</a>
</a>
</a>
</a>

when I want it to pair these colored pairs together

Code:

<a class="5star" href="#">
<a class="4star" href="#">
<a class="3star" href="#">
<a class="2star" href="#">
<a class="1star" href="#">
</a>
</a>
</a>
</a>
</a>

Is their any way to make this work?

**vangogh** · 02-13-2008, 07:45 PM

You can't nest links. It really doesn't make sense since it leaves no way for the browser to determine where the link should go.

You shouldn't need to nest links to create a rating system, though. Could you describe what you want to do with a little more detail. I'm sure we can walk you through creating the rating system or point you to a tutorial or pre-existing script.

**chrishirst** · 02-15-2008, 04:21 AM

http://www.w3.org/TR/html401/struct/links.html#h-12.2.2

**jamest** · 02-15-2008, 03:01 PM

OK, Thanks. I am pretty sure I can accomplish the same affect by putting links inside of divs and then nesting the divs. When I finish I will post it here so you guys can see what I was trying to do and how I got it to work.

**ozzozo** · 02-15-2008, 09:00 PM

How about trying a horizontal list?

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<style type="text/css">

#rating li
{
display: inline;list-style-type: none;padding-right: 10px;
}
</style>
</head>

<body>

<ul id="rating">
<li><a href="#">5</a></li>
<li><a href="#">4</a></li>
<li><a href="#">3</a></li>
<li><a href="#">2</a></li>
<li><a href="#">1</a></li>
</ul>

</body>
</html>

**jamest** · 02:16 AM

That wouldn't work for my purposes. The reason I want to nest links is so I can change the background of all links inside a certain link when I hover over it.

EDIT:This is the my new problem and I believe that it is all that is keeping my idea from working.

Why does this work and the image Star_Gold.png shows up.

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div a {
padding-right:16px;
background:url(/Images/Buttons/Star_Gold.png) no-repeat 0 0;
}
</style>
</head>
<body>
<div class="1star"><a href="#"></a></div>
</body>
</html>

But this does not?

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
div.1star a {
padding-right:16px;
background:url(/Images/Buttons/Star_Gold.png) no-repeat 0 0;
}
</style>
</head>
<body>
<div class="1star"><a href="#"></a></div>
</body>
</html>

EDIT2:I just realized I am an idiot. I have been racking my brains to try and figure out why this didn't work when the only problem is that i started my class names with numbers.

**Mattmaul1992** · 02-16-2008, 02:20 AM

So is it all figured out now?

**jamest** · 02-16-2008, 02:37 AM

I'm still working on the final touches but that solved most of my problems.

**jamest** · 02-16-2008, 05:54 PM

I would like everyone to know that this is finished and that if you would like to view my resulting star rating system you can view it here.

If you use any of the code from this site please add a to http://jamest.bravehost.com/index.shtml(I am currently working on this site and thus haven't bought a domain name or added any content. I am hoping to have this site finished by the end of the summer.) from your site.

Currently this rating system does not work in IE due to the use of the CSS child selector. For best results it should be viewed with Mozilla Firefox(or other Mozilla based browsers).