Forums

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

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

#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

a:visited {
color: white;
}

should of been

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

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

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;
}

treehouse : what would you like to learn today?

Forums

[Solved] Link Colors