5 replies [Last post]
meherbala
meherbala's picture
Offline
newbie
Mumbai
Last seen: 9 years 51 weeks ago
Mumbai
Timezone: GMT+5.5
Joined: 2009-12-14
Posts: 3
Points: 4

hi,

I am create a template in joomla 1.5.

I have create a div called #divTopMenu which calls the Main Menu Item.
For styling the main menu i have used the following code:

#divTopMenu ul{
list-style: none;
margin: 0;
padding: 0;
}

#divTopMenu ul li{
margin: 0px 15px 0px 0px;
float: left;
display:inline;
}

#divTopMenu ul li a:link, a:active, a:hover, a:visited{
display: block;
padding: 5px;
color:#FFFFFF;
text-decoration: none;

font-family:Arial, Helvetica, sans-serif;
font-size:14pt;
}

Now when i add the Login Module i want to even style the links in those module. The name of the div in which the login module is placed is named as #divHorzLogin.

In this div i am trying to use Cascading effect (all the links present under Login Module div will get style differently)
The code to style the Login Module links (a href) is as follows:

#divHorzLogin a:link, a:active, a:hover, a:visited{
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
font-weight:normal;
color:#B15E76;
}

#divHorzLogin a:link, a:active, a:hover, a:visited{
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
font-weight:normal;
color:#B15E76;
}

#divHorzLogin a:link, a:active, a:hover, a:visited{
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
font-weight:normal;
color:#B15E76;
}

My problem is as soon as i style the Login Module links, the Main Menu links takes the effect of Login Module and cancel the effect given to the Main Module div. This should not happen?

I am not being able to figure out what is doing wrong? Plz can some one help. Its very urgent

Thank You.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 12 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

try doing it like

try doing it like this...

#divHorzLogin a:link, 
#divHorzLogin a:visited, 
#divHorzLogin a:hover, 
#divHorzLogin a:active {
  font-family:Arial, Helvetica, sans-serif;
  font-size:10pt;
  font-weight:normal;
  color:#B15E76;
}

meherbala
meherbala's picture
Offline
newbie
Mumbai
Last seen: 9 years 51 weeks ago
Mumbai
Timezone: GMT+5.5
Joined: 2009-12-14
Posts: 3
Points: 4

hi thanks u for the reply.

hi thanks u for the reply.

cant i put all the a:link, a:visited, a:hover, a:active in all one line with the respective div name? If u can plz provide an explanation. The Page is CSS and XHTML Validated.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 8 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote: cant i put all the

Quote:

cant i put all the a:link, a:visited, a:hover, a:active in all one line with the respective div name? If u can plz provide an explanation.

Nope, you can't. Here is what your cade said, but now I'm going to separate them for readability:

#divTopMenu ul li a:link {
 display: block;
padding: 5px;
color:#FFFFFF;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14pt;
}
a:active {
 display: block;
padding: 5px;
color:#FFFFFF;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14pt;
} 
a:hover {
 display: block;
padding: 5px;
color:#FFFFFF;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14pt;
} 
a:visited {
 display: block;
padding: 5px;
color:#FFFFFF;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14pt;
}

That's how a browser reads your code. The comma is just so you and I can put them all on one line.

So Cupid's method solves this, by making you state the specifics for every single state.

However I'd say BALLZ to all that work. Why do you list all the states??

If you just said:

#divTopMenu ul a {
 display: block;
padding: 5px;
color:#FFFFFF;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
font-size:14pt;
}

You'd hit them all. Then you only need to mention the other states when you need something different to happen:
#divTopMenu ul a:hover, #dovTopMenu ul a:focus {
text-decoration: underline;
color:#F00;
}

Coding more than you have to causes headaches, diabetes and cancer in us all. By stating the specific pseudo-classes of the anchors, you didn't take advantage of the cascade and inheritance: the pseudo-classes can inherit from "a" alone.

I'm no expert, but I fake one on teh Internets

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 4 years 12 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

touché, bravo!

touché, bravo!

meherbala
meherbala's picture
Offline
newbie
Mumbai
Last seen: 9 years 51 weeks ago
Mumbai
Timezone: GMT+5.5
Joined: 2009-12-14
Posts: 3
Points: 4

Thanks you for the

Thanks you for the explanation................ Smile