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 13 of 13

Thread: Hover Problem

  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hover Problem

    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.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Nope. I get a page not found.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Loz
    Loz is offline
    New Coder
    Join Date
    Oct 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <!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>
    Last edited by _Aerospace_Eng_; 10-07-2006 at 11:25 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The URL needs to exclude the "www". Don't know why. The corrected URL is:

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

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yeah I figured that out. Did you try the code I gave you?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Oct 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Loz
    Loz is offline
    New Coder
    Join Date
    Oct 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    }

  • #9
    Loz
    Loz is offline
    New Coder
    Join Date
    Oct 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by doug2r View Post
    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.

  • #10
    Loz
    Loz is offline
    New Coder
    Join Date
    Oct 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    The scrollbar should scroll down in the code box.
    I uploaded it to my test server
    http://pr2006.freehostia.com/ecommerce.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #12
    New Coder
    Join Date
    Oct 2006
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #13
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    I didn't say that but it probably would have if you used th.NavMenu instead.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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