SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS with Links and Tables

    I can't seem to figure this out. I want to have the cell and text color change when moused over and then have the whole cell be the link. I want to have it all on my external style sheet if possible. Here is what I currently have:

    HTML Code:
    <table width="100%" height="25" border="0" cellpadding="2" cellspacing="0">
      <tr>
        <td class="menu" width="14%" align="center" onmouseover="this.className='menuUP';" onmouseout="this.className='menu';"><a href="http://www.lone-palm.net" style="display:block;font-weight:bold;font-size:14px;" class="menuTEXT">Home</a></td>
        <td class="menu" width="14%" align="center" onmouseover="this.className='menuUP';" onmouseout="this.className='menu';"><a href="http://www.lone-palm.net/authors.php" style="display:block;font-weight:bold;font-size:14px;color:#ff6600;">Authors</a></td>
        <td class="menu" width="14%" align="center" onmouseover="this.className='menuUP';" onmouseout="this.className='menu';"><a href="http://www.lone-palm.net/portfolio.php" style="display:block;font-weight:bold;font-size:14px;color:#ff6600;">Portfolio</a></td>
        <td class="menu" width="14%" align="center" onmouseover="this.className='menuUP';" onmouseout="this.className='menu';"><a href="#" style="display:block;font-weight:bold;font-size:14px;color:#ff6600;">Buffett</a></td>
        <td class="menu" width="14%" align="center" onmouseover="this.className='menuUP';" onmouseout="this.className='menu';"><a href="http://images.lone-palm.net/" style="display:block;font-weight:bold;font-size:14px;color:#ff6600;">Photos</a></td>
        <td class="menu" width="14%" align="center" onmouseover="this.className='menuUP';" onmouseout="this.className='menu';"><a href="http://www.lone-palm.net/archives.php" style="display:block;font-weight:bold;font-size:14px;color:#ff6600;">Archives</a></td>
        <td class="menu" width="14%" align="center" onmouseover="this.className='menuUP';" onmouseout="this.className='menu';"><a href="http://www.lone-palm.net/forums/" style="display:block;font-weight:bold;font-size:14px;color:#ff6600;">Forums</a></td>
      </tr>
    </table>
    Code:
    .menu {
    	background-color : transparent;
    	font-size : 14px;
    	color : #000000;
    }
    
    .menuTEXT {
    	background-color : transparent;
    	font-size : 14px;
    	color : #ffffff;
    	font-weight : bold;
    }
    
    .menuUP {
    	background-color : #ffff99;
    	font-size : 14px;
    	color : #000000;
    	text-decoration : underline;
    	border: 1px solid #000000;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Something like this:
    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    table#menu{width:100%;height:25px;}
    table#menu td{width:14%;text-align:center}
    #menu a{
    display:block;
    font-weight:bold;
    font-size:14px;
    color:#ff6600;
    border:1px solid #fff;
    }
    /* commented backslash mac hiding hack  \*/ 
    * html #menu a {height:1%;} 
    /* end hack */ 
    
    #menu a:hover {
    background-color : #ffff99;
    color : #000000;
    border: 1px solid #000000;
    }
    </style>
    </head>
    <body>
    <table id="menu" border="0" cellpadding="2" cellspacing="0">
    <tr>
    	<td><a href="http://www.lone-palm.net" >Home</a></td>
    	<td><a href="<A href="http://www.lone-palm.net/authors.php">Authors</a></td">http://www.lone-palm.net/authors.php">Authors</a></td>
    	<td><a href="<A href="http://www.lone-palm.net/portfolio.php">Portfolio</a></td">http://www.lone-palm.net/portfolio.php">Portfolio</a></td>
    	<td><a href="#">Buffett</a></td>
    	<td><a href="http://images.lone-palm.net/" >Photos</a></td>
    	<td><a href="<A href="http://www.lone-palm.net/archives.php">Archives</a></td">http://www.lone-palm.net/archives.php">Archives</a></td>
    	<td><a href="<A href="http://www.lone-palm.net/forums/">Forums</a></td">http://www.lone-palm.net/forums/">Forums</a></td>
    </tr>
    </table>
    </body>
    </html>
    Paul

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2003
    Location
    Florida
    Posts
    152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, thank you. That is exactly what I was looking for. I'm just going to mod the CSS a slight bit and I'll be good to go. Thanks again, and congradulations on Web Designer of the Year for 2004!


Bookmarks

Posting Permissions

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