CODEWITHSUNDEEP
css
Drea
Drea

Reputation: 61

Need the CSS a.tag is not cooperating

This site is turning into a mess. I can't seem to get the left side navigation to look the way I want.

I think it's something simple but I can't see it.

this is the CSS:

a.col1:link {color:#FFF}      /* unvisited link */
a.col1:visited {color:#00F}  /* visited link */
a.col1:hover {color:#FF0}  /* mouse over link */
a.col1:active {color:#00F}  /* selected link */

here is the html:

<ul class="col1"><li><a href="see_autos.asp>car</a></li></ul>

Upvotes: 0

Views: 74

Answers (4)

JYelton
JYelton

Reputation: 36512

Since the anchor is a child of the unordered list, your css should specify child anchors of the unordered list as such:

.col1 a:link
{
    color...
}

Upvotes: 0

BalusC
BalusC

Reputation: 1108712

Your CSS expects the col1 to be a class of the <a> element. But you have assigned it to the <ul> element. So to fix this you need to change HTML as follows

<ul><li><a href="see_autos.asp" class="col1">car</a></li></ul>

so that it is assigned to the right element, or to change CSS as follows

ul.col1 a:link {color:#FFF}      /* unvisited link */
ul.col1 a:visited {color:#00F}  /* visited link */
ul.col1 a:hover {color:#FF0}  /* mouse over link */
ul.col1 a:active {color:#00F}  /* selected link */

so that it is assigned to any child <a> elements of the <ul class="col1"> element.

Upvotes: 1

Paul Tarjan
Paul Tarjan

Reputation: 50602

First you need a " to end your href.

Second, your class is not on your a, it is on the parent, so your css should be something like

.col1 a:link {color:#FFF}

Third, please don't name it col1, a semantic name is better left-nav or sidebar is better.

Upvotes: 5

micahwittman
micahwittman

Reputation: 12476

You need to apply the styles of the CSS pseudo-class directly to the A tags themselves. As you show, they are descendants of the UL LI tags in your structure, so that's how you can select them.

ul.col1 li a:link {color:#FFF}      /* unvisited link */
ul.col1 li a:visited {color:#00F}  /* visited link */
ul.col1 li a:hover {color:#FF0}  /* mouse over link */
ul.col1 li a:active {color:#00F}  /* selected link */

Upvotes: 2

Related Questions