...

View Full Version : Hover Problem



doug2r
10-07-2006, 07:17 PM
There is no hover when the cursor is passed over a Navigation menu item. The URL is:

http://www.home.comcast.net/~doug2r/Template.html


Any ideas?

Thanks.

_Aerospace_Eng_
10-07-2006, 10:28 PM
Nope. I get a page not found.

Loz
10-07-2006, 11:10 PM
You have to add the onmouseover attributes...

ie, this is a snippet of one of my sites css files.

td.hoveroff { background-image:url(../images/linkbutton.gif); }
td.hoveron { background-image:url(../images/linkbutton1.gif); }

then this is the page that has the links on them.

onmouseover="this.className='hoveron'" onmouseout="this.className='hoveroff'

the hoveron and hoveroff are then activated then loads the associating image file located in the css file.

Hope this helps.

_Aerospace_Eng_
10-07-2006, 11:28 PM
You don't need javascript to accomplish what you want. You just need to have valid coding. Currently your links aren't even in the td cells. Try this

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size:12px;
height:100%;
border:0;
}
a {
color:#FFF;
font-weight:bold;
text-decoration:none;
}
#container {
width:780px;
margin:auto;
min-height:100%;
background:#CCC;
}
* html #container {
height:100%;
}
#header {
color:#FF0;
background:#000;
text-align:center;
margin:0;
padding:0;
height:69px;
line-height:69px;
}

#navmenu {
margin:0;
padding:0;
list-style:none;
width:105px;
float:left;
}
* html #navmenu {
margin-right:-3px;
}
#navmenu li a {
color:#FFF;
background:#0080C0;
height:30px;
width:100px;
text-decoration :none;
padding-left:5px;
padding-top:5px;
font-weight:normal;
display:block;
line-height:30px;
}
#navmenu li a:hover {
background:#000;
color:#FF0;
}
#navmenu h1 {
margin:0;
padding:0;
text-align:center;
font-size:12px;
font-weight:normal;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#content {
margin-left:105px;
}
* html #content {
margin-left:0;
height:1%;
}
#content p {
margin:0;
padding:10px;
text-align:justify;
}
</style>
</head>
<body>
<div id="container">
<h1 id="header">e-commerce Help</h1>
<ul id="navmenu">
<li><a href="HomePage.html">Item 1</a></li>
<li><a href="PayPal.html">Item 2</a></li>
<li><a href="eBay.html">Item 3</a></li>
<li><a href="amazon.html">Item 4</a></li>
<li><a href="osCommerce.html">Item 5</a></li>
<li><a href="MivaMerchant.html">Item 6</a></li>
<li><a href="Cost.html">Item 7</a></li>
<li><a href="Downloads.html">Item 8</a></li>
<li><a href="Support.html">Item 9</a></li>
<li><a href="ContactUs.html">Item 10</a>
</ul>
<div id="content">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut rhoncus leo id dolor. In dapibus, nunc sed congue vestibulum, orci arcu rutrum odio, blandit ultrices sapien tellus eget quam. Aliquam molestie pede et mauris. Nullam ipsum. Nam condimentum. Nunc nisi. Aliquam erat volutpat. In et erat. Donec tellus justo, convallis pulvinar, bibendum in, luctus non, lacus. In hac habitasse platea dictumst. Duis eu diam id ipsum hendrerit scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc fermentum, dolor sed molestie egestas, magna nunc nonummy nunc, a tempor nunc turpis quis nibh. In laoreet, diam in ultrices ullamcorper, libero nulla pretium urna, et volutpat turpis magna eleifend diam. Aliquam quam ante, fermentum eu, pellentesque et, viverra non, tortor. Vestibulum iaculis diam eu augue. Vivamus cursus, augue id tempor eleifend, metus nisl posuere nibh, vel eleifend orci tellus sed sem. Aliquam sodales tincidunt arcu. </p>
<p> Suspendisse nec pede. Phasellus placerat leo nec sem. Proin nisl. Nam ac leo. Ut vel nibh. Ut vel eros at tellus euismod ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nullam nonummy leo a ipsum. Integer urna. Etiam ullamcorper leo at pede. Integer lacus risus, commodo congue, pharetra non, vestibulum pellentesque, turpis. Ut et erat. Quisque scelerisque, nisl in suscipit bibendum, est dolor eleifend massa, eget feugiat dolor turpis ut lacus. In ac velit at diam viverra mattis. In mollis. Nullam tristique, est a cursus eleifend, turpis tortor commodo est, eu pellentesque est velit in pede. In eros. Sed bibendum mauris ac dui. Vivamus sem elit, malesuada sit amet, consequat pulvinar, pulvinar non, urna. Integer commodo pretium eros. </p>
<p> Duis non nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus ut ipsum. Integer eget purus ut diam congue facilisis. Aenean sollicitudin arcu ut sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Suspendisse neque est, suscipit ut, sagittis non, consequat non, lorem. Mauris a ante. Cras pharetra. Suspendisse sit amet turpis ut erat euismod nonummy. In hac habitasse platea dictumst. Maecenas tortor sem, rhoncus facilisis, malesuada vel, venenatis vel, pede. Sed malesuada, tellus in suscipit fringilla, nisl velit volutpat elit, ac interdum mi elit fringilla nunc. Proin sed est quis libero ultrices tincidunt. Cras dictum, lacus sollicitudin sagittis faucibus, magna eros semper orci, sit amet adipiscing ligula turpis vitae tellus. Ut porttitor, odio ac rutrum scelerisque, metus metus mattis nisi, sit amet blandit ipsum est convallis ipsum. Fusce urna. </p>
</div>
</div>
</body>
</html>

doug2r
10-08-2006, 12:11 AM
The URL needs to exclude the "www". Don't know why. The corrected URL is:

http://home.comcast.net/~doug2r/Template.html

_Aerospace_Eng_
10-08-2006, 12:17 AM
Yeah I figured that out. Did you try the code I gave you?

doug2r
10-08-2006, 12:38 AM
I can only see your code part way through the style area. The last few lines I see are:

#header {
color:#FF0

The vertical scroll bar ends at that point.

Loz
10-08-2006, 12:44 AM
Try this. I noticed sometimes when I do these, that the order has to be like this.
link, then visited, then hover, then active. Some will argue that it doesn't matter. With all that as it may be, I've found that sometimes only this order will work.

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0000FF;
text-decoration: none;
}

a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0000FF;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #CC0000;
text-decoration: overline blink;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #0000FF;
text-decoration: none;
}

Loz
10-08-2006, 12:45 AM
I can only see your code part way through the style area. The last few lines I see are:

#header {
color:#FF0

The vertical scroll bar ends at that point.

Press the scroll bar and scroll down. Works fine in IE and firefox.

Loz
10-08-2006, 12:46 AM
Oh, Doug, I just noticed something. All of your text colors are white. that's why you don't see any hover.

and the white color has no W, it's all lower case. ;)

_Aerospace_Eng_
10-08-2006, 12:58 AM
The scrollbar should scroll down in the code box.
I uploaded it to my test server
http://pr2006.freehostia.com/ecommerce.html

doug2r
10-08-2006, 01:55 AM
Well, I finally figured out that I needed to scroll completely to the right on my 17 inch monitor to see the inside vertical scroll bar. I'm feeling a little stupid right now.

And, your HTML works perfectly. It does just what I wanted.

Now, I've got to figure out just how you did it. I have Eric Meyer's CSS book from O'Reilly, and I looked up the lines with starting # and learned they are ID selectors. And, you didn't use tables. My guess is you used layers, and Ill also need to dig into that. As I'm sure you can tell, I'm an HTML newbie, but it has been a lot of fun working with HTML

You initially mentioned that my HTML code wasn't working "Because it's taking the default style of a <th> unlike the other cells menu which are <td>'s. But, shouldn't the:

class="NavMenu"

have taken care of that. It obviously didn't, but I'd like to know why for future reference.

Thanks a bunch.

_Aerospace_Eng_
10-08-2006, 04:01 AM
I didn't say that but it probably would have if you used th.NavMenu instead.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum