set <a> style with id & class …???

@alexthecattaJan 25.2006

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

[code=html]#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;}[/code]

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!

to post a comment

CSS

6 Comments(s) _↴

@toicontienJan 25.2006 — #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.

@alexthecattaauthorJan 25.2006 — #go to

http://www.cattaneoalessandro.com/pages/cittadino.htm

the horizontal navigation bar works fine and it use the following CSS code (in generale.css)

[code=html]
 
 #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;}[/code]

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

@alexthecattaauthorJan 26.2006 — #guys please help!

@toicontienJan 26.2006 — #You have the .menulaterale declaration being overridden by declarations with a higher priority, namely, the following declarations override .menulaterale:

[code=html]
 #divSx ul a:link, #divSx ul a:visited, #divSx ul a:active {
 ...
 }
 [/code]

Remember that .menulaterale also is attached to an <a> tag with psuedo-classes, like :link, :active, and :hover. So what you want is:

[code=html]
 #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) */
 }
 [/code]

That should work.

@FangJan 26.2006 — #Change these:

[COLOR=Green]#divSx ul a[/COLOR].menulaterale {
 display:block;
 [COLOR=Green]color:#0099FF;[/COLOR]
 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;
 [COLOR=Green]background-color:#FFFFFF;[/COLOR]
 }
 #divSx ul a:hover {
 display:block;
 [COLOR=Green]color:#0099FF;[/COLOR]
 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;
 }

@alexthecattaauthorJan 28.2006 — #thank u!!! ? now it's ok!

Also in #CSS _↴

Positioning a div relative to screen Is there anyone to get <p> with the same spacing in both IE and FF?Text Size/Word Press

Success!

Help @alexthecatta spread the word by sharing this article on Twitter...

Tweet This

set <a> style with id & class …???

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

set <a> style with id & class …???

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴