|
|
Posted by Harry Bellafonte on 10/13/07 20:56
On 13 okt, 22:15, John Hosking <J...@DELETE.Hosking.name.INVALID>
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;
}
[Back to original message]
|