Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to make cells hightlight... 1

Status
Not open for further replies.
Dre313

Dre313

Technical User
Jun 4, 2003
219
US
I'm having a problem with some code my friend gave me.. When you mouse over the navigation bar and the menu drops.. I want the menu to instead of highlighting just the word.. I want it to highlight the entire cell.. ie.. say I mouse over the first nav bar and the menu drops down when i move the mouse over to the first cell "html" i dont want just html hightlighted but that one cell highlighted.. then the same for the next..

Also, you see how each sub-menu cell is divided, is there a way you can fill in the empty translucent dividers..

heres my code::

<html>

<head>
<style>

a:hover{
text-decoration:none;
background:#FFDEAD;
color:white;}
A {
color:royalblue;
text-decoration:none;
font:normal 10pt Verdana, Arial;
background:;
}

td.menu{background:eek:range}

table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>

<script type=&quot;text/javascript&quot;>
function showmenu(elmnt)
{
document.all(elmnt).style.visibility=&quot;visible&quot;
}

function hidemenu(elmnt)
{
document.all(elmnt).style.visibility=&quot;hidden&quot;
}
</script>

</head>
<body bgcolor=&quot;#ffffff&quot;>

<table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; width=&quot;750&quot;>

<tr>

<td onmouseover=&quot;showmenu('menu1')&quot; onmouseout=&quot;hidemenu('menu1')&quot; width=&quot;115&quot; >
<img border=&quot;0&quot; src=&quot;business_logo.bmp&quot; width=&quot;125&quot; height=&quot;19&quot;><br />
<table class=&quot;menu&quot; id=&quot;menu1&quot; width=&quot;125&quot; height=&quot;35&quot;>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;78&quot;><a href=&quot;../html&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>HTML</a></font></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;78&quot;><a href=&quot;../xhtml&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XHTML</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;78&quot;><a href=&quot;../css&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>CSS</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;78&quot;><a href=&quot;../xml&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XML</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;78&quot;><a href=&quot;../xsl&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XSL</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;78&quot;><a href=&quot;../xsl&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XSL</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;78&quot;><a href=&quot;../xsl&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XSL</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;1&quot; width=&quot;78&quot;><a href=&quot;../xsl&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XSL</a></td></tr>
</table>
</td>
<td onmouseover=&quot;showmenu('menu2')&quot; onmouseout=&quot;hidemenu('menu2')&quot; width=&quot;611&quot; >
<img border=&quot;0&quot; src=&quot;teams_logo.bmp&quot; width=&quot;125&quot; height=&quot;19&quot;><br />
<table class=&quot;menu&quot; id=&quot;menu2&quot; width=&quot;124&quot; height=&quot;35&quot;>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;116&quot;><a href=&quot;../html&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>HTML</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;116&quot;><a href=&quot;../xhtml&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XHTML</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;116&quot;><a href=&quot;../css&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>CSS</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;116&quot;><a href=&quot;../xml&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XML</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;116&quot;><a href=&quot;../xsl&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XSL</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;116&quot;><a href=&quot;../xsl&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XSL</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;18&quot; width=&quot;116&quot;><a href=&quot;../xsl&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XSL</a></td></tr>
<tr><td class=&quot;menu&quot; height=&quot;1&quot; width=&quot;116&quot;><a href=&quot;../xsl&quot;><font color=&quot;#000000&quot; size=&quot;1&quot;>XSL</a></td></tr>
</table>
</td>
</table>

</body>

thanks,
 
Sort by date Sort by votes
First if you are using CSS why inside the <A> tags you have a Font????
just define your <A> with a class name.
like

<A class=&quot;navMenu&quot; href........>
then in your style definition have a style for it

A.navMenu

for hover
A.navMenu:hover

This new code has less to maintain and is more readable I think.
<html>

<head>
<style>

a.menuNav {
color:royalblue;
text-decoration:none;
font:normal 10pt Verdana, Arial;
background:eek:range;
width:100%;
height:100%;
padding:3 2 3 2;/*use this here to give the space between links. (top,right,bottom,left)*/
}
a.menuNav:hover{
text-decoration:none;
background:#FFDEAD;
color:white;
}


table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>

<script type=&quot;text/javascript&quot;>
function showmenu(elmnt)
{
document.all(elmnt).style.visibility=&quot;visible&quot;
}

function hidemenu(elmnt)
{
document.all(elmnt).style.visibility=&quot;hidden&quot;
}
</script>

</head>
<body bgcolor=&quot;#ffffff&quot;>

<table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; width=&quot;750&quot;>

<tr>

<td onmouseover=&quot;showmenu('menu1')&quot; onmouseout=&quot;hidemenu('menu1')&quot; width=&quot;115&quot; >
<img border=&quot;0&quot; src=&quot;business_logo.bmp&quot; width=&quot;125&quot; height=&quot;19&quot;><br />
<table class=&quot;menu&quot; id=&quot;menu1&quot; width=&quot;125&quot; height=&quot;35&quot;>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../html&quot;>HTML</a></font></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xhtml&quot;>XHTML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../css&quot;>CSS</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xml&quot;>XML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
</table>
</td>
<td onmouseover=&quot;showmenu('menu2')&quot; onmouseout=&quot;hidemenu('menu2')&quot; width=&quot;611&quot; >
<img border=&quot;0&quot; src=&quot;teams_logo.bmp&quot; width=&quot;125&quot; height=&quot;19&quot;><br />
<table class=&quot;menu&quot; id=&quot;menu2&quot; width=&quot;124&quot; height=&quot;35&quot;>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../html&quot;>HTML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xhtml&quot;>XHTML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../css&quot;>CSS</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xml&quot;>XML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
</table>
</td>
</table>

</body>

</html>

did it work?

grtfercho çB^]\..
&quot;Imagination is more important than Knowledge&quot; A. Einstein
 
Upvote 0 Downvote
Thanks .. works great.. but do you see how each sub-menu is divided? Is there a way I could fill in a color.. rite now its translucent .. like if i have a picture, those spaces (dividers) between the sub-menu I can see. So what I'm asking is there a way I can fill it in?

thanks
 
Upvote 0 Downvote
changes are bold try this I think you'll like it.



<html>

<head>
<style>

a.menuNav {
color:royalblue;
text-decoration:none;
font:bold 10pt Verdana, Arial;
background:eek:range;
width:100%;
padding:2 2 2 2;/*use this here to give the space between links. (top,right,bottom,left)*/
border:thin solid black;

}
a.menuNav:hover{
text-decoration:none;
background:#FFDEAD;
color:black;
border:thin solid orange;
}


table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
background-color:yellow; /* change here the color of your background*/
background-image:url(myimage.gif);/* here insert an image of your choice*/
}

</style>

<script type=&quot;text/javascript&quot;>
function showmenu(elmnt)
{
document.all(elmnt).style.visibility=&quot;visible&quot;
}

function hidemenu(elmnt)
{
document.all(elmnt).style.visibility=&quot;hidden&quot;
}
</script>

</head>
<body bgcolor=&quot;#ffffff&quot;>

<table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; width=&quot;750&quot;>

<tr>

<td onmouseover=&quot;showmenu('menu1')&quot; onmouseout=&quot;hidemenu('menu1')&quot; width=&quot;115&quot;>
<img border=&quot;0&quot; src=&quot;business_logo.bmp&quot; width=&quot;125&quot; height=&quot;19&quot;><br />
<table class=&quot;menu&quot; id=&quot;menu1&quot; width=&quot;125&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; >
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../html&quot;>HTML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xhtml&quot;>XHTML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../css&quot;>CSS</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xml&quot;>XML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
</table>
</td>
<td onmouseover=&quot;showmenu('menu2')&quot; onmouseout=&quot;hidemenu('menu2')&quot; width=&quot;611&quot; >
<img border=&quot;0&quot; src=&quot;teams_logo.bmp&quot; width=&quot;125&quot; height=&quot;19&quot;><br />
<table class=&quot;menu&quot; id=&quot;menu2&quot; width=&quot;124&quot; height=&quot;35&quot;>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../html&quot;>HTML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xhtml&quot;>XHTML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../css&quot;>CSS</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xml&quot;>XML</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xsl&quot;>XSL</a></td></tr>
</table>
</td>
</tr>
</table>

</body>



grtfercho çB^]\..
&quot;Imagination is more important than Knowledge&quot; A. Einstein
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

ControlNovice
  • Locked
  • Question
Any plans to add AppSheet programming to this list?
Replies
0
Views
205
ControlNovice
ControlNovice
rk0000
  • Locked
  • Question
Wordpress: Unable to view icons next to “Hide Controls” in admin customize.php
Replies
0
Views
165
rk0000
rk0000
tyutghf
  • Locked
  • Question
Chat to current website visitors together
Replies
1
Views
208
antanasdeg
antanasdeg
Nyanja
  • Locked
  • Question
JavaScript Makepdf
Replies
0
Views
184
Nyanja
Nyanja
ycubed10
  • Locked
  • Question
Faulty web tool: Bloconomics
Replies
0
Views
172
ycubed10
ycubed10

Part and Inventory Search

Sponsor

Back
Top