[Solved] Link Colors

[tingo]

Hi There!

Would someone be kind enough to help me please? I’m still very new to css

I’m modifying a joomla template

Link color is controled my this code below in the template

Quote:

a {
color: white;
text-decoration: none;
}

a:visited {
color: white;
}

a:hover {
text-decoration: none;
}

The problem I am having is when, I made a new id for the menu

I can change size and the font but, the colour of links stay the same

Quote:

#menu {
background-image: url(../images/nav_bg.png);
background-repeat: repeat-x;
margin-left:10px;
margin-right:10px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
font-variant: normal;
font-style: normal;
text-decoration: none;
}

Many Thank for your help and Kind Regards

Charles

[TheDoc]

Hi Charles,

You have white set to all of your font colour. What are you trying to accomplish?

[tingo]

Hi

Thank you for your help. Sorry the

Quote:

a:visited {
color: white;
}

should of been

Quote:

a:visited {
color: blue;
}

I’ve attached the file I am working to this post

I am trying to make the main menu links white and the menu link in the left and right module position blue.

I’ve deleted the old template.css and made this new one below

Quote:

body {
color:#000000;
border: 1px 1 #000000;

}

#header {
background-image: url(../images/header_bg.png);
background-repeat: repeat-x;
color:#FFFFFF;
height:94px;

}

#menu {
background-image: url(../images/nav_bg.png);
background-repeat: repeat-x;
color:#FFFFFF;

}

#footer {

background-image:url(../images/footer_bg.png)

}

but links are still the default color in the menu position. do you know how I change thier color to white please?

Many Thank for your help and time

Kind Regards

Charles

[bruizerbeans]

Correct me if I’m wrong but I believe you have to list

a:hover {
}

before

a:visited {

}

[doobie]

:link, :visited, :hover, :active = LoVe, HAte

http://css-tricks.com/snippets/css/link-pseudo-classes-in-order/

[tingo]

Thank you for your great help, I finally worked it out.

I found a list of nav css menu types here

http://css.maxdesign.com.au/listamatic/

I did it like this is in the end

Quote:

ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

[Author]

Posts