Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rollover on link versus cell

    I have a menu I am making set up as follows:
    Code:
     a:link {
    	color: #f39;
    	background-color: #fff;
    	text-decoration:none;
    	display: block;
    }
     a:visited {
    	color: #f6c;
    	background-color: #fff;
    	text-decoration:none;
    	display: block;	
    }
     a:link:hover {
    	color: #fcf;
    	background-color: #f39;
    	text-decoration:none;
    	display: block;
    }
    table.menu {
    	font-family: "Times New Roman", Times, serif;
    	font-size: 9pt;
    	line-height: 11pt;
    	color: #FF3399;
    }
    For the style, and;
    Code:
    <table width="120" border="0" align="center" cellpadding="1" cellspacing="0" class="menu">
    <tr><a href="biography.html"><td><div align="center">Biography</div></td></a></tr>
    <tr><td><div align="center"><a href="gallery.html" width="120">Image Gallery</a></div></td></tr>
    <tr><td><div align="center"><a href="services.html">Rates &amp; Services</a></div></td></tr>
    <tr><td><div align="center"><a href="faq.html">F. A. Q.</a></div></td></tr>
    <tr><td><div align="center"><a href="gbook.html">Guestbook</a></div></td></tr>
    <tr><td><div align="center"><a href="calendar.html">Online Calendar</a></div></td></tr>
    <tr><td><div align="center"><a href="contact.html">Contact Information</a></div></td></tr>
    </table>
    For the menu itself.

    Notice the first item, Biography, has the TD nested inside the <a> tag instead of just the text. I was doing this because I want the entire cell's area to be clickable, which does not work with the text only wrapped in the <a> tag. However, by doing that, there is no effect at all on hover - the link works, and the entire cell is clickable, but no change on hover.

    So, what am I doing wrong with that? And is there a way to eliminate the table, but have an area of 120 pixels wide by the text height to be clickable, even if only one or two characters are in that space?

    I had tried that with the code you see on the second line, Gallery, making the <a> tag have a width of 120; but that did not work either.

    Thanks!

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    *sigh*
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>45683</title>
    		<style type="text/css">
    			#menu	{
    				width:120px;
    				padding:0;
    				margin:0 auto;
    				list-style:none;
    			}
    			#menu a	{
    				display:block;
    				text-align:center;
    			}
    			#menu a:hover	{
    				background-color:#f00;
    			}
    		</style>
    	</head>
    	<body>
    		<ul id="menu">
    			<li><a href="biography.html">Biography</a></li>
    			<li><a href="gallery.html">Image Gallery</a></li>
    			<li><a href="services.html">Rates &amp; Services</a></li>
    			<li><a href="faq.html">F. A. Q.</a></li>
    			<li><a href="gbook.html">Guestbook</a></li>
    			<li><a href="calendar.html">Online Calendar</a></li>
    			<li><a href="contact.html">Contact Information</a></li>
    		</ul>
    	</body>
    </html>

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey! At least try to keep his original code!

    I do agree with hemebond though. You should really use lists for menus, rather than tables.

    Code:
    /* Add the following CSS */
    a:link, a:visited, a:link:hover {
    display: table-cell;
    }
    /* Stop adding! */
    --------
    <table width="120" border="0" align="center" cellpadding="1" cellspacing="0" class="menu">
    <tr>
      <td align="center"><a href="biography.html">Biography</a></td>
    </tr>
    <tr>
      <td align="center"><a href="gallery.html" width="120">Image Gallery</a></td>
    </tr>
    <tr>
      <td align="center"><a href="services.html">Rates &amp; Services</a></td>
    </tr>
    <tr>
      <td align="center"><a href="faq.html">F. A. Q.</a></td>
    </tr>
    <tr>
      <td align="center"><a href="gbook.html">Guestbook</a></td>
    </tr>
    <tr>
      <td align="center"><a href="calendar.html">Online Calendar</a></td>
    </tr>
    <tr>
      <td align="center"><a href="contact.html">Contact Information</a></td>
    </tr>
    </table>
    That should work for you.

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by gohankid77
    Hey! At least try to keep his original code!
    I absolutely refuse to encourage bad practices.

  • #5
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Heh. Just as I refuse to code for IE. What a pair! *hiccup*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •