css links

[mattiasb]

Hello I have some css formatted class links that dont work! anybody who can see what I have done wrong?

<div ul id="topmeny">
<li><a href="#" class="linkstyle1">The International Academic Comittee</a></li><li> &nbsp;</li><li> &nbsp;</li>
<li><a href="#" class="linkstyle1">Important dates</a></li> <li> &nbsp;</li><li> &nbsp;</li>
<li><a href="#" class="linkstyle1">Call for proposals</a></li><li> &nbsp;</li><li> &nbsp;</li>
</ul> </div>


.linkstyle1

a:link { color:#999; text-decoration:none;}
a:visited { color:#C30; text-decoration: none; }
a:hover {color:#036; text-decoration: underline;}
a:active { text-decoration: underline;}

 

[darrenfox]

Your CSS is not correct.

Should be
a.linkstlye1:link

Listing .linkstyle1 above does not do anything.

A better way is to use an ID instead of CLASS.

CSS would like like this:
#linkstyle1 a:link

Then you can apply it to the UL like this:
<ul id="linkstyle1">

That way it applies it to every link with that tag rather than having to list a class for each li item.

 

[darrenfox]

<div ul id="topmeny"> should also not be combined.

 

[PixelPusher]

Couple errors,

• DIV and UL cannot be combined into one tag. (stated by darren)
  
• Really no need for a DIV... UL is a block element itself.
  
• You don't need to add a class to every link (A tag), use a class or id on the UL that targets the links.

Like this:
CSS - Using a class

ul.linkstyle1 {
styles that target the list block element (width, height, etc.)
}
ul.linkstyle1 li {
styles that target each list item
}
ul.linkstyle a {
styles that target each link (static state)
}
ul.linkstyle a:visited{
styles that target the link visited state
}

ul.linkstyle a:hover {
styles that target the link hover state
}

ul.linkstyle a:active{
styles that target the link active state
}

HTML

<ul class="linkstyle1">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

OR

<ul id="linkstyle1">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
</ul>

What the css is saying is this....for every link "A" found in a UL with the class name "linkstyle1" add these styles for the static, visited, hover, and active states. By using this method your code is much shorter

NOTE: if you want to use an id, change every css style from "ul.linkstyle1..." to "ul#linkstyle1..." Remember though and id can only be used one time on a page. If you want to apply these styles to multiple ULs, I would use a class.

Good luck.