Veteran Member
Join Date: Jun 2006
Location: Florida
|
I can't seem to figure this one out. I'm trying to create a grid in the same style as a comic book with each cell being a link, but for some reason it doesn't seem to be working. Everything is laid out properly and displays correct, except for some reason it's not acknowledging there is a link involved. I'm trying to create a type of image map idea, but, like I said, the link's aren't coming across. Each li class is set to display:block but that doesn't seem to be working either. Anyone see where I went wrong? Thanks guys.
Code:
<!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>
<style type="text/css">
div.left { width: 500px; margin: 0; padding: 0; float: left; background-color: #000000; }
div.friends { width: 250px; height: 380px; padding: 38px 0 0 0; margin: 0 0 10px 525px; float: left; background-color: #000000; background: url(friends.gif) top center no-repeat; }
ul.level1 { margin: 0 0 0 5px; padding: 0; float: left; height: 100px; list-style-type: none; display: inline; }
ul.level1 li { padding: 0; margin: 0 0 5px 5px; display: block; float: left; text-indent: -9999px; background: #ccc; }
li.friend1 { width: 86px; height: 100px; display: block; }
li.friend2 { width: 144px; height: 100px; display: block; }
ul.level2 { margin: 7px 0 0 5px; padding: 0; float: left; height: 100px; list-style-type: none; display: inline; }
ul.level2 li { padding: 0; margin: 0 0 5px 5px; display: block; float: left; text-indent: -9999px; background: #ccc; }
li.friend3 { width: 144px; height: 100px; display: block; }
li.friend4 { width: 86px; height: 100px; display: block; }
ul.level3 { margin: 7px 0 0 5px; padding: 0; float: left; height: 100px; list-style-type: none; display: inline; }
ul.level3 li { padding: 0; margin: 0 0 5px 5px; display: block; float: left; text-indent: -9999px; background: #ccc; }
li.friend5 { width: 86px; height: 100px; display: block; }
li.friend6 { width: 144px; height: 100px; display: block; }
</style>
</head>
<body>
<div class="friends">
<ul class="level1">
<li class="friend1"><a href="#">Friend 1</a></li>
<li class="friend2"><a href="#">Friend 2</a></li>
</ul>
<ul class="level2">
<li class="friend3"><a href="#">Friend 3</a></li>
<li class="friend4"><a href="#">Friend 4</a></li>
</ul>
<ul class="level3">
<li class="friend5"><a href="#">Friend 5</a></li>
<li class="friend6"><a href="#">Friend 6</a></li>
</ul>
</div>
</body>
</html> |
quote |
Veteran Member
Join Date: May 2004
Location: Promise Land of Trustafarians
|
What if you change the position of the <a> tags?
Code:
<ul class="level1">
<a href="#"><li class="friend1">Friend 1</li></a>
<a href="#"><li class="friend2">Friend 2</li></a>
</ul> Of course, it's not valid.Last edited by Ryan : 2007-06-19 at 00:05. |
quote |
Veteran Member
Join Date: May 2004
Location: Promise Land of Trustafarians
|
Okay, this one *is* valid.
Code:
<!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>
<style type="text/css">
div.left { width: 500px; margin: 0; padding: 0; float: left; background-color: #000000; }
div.friends { width: 250px; height: 380px; padding: 38px 0 0 0; margin: 0 0 10px 525px; float: left; background-color: #000000; background: url(friends.gif) top center no-repeat; }
ul.level1 { margin: 0 0 0 5px; padding: 0; float: left; height: 100px; list-style-type: none; display: inline; }
ul.level1 li { padding: 0; margin: 0 0 5px 5px; display: block; float: left; text-indent: -9999px; background: #ccc; }
a.friend1 { width: 86px; height: 100px; display: block; }
a.friend2 { width: 144px; height: 100px; display: block; }
ul.level2 { margin: 7px 0 0 5px; padding: 0; float: left; height: 100px; list-style-type: none; display: inline; }
ul.level2 li { padding: 0; margin: 0 0 5px 5px; display: block; float: left; text-indent: -9999px; background: #ccc; }
a.friend3 { width: 144px; height: 100px; display: block; }
a.friend4 { width: 86px; height: 100px; display: block; }
ul.level3 { margin: 7px 0 0 5px; padding: 0; float: left; height: 100px; list-style-type: none; display: inline; }
ul.level3 li { padding: 0; margin: 0 0 5px 5px; display: block; float: left; text-indent: -9999px; background: #ccc; }
a.friend5 { width: 86px; height: 100px; display: block; }
a.friend6 { width: 144px; height: 100px; display: block; }
</style>
</head>
<body>
<div class="friends">
<ul class="level1">
<li><a href="#" class="friend1">Friend 1</a></li>
<li><a href="#" class="friend2">Friend 2</a></li>
</ul>
<ul class="level2">
<li><a href="#" class="friend3">Friend 3</a></li>
<li><a href="#" class="friend4">Friend 4</a></li>
</ul>
<ul class="level3">
<li><a href="#" class="friend5">Friend 5</a></li>
<li><a href="#" class="friend6">Friend 6</a></li>
</ul>
</div>
</body>
</html> I moved the friend# class from the <li> to the <a>. |
quote |
Veteran Member
Join Date: Jun 2006
Location: Florida
|
Thank you. I figured it was something simple I was missing. Thanks again.
|
quote |
Posting Rules | Navigation |
|
Thread Tools | |
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
CSS Question | jdcfsu | Programmer's Nook | 12 | 2007-03-26 21:00 |
Dumb CSS question | torifile | Programmer's Nook | 10 | 2006-08-05 12:55 |
CSS question. | Wickers | Genius Bar | 33 | 2005-01-04 16:49 |
CSS positioning question (w/ diagram) | drewprops | Genius Bar | 9 | 2005-01-02 09:40 |