I've already post this question...hope this time someone can help me.
i have a <UL> that works as a menu. Here is the CSS code
#divSx ul a:link, #divSx ul a:visited, #divSx ul a:active {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
margin-left:0px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-color: #0099FF;
}
.menulaterale {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#ffffff;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-image:url(../img/jpg/pallino_blu_22x22.jpg);
background-repeat:no-repeat;
background-position: right;
}
#divSx ul a:hover {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
margin-left:0px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-color: #ffffff;}
I use the class .menulaterale to set the <li> of the current page.
But it doesn't work. I see the background img but the background color it's wrong.
why?
i did the same for another nav bar setting the current page with a class and it works fine.
thanks...please help!We're also going to need the associated markup. Are you applying the .menulaterale class to the LI tags and wanting to change <a> tags?
If you have <li><a></a></li>, the <a> tags will appear over top of the <li> tags. Sounds like this is an issue of using the correct CSS selectors. But without the markup associated with your menu, we can't give you an exact answer.go to
<!-- m --><a class="postlink" href="http://www.cattaneoalessandro.com/pages/cittadino.htm">http://www.cattaneoalessandro.com/pages/cittadino.htm</a><!-- m -->
the horizontal navigation bar works fine and it use the following CSS code (in generale.css)
#divBreadcrumb ul a:link, #divBreadcrumb ul a:visited {
display:block;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration:none;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 3px;
padding-top: 8px;
font-weight: bold;
border: 2px solid #00CC33;
}
.attiva {
display:block;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration:none;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 3px;
padding-top: 8px;
font-weight: bold;
border: 2px solid;
border-top-color: #00CC33;
border-right-color: #00CC33;
border-left-color: #00CC33;
border-bottom-color: #000000;
background-color:#0099FF;
}
#divBreadcrumb ul a:hover {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
background-color:#FFFF00;
border: 2px solid #000000;}
.attiva is used to set the current page link style, and for what I see the structure of this CSS code is the same of the one I posted before, for the navigation that doesn't work.
The navigation that doesn't work is the vertical menu. I would like to have
blu back groung
on mouse over > white background with blu point
current page > white background with blu point
please help...guys please help!You have the .menulaterale declaration being overridden by declarations with a higher priority, namely, the following declarations override .menulaterale:
#divSx ul a:link, #divSx ul a:visited, #divSx ul a:active {
...
}
Remember that .menulaterale also is attached to an <a> tag with psuedo-classes, like :link, :active, and :hover. So what you want is:
#divSx ul a.menulaterale:link {
/* When current page link is not active, visited or hovered on */
}
#divSx ul a.menulaterale:visited {
/* When current page link has been visited */
}
#divSx ul a.menulaterale:focus {
/* When current page link has received focus */
}
#divSx ul a.menulaterale:hover {
/* When current page link is hovered on */
}
#divSx ul a.menulaterale:active {
/* When current page link is active (has been clicked) */
}
That should work.Change these:#divSx ul a.menulaterale {
display:block;
color:#0099FF;
text-decoration:none;
padding-right: 8px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#ffffff;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-image:url(../img/jpg/pallino_blu_22x22.jpg);
background-repeat:no-repeat;
background-position: right;
background-color:#FFFFFF;
}
#divSx ul a:hover {
display:block;
color:#0099FF;
text-decoration:none;
padding-right: 8px;
margin-left:0px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-color: #ffffff;
}thank u!!!
now it's ok!
i have a <UL> that works as a menu. Here is the CSS code
#divSx ul a:link, #divSx ul a:visited, #divSx ul a:active {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
margin-left:0px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-color: #0099FF;
}
.menulaterale {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#ffffff;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-image:url(../img/jpg/pallino_blu_22x22.jpg);
background-repeat:no-repeat;
background-position: right;
}
#divSx ul a:hover {
display:block;
color:#000000;
text-decoration:none;
padding-right: 8px;
margin-left:0px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-color: #ffffff;}
I use the class .menulaterale to set the <li> of the current page.
But it doesn't work. I see the background img but the background color it's wrong.
why?
i did the same for another nav bar setting the current page with a class and it works fine.
thanks...please help!We're also going to need the associated markup. Are you applying the .menulaterale class to the LI tags and wanting to change <a> tags?
If you have <li><a></a></li>, the <a> tags will appear over top of the <li> tags. Sounds like this is an issue of using the correct CSS selectors. But without the markup associated with your menu, we can't give you an exact answer.go to
<!-- m --><a class="postlink" href="http://www.cattaneoalessandro.com/pages/cittadino.htm">http://www.cattaneoalessandro.com/pages/cittadino.htm</a><!-- m -->
the horizontal navigation bar works fine and it use the following CSS code (in generale.css)
#divBreadcrumb ul a:link, #divBreadcrumb ul a:visited {
display:block;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration:none;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 3px;
padding-top: 8px;
font-weight: bold;
border: 2px solid #00CC33;
}
.attiva {
display:block;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration:none;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 3px;
padding-top: 8px;
font-weight: bold;
border: 2px solid;
border-top-color: #00CC33;
border-right-color: #00CC33;
border-left-color: #00CC33;
border-bottom-color: #000000;
background-color:#0099FF;
}
#divBreadcrumb ul a:hover {
font-family:Arial, Helvetica, sans-serif;
color:#000000;
background-color:#FFFF00;
border: 2px solid #000000;}
.attiva is used to set the current page link style, and for what I see the structure of this CSS code is the same of the one I posted before, for the navigation that doesn't work.
The navigation that doesn't work is the vertical menu. I would like to have
blu back groung
on mouse over > white background with blu point
current page > white background with blu point
please help...guys please help!You have the .menulaterale declaration being overridden by declarations with a higher priority, namely, the following declarations override .menulaterale:
#divSx ul a:link, #divSx ul a:visited, #divSx ul a:active {
...
}
Remember that .menulaterale also is attached to an <a> tag with psuedo-classes, like :link, :active, and :hover. So what you want is:
#divSx ul a.menulaterale:link {
/* When current page link is not active, visited or hovered on */
}
#divSx ul a.menulaterale:visited {
/* When current page link has been visited */
}
#divSx ul a.menulaterale:focus {
/* When current page link has received focus */
}
#divSx ul a.menulaterale:hover {
/* When current page link is hovered on */
}
#divSx ul a.menulaterale:active {
/* When current page link is active (has been clicked) */
}
That should work.Change these:#divSx ul a.menulaterale {
display:block;
color:#0099FF;
text-decoration:none;
padding-right: 8px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#ffffff;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-image:url(../img/jpg/pallino_blu_22x22.jpg);
background-repeat:no-repeat;
background-position: right;
background-color:#FFFFFF;
}
#divSx ul a:hover {
display:block;
color:#0099FF;
text-decoration:none;
padding-right: 8px;
margin-left:0px;
padding-bottom: 1px;
padding-top: 8px;
font-weight: bold;
border: 1px solid;
border-bottom-color:#666666;
border-top-color:#FFFFFF;
border-right-color:#FFFFFF;
border-left-color:#FFFFFF;
background-color: #ffffff;
}thank u!!!
now it's ok!