spyder
02-24-2008, 12:50 AM
i am no expert in css, and need all the help i can get. i am making a menu. the menu is pretty simple, just a bunch of buttons in a row. so heres my predicament. i want to have rounded corners on the buttons, but i dont want the buttons to be graphics. my idea was to have a table with 1 <tr> and 3 <td>'s. in the first and third td i was planning on putting a graphic that had rounded corners on the top and bottom. in the middle td there would be the text for the link. i dont know how to tell it to change the pictures (to different colored pictures) on the two side columns when i mouseover the link. hope thats not too confusing. here is a simplified 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">
a.menu:link, a.menu:visited, a.menu:active, a.menu:hover {
background-color:#FF0000;
display:block;
}
a.menu:hover {
background-color:#0000FF;
display:block;
}
a.menu2:link, a.menu2:visited, a.menu2:active, a.menu2:hover {
background-color:#FFCC33;
display:block;
}
a.menu2:hover {
background-color:#993399;
display:block;
}
</style>
</head>
<body>
<table cellspacing="0px" cellpadding="0px">
<tr>
<td><a class="menu" href="URL">
<table border="1" width="100px" height="100px">
<tr>
<td></td>
<td><center>
LINK
</center></td>
<td></td>
</tr>
</table>
</a></td>
<td><a class="menu2" href="URL">
<table border="1" width="100px" height="100px">
<tr>
<td></td>
<td><center>
LINK
</center></td>
<td></td>
</tr>
</table>
</a></td>
</tr>
</table>
</body>
</html>
<!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">
a.menu:link, a.menu:visited, a.menu:active, a.menu:hover {
background-color:#FF0000;
display:block;
}
a.menu:hover {
background-color:#0000FF;
display:block;
}
a.menu2:link, a.menu2:visited, a.menu2:active, a.menu2:hover {
background-color:#FFCC33;
display:block;
}
a.menu2:hover {
background-color:#993399;
display:block;
}
</style>
</head>
<body>
<table cellspacing="0px" cellpadding="0px">
<tr>
<td><a class="menu" href="URL">
<table border="1" width="100px" height="100px">
<tr>
<td></td>
<td><center>
LINK
</center></td>
<td></td>
</tr>
</table>
</a></td>
<td><a class="menu2" href="URL">
<table border="1" width="100px" height="100px">
<tr>
<td></td>
<td><center>
LINK
</center></td>
<td></td>
</tr>
</table>
</a></td>
</tr>
</table>
</body>
</html>