Re: rollover image in a div does not work

On 13 okt, 22:15, John Hosking <J...@xxxxxxxxxxxxxxxxxxxxxxxxxxx>
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;
}

.

Relevant Pages

  • Re: Style sheets not being applied
    ... Perhaps that's why, but I'm doubtful it's the reason, that none ... of my styles are being applied to my html. ... an faux pas I make, but given my html and css below, does anyone see ... background-color at the same time, ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: htmlhelp not referencing stylesheets when called from VB6 applicat
    ... The easy way would be to link the CSS and javascript files into each html ... Also make sure each .html doc has the appropriate DocType ... We are having problems with our merged HTML Help system. ... the CSS and JavaScript ...
    (microsoft.public.vb.general.discussion)
  • Re: coming back to html and web authoring after 9 years
    ... > changed site wide, with CSS it's only an external stylesheet, with tables, ... tables is a real release from tabling for layout like it used to be. ... then i checked out editors. ... TopStyle has its own HTML editor, ...
    (comp.infosystems.www.authoring.html)
  • Re: IE/Firefox XHTML Strict
    ... The http headers may reveal that the content-type of the css is not type/css. ... Here is the HTML: ... You have a 5 level deep nested divs and every div is styled: so, it become extremely difficult to figure out exactly what you are actually coding for. ...
    (alt.html)
  • Re: New site. Can anyone tell me if I am doing something potentially bad BEFORE I commit?
    ... HTML 4.01 Strict. ... You can adjust the line spacing in CSS later. ... 80% arial, tahoma, "Trebuchet MS", verdana, arial, verdana, ... Lists are lists ...
    (alt.html)