User Name
Password
AppleNova Forums » Programmer's Nook »

CSS Layout Question


Register Members List Calendar Search FAQ Posting Guidelines
CSS Layout Question
Thread Tools
jdcfsu
Veteran Member
 
Join Date: Jun 2006
Location: Florida
 
2007-06-18, 23:24

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>

90% of statistics can be made to say anything 50% of the time.
Website | Twitter
  quote
Ryan
Veteran Member
 
Join Date: May 2004
Location: Promise Land of Trustafarians
 
2007-06-18, 23:49

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
Ryan
Veteran Member
 
Join Date: May 2004
Location: Promise Land of Trustafarians
 
2007-06-19, 00:25

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
jdcfsu
Veteran Member
 
Join Date: Jun 2006
Location: Florida
 
2007-06-19, 06:46

Thank you. I figured it was something simple I was missing. Thanks again.
  quote
Posting Rules Navigation
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Post Reply

Forum Jump
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


« Previous Thread | Next Thread »

All times are GMT -5. The time now is 10:19.


Powered by vBulletin®
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright ©2004 - 2024, AppleNova