rollover image in a div does not work

[Harry Bellafonte]

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?);}

 

[Jonathan N. Little]

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"

 

[Harry Bellafonte]

^^^^^^^^

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

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.

 

[Ben C]

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.

 

[John Hosking]

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>

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.

 

[Harry Bellafonte]

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>

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.

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;
}

 

[John Hosking]

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]

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>

 

[Blinky the Shark]

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]

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

 

[dorayme]

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:

<

>

 

[Neredbojias]

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

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

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

 

[Harry Bellafonte]

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:

<

>

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

 

[Jonathan N. Little]

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...

 

[Harry Bellafonte]

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...

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

 

[Jonathan N. Little]

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?

http://www.google.com/search?hl=en&q=free+web+hosting&btnG=Google+Search
free web hosting - Google Search