rollover image in a div does not work

Discussion in 'HTML' started by Harry Bellafonte, Oct 13, 2007.

  1. Hi

    I have menu list that are in div tags. I want an image to appear when
    I move over the menu item or click on it. I am trying it with the html
    code and css style below. It does not work, the image is not
    appearing. What must I change in my html or css code?

    <div class="menutitle active"><a href="/wps/wcm/connect/nl/
    Products/">Products</a></div>
    <div class="menutitle "><a href="/wps/wcm/connect/nl/Producten/Real-
    estate/">Real-estate</a>
    </div>
    <div class="menutitle ">
    <a href="/wps/wcm/connect/nl/Products/Stationary/">Stationary</a>
    </div>
    <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
    Decoration/">Decoration</a></div>
    <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
    Toys/">Toys</a></div>
    <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
    Sport/">Sport</a></div>
    <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
    Equipment/">Equipment</a>
    </div>

    div#menutitle a:active{background-image: url(/wps/wcm/connect/
    button_rollover_state.jpg?);}
     
    Harry Bellafonte, Oct 13, 2007
    #1
    1. Advertising

  2. Harry Bellafonte wrote:
    > Hi
    >
    > I have menu list that are in div tags. I want an image to appear when
    > I move over the menu item

    ^^^^^^^^^^^^^^^^^^^^^^^^^

    > div#menutitle a:active{background-image: url(/wps/wcm/connect/

    ^^^^^^^^

    The pseudo-class is :hover for a "mouseover"

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 13, 2007
    #2
    1. Advertising

  3. On 13 okt, 21:28, "Jonathan N. Little" <> wrote:
    > Harry Bellafonte wrote:
    > > Hi

    >
    > > I have menu list that are in div tags. I want an image to appear when
    > > I move over the menu item

    >
    > ^^^^^^^^^^^^^^^^^^^^^^^^^
    >
    > > div#menutitle a:active{background-image: url(/wps/wcm/connect/

    >
    > ^^^^^^^^
    >
    > The pseudo-class is :hover for a "mouseover"
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Hi

    I have changed the css to

    div#menutitle a:hover{background-image: url(/wps/wcm/connect/
    button_rollover_state.jpg?);}

    but it still does not work.
     
    Harry Bellafonte, Oct 13, 2007
    #3
  4. Harry Bellafonte

    Ben C Guest

    On 2007-10-13, Harry Bellafonte <> wrote:
    > On 13 okt, 21:28, "Jonathan N. Little" <> wrote:

    [...]
    > div#menutitle a:hover{background-image: url(/wps/wcm/connect/
    > button_rollover_state.jpg?);}
    >
    > but it still does not work.


    Menutitle is a class not an id, so you need div.menutitle, not
    div#menutitle. And you do want :hover.
     
    Ben C, Oct 13, 2007
    #4
  5. Harry Bellafonte

    John Hosking Guest

    Harry Bellafonte wrote:
    > Hi
    >
    > I have menu list that are in div tags.


    If it's alist, where are the <ul> and <li> elements?

    > I want an image to appear when
    > I move over the menu item or click on it. I am trying it with the html
    > code and css style below. It does not work, the image is not
    > appearing. What must I change in my html or css code?
    >
    > <div class="menutitle active">
    > <a href="/wps/wcm/connect/nl/Products/">Products</a>
    > </div>


    Maybe you'd prefer <div class="menutitle" id="active">.

    [snippage]

    > <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
    > Equipment/">Equipment</a>
    > </div>
    >
    > div#menutitle a:active{background-image: url(/wps/wcm/connect/
    > button_rollover_state.jpg?);}


    div#menutitle refers to div(s) with an id of menutitle, but you don't
    have any of those. For the markup you typed or pasted here, a better
    rule would look like:

    div.menutitle a:hover {
    background-image: url(/wps/wcm/connect/button_rollover_state.jpg);}

    Note that my CSS lacks question marks. I would get rid of extra spaces
    in my markup's class names, too. Have you validated your actual code
    (HTML and CSS)?

    HTH.

    --
    John
    Trying so hard to ignore posts from GoogleGroups.
    UIP: http://improve-usenet.org/
     
    John Hosking, Oct 13, 2007
    #5
  6. On 13 okt, 22:15, John Hosking <>
    wrote:
    > Harry Bellafonte wrote:
    > > Hi

    >
    > > I have menu list that are in div tags.

    >
    > If it's alist, where are the <ul> and <li> elements?
    >
    > > I want an image to appear when
    > > I move over the menu item or click on it. I am trying it with the html
    > > code and css style below. It does not work, the image is not
    > > appearing. What must I change in my html or css code?

    >
    > > <div class="menutitle active">
    > > <a href="/wps/wcm/connect/nl/Products/">Products</a>
    > > </div>

    >
    > Maybe you'd prefer <div class="menutitle" id="active">.
    >
    > [snippage]
    >
    > > <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
    > > Equipment/">Equipment</a>
    > > </div>

    >
    > > div#menutitle a:active{background-image: url(/wps/wcm/connect/
    > > button_rollover_state.jpg?);}

    >
    > div#menutitle refers to div(s) with an id of menutitle, but you don't
    > have any of those. For the markup you typed or pasted here, a better
    > rule would look like:
    >
    > div.menutitle a:hover {
    > background-image: url(/wps/wcm/connect/button_rollover_state.jpg);}
    >
    > Note that my CSS lacks question marks. I would get rid of extra spaces
    > in my markup's class names, too. Have you validated your actual code
    > (HTML and CSS)?
    >
    > HTH.
    >
    > --
    > John
    > Trying so hard to ignore posts from GoogleGroups.
    > UIP:http://improve-usenet.org/


    ok, here is the rest of the code that deals with the menu list:

    <td class="ver_nav" width=300>
    <div id="masterdiv" width=300>
    <div class="menutitle active"><a href="/wps/wcm/connect/nl/
    Products/">Products</a></div>
    <div class="menutitle "><a href="/wps/wcm/connect/nl/Producten/Real-
    estate/">Real-estate</a>
    </div>
    <div class="menutitle ">
    <a href="/wps/wcm/connect/nl/Products/Stationary/">Stationary</a>
    </div>
    <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
    Decoration/">Decoration</a></div>
    <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
    Toys/">Toys</a></div>
    <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
    Sport/">Sport</a></div>
    <div class="menutitle "><a href="/wps/wcm/connect/nl/Products/
    Equipment/">Equipment</a>
    </div></div></td>

    And here are all css that has to do with the id and class of the div
    tags:
    div.menutitle a:hover{background-image: url(/wps/wcm/connect/
    button_rollover_state.jpg);}
    ..ver_nav #masterdiv ul, .ver_nav #masterdiv ul li ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    }

    ..ver_nav #masterdiv ul li a, .ver_nav #masterdiv ul li ul li a{
    display: block;
    width: 161px;
    min-height: 24px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    line-height: 22px;
    margin: 0 0 1px 0;
    padding: 0 0 0 0;
    background-repeat: no-repeat;
    background-color: #5E73C2;
    }

    ..ver_nav #masterdiv ul li ul li a{
    font-weight: normal;
    color: #000000;
    margin: 0;
    padding: 0 0 0 7px;
    line-height: 22px;
    background-repeat: no-repeat;
    background-color: #FFF;
    }

    * html .ver_nav #masterdiv ul li a,
    * html .ver_nav #masterdiv ul li ul li a{
    height: 24px;
    }
    ..ver_nav,.ver_nav_wide {
    width: 178px;
    height: 350px;
    padding-left: 9px;
    padding-right: 0px;
    background-color: #FFFFFF;
    vertical-align: top;
    }

    ..ver_nav_narrow{
    width: 78px;
    }
    #masterdiv .active{
    background-color: #000;
    }
     
    Harry Bellafonte, Oct 13, 2007
    #6
  7. Harry Bellafonte

    John Hosking Guest

    Harry Bellafonte wrote:
    > On 13 okt, 22:15, John Hosking wrote:


    [my entire previous post, quoted in full (but who really expected
    anything different?), snipped, except for my sig, which the OP quoted
    but ignored]

    >>
    >> HTH.
    >>
    >> --
    >> John
    >> Trying so hard to ignore posts from GoogleGroups.
    >> UIP: http://improve-usenet.org/


    Burned again. I'm *such* a slow learner.

    >
    > ok, here is the rest of the code that deals with the menu list:


    [some partial markup that nobody asked for and even fewer people want to
    see, snipped]

    > And here are all css that has to do with the id and class of the div
    > tags:


    [Similarly unexpected and undesired CSS likewise snipped.]

    Why did you post this? (<== a mostly rhetorical question)

    For future posts: <http://www.xs4all.nl/~wijnands/nnq/nquote.html>


    --
    John
    Seeing that Blinky's right *sigh*
    UIP: http://improve-usenet.org/
     
    John Hosking, Oct 13, 2007
    #7
  8. John Hosking wrote:
    > Harry Bellafonte wrote:
    >> On 13 okt, 22:15, John Hosking wrote:

    >
    > [my entire previous post, quoted in full (but who really expected
    > anything different?), snipped, except for my sig, which the OP quoted
    > but ignored]
    >
    >>>
    >>> HTH.
    >>>
    >>> --
    >>> John
    >>> Trying so hard to ignore posts from GoogleGroups.
    >>> UIP: http://improve-usenet.org/

    >
    > Burned again. I'm *such* a slow learner.


    :)


    --
    Blinky RLU 297263
    Killing all posts from Google Groups
    The Usenet Improvement Project - http://improve-usenet.org
     
    Blinky the Shark, Oct 13, 2007
    #8
  9. Harry Bellafonte

    dorayme Guest

    In article <47113e61$>,
    John Hosking <> wrote:

    > Harry Bellafonte wrote:
    > > On 13 okt, 22:15, John Hosking wrote:


    > For future posts: <http://www.xs4all.nl/~wijnands/nnq/nquote.html>
    >


    Harry, Ben C and JH added further to JL's advice salient to your
    query, the time has now come for a URL if things are not working
    and you have followed advice. Failure to do so - Harry - might
    cause the following frightening thing (towards the end of the
    clip) to happen to you next time you are sitting at a dining
    table:

    <http://www.youtube.com/watch?v=joa3WiXDuEg>

    --
    dorayme
     
    dorayme, Oct 14, 2007
    #9
  10. Harry Bellafonte

    Neredbojias Guest

    Well bust mah britches and call me cheeky, on Sat, 13 Oct 2007 21:54:41 GMT
    John Hosking scribed:

    > Harry Bellafonte wrote:
    >> On 13 okt, 22:15, John Hosking wrote:
    >> <snip>


    > Burned again. I'm *such* a slow learner.


    Best chuckle I've had since dorayme tried to explain English grammar.

    --
    Neredbojias
    Half lies are worth twice as much as whole lies.
     
    Neredbojias, Oct 14, 2007
    #10
  11. On 14 okt, 01:50, dorayme <> wrote:
    > In article <47113e61$>,
    > John Hosking <> wrote:
    >
    > > Harry Bellafonte wrote:
    > > > On 13 okt, 22:15, John Hosking wrote:

    > > For future posts: <http://www.xs4all.nl/~wijnands/nnq/nquote.html>

    >
    > Harry, Ben C and JH added further to JL's advice salient to your
    > query, the time has now come for a URL if things are not working
    > and you have followed advice. Failure to do so - Harry - might
    > cause the following frightening thing (towards the end of the
    > clip) to happen to you next time you are sitting at a dining
    > table:
    >
    > <http://www.youtube.com/watch?v=joa3WiXDuEg>
    >
    > --
    > dorayme


    Hi

    Excuse me for not following the rules of this forum. My english is not
    that perfect. I did what was told me to do but it did not worked. The
    reason I posted more html and css code was in order to let you know
    what I have done wrong. But probably that was a bad move looking at
    all the reactions that followed my last post.

    Regards
     
    Harry Bellafonte, Oct 14, 2007
    #11
  12. Harry Bellafonte wrote:

    > Hi
    >
    > Excuse me for not following the rules of this forum. My english is not
    > that perfect. I did what was told me to do but it did not worked. The
    > reason I posted more html and css code was in order to let you know
    > what I have done wrong. But probably that was a bad move looking at
    > all the reactions that followed my last post.


    Harry a tip, since you are have problems most likely your do not know
    where the problem is located else your would have corrected it. There is
    a good chance the problem is *not* located in the fragment that you
    supply. Now *don't* post the code of the whole page, but a URL|link|web
    address *to* the page on your site that show the problem. If it is only
    on your hard drive then upload it to a temporary place on your website.
    Then and only then will we have a chance of seen where the problem lies...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Oct 14, 2007
    #12
  13. On 14 okt, 15:03, "Jonathan N. Little" <> wrote:
    > Harry Bellafonte wrote:
    > > Hi

    >
    > > Excuse me for not following the rules of this forum. My english is not
    > > that perfect. I did what was told me to do but it did not worked. The
    > > reason I posted more html and css code was in order to let you know
    > > what I have done wrong. But probably that was a bad move looking at
    > > all the reactions that followed my last post.

    >
    > Harry a tip, since you are have problems most likely your do not know
    > where the problem is located else your would have corrected it. There is
    > a good chance the problem is *not* located in the fragment that you
    > supply. Now *don't* post the code of the whole page, but a URL|link|web
    > address *to* the page on your site that show the problem. If it is only
    > on your hard drive then upload it to a temporary place on your website.
    > Then and only then will we have a chance of seen where the problem lies...
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com


    Hi

    The problem is that I don't have a temporary website where I can
    upload the URL address to. Is there another way I can let you see
    where the problem lies?

    Regards
     
    Harry Bellafonte, Oct 14, 2007
    #13
  14. Jonathan N. Little, Oct 14, 2007
    #14
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    755
  2. Koh
    Replies:
    2
    Views:
    196
    Thomas 'PointedEars' Lahn
    May 11, 2004
  3. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    194
    David Dorward
    Jun 1, 2005
  4. Mark Szlazak
    Replies:
    3
    Views:
    178
    Fletch
    Apr 25, 2006
  5. Dan
    Replies:
    3
    Views:
    131
Loading...

Share This Page