CSS - How To Style Links And Create Separation Between Links

question is about CSS and links.

I can get underline effect, background change, etc by using .a but i need to have more than one sort of link in my page, e.g. menu links cannot have the same effect as links in the main text.

How do i set up more than two link effects?

I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links:

Code:

a:link {
  color: red;
  text-decoration: none;
}
a:hover {
  color: blue;
  text-decoration: underline;
}
a:visited {
  color: red;
  text-decoration: none;
}
a:active {
  color: red;
  text-decoration: underline;
}

Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined.

However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined.

I want visited links to act the same. They only way I could get them to act the same was to do the following:

Code:

a.general:link {
  color: red;
  text-decoration: none;
}
a.general:visited {
  color: red;
}
a.general:hover {
  color: blue;
  text-decoration: underline;
}
a.general:active {
  color: red;
  text-decoration: underline;
}

This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this?

My first post Website:www.freewebs.com/weareamazing

I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help!

I'm currently working on a website for college, but I've run into an issue I can't work out. I can't seem to get rid of the default purple box that appears around my links.

The HTML:
Code:

<div id="homelink"><a href="index.html"></a></div>

The CSS:
Code:

#homelink{
	position:absolute;
	width:53px;
	height:17px;
	margin-top:25px;
	margin-left:70px;
	z-index:10;
}

#homelink a{
	display:block;
	background-image:url(images/links/home.png);
	background-repeat:no-repeat;
	width:53px;
	height:17px;
}

#homelink a:hover{
	display:block;
	background-image:url(images/links/homehover.png);
	width:53px;
	height:17px;
}

As you can see, I use a background image for the div and no text for the link. Clicking the background image works fine and takes me to the homepage, however I get the default visited and active link border around it.

Is there any way to solve this so that no border appears?

I am not sure if these links count as navigation or not, so not sure if I should be using the UL element for semantic correctness?

<div id="footer_bottom" class="bold">

<a href="sitemap.php" title="Sitemap">Sitemap</a> |
<a href="accessibility.php" title="Accessibility Options">Accessibility Options</a> |
<a href="http://validator.w3.org/check?uri=referer;verbose=1" rel="external" title="Validate XHTML">XHTML Valid</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Validate CSS formatting">CSS Valid</a>

</div>

Hi,

I have CSS document like so:

Code:

div.menu A:link {
definitions 
}
div.menu A:visited {
definitions 
}
div.menu A:active {
definitions 
}
div.menu A:hover {
definitions
}

And in my HTML document

Code:

<div class="menu">
Links are then put in here
</div>

But only the first Link effect works, how come? I tried Google, got few results I were looking for, I know that the Link effects has to be in certain order, and in these websites I found they were in different order tried both but no luck

Thanks alot!

I can't get this to work. I've done my site in HTML and CSS and for some reason, any time I try to place an href tag, it doesn't work - no link, no hover, nothing at all.
I'm new here and I know you can't post URLs, but if someone could look at this code for me, I'd really appreciate it.


Thanks!
Jason

Hi Whenever I shrink my window in Ie, the Links bar stays in the same place. You can view this at

http://www.trowbridge-wiltshire.co.uk/newtrowbridge

Code:

	body 		{

			
			background:#CBDEF5;
			margin: 1em auto;
			width: 600px;
			
			
			}

	#leftcontent	{
			margin: 1em auto;
			position: absolute;
			top:100px;
			left:250px;
			width:100px;
			background:#CBDEF5;
			
			}

	#centercontent 	{
			margin: 1em auto;
			width:500px;
			background:#87B4EB;
			color:#ffffff;
			border:2px solid rgb(75,123,211);
   			margin-left: 140px;
   			margin-right:20px;
			}
	
	
	#advertising {
			margin: 1em auto;
			width:500px;
			background:#87B4EB;
			color:#ffffff;
			border:2px solid rgb(75,123,211);
			margin-left:140px;
			margin-right:20px;
		}
		
	#banner 	{
			background:#CBDEF5;
			height:40px;
			padding:5px;
			}
	

	p,h1,pre 	{
			margin:0px 10px 0px 10px;
			}

	h1 		{
			font-size:14px;
			padding-top:10px;
			}

	
	background: #c3c8c3; }
	
	#button ul {
			list-style: none;
			margin: 0;
			padding:0;
			border:;
			}
	
		#button li {
			border-bottom: 1px solid #CBDEF5;
			margin: 0;
			}
	
	
	#button li a {
			display: block;
			padding: 5px 5px 5px 0.5em;
			border: 1px solid #1958b7;
			background-color: #87B4EB;
			color: #fff;
			text-align:center;
			text-decoration: none;
			width: 100%;
			}
	
		html>body #button li a {
			width: auto;
			}
	
		#button li a:hover {
			border: 1px solid #1958b7;
			background-color: #4B7BD3;
			color: #fff;
		}
	
	
		

On this site, the links do not work and I don't know why. The links should be a different color and when you hover over them they should change colors, but again, they do not. You can't even click on them and I can't figure out why. Any help is appreciated. Thanks!

On my test website that i make designs on I am having a very strange problem with the styles of my links.

i am trying to change the style of the title for the posts to have a blue color and the turn light blue on hover. however i have this problem where I change the style on the title, and there are also random links in the sidebar that follow that style as well.

i dont know if it is bug or what, but is begining to give me a headache.

Right now i colored the links pink so that are easy to see.

This happens in both opera and firefox for me.

the url is nverted.net

Hi,

Can anyone see why the main navigation links aren't working on IE5 on a Mac he <link removed>?

I've checked in Mac Safari, Win IE and Win Mozilla and they're fine. On Mac5.2 however, they simply don't do anything - no hover effect or active link at all.

Any help would be greatly appreciated, thanks...

Excuse me but i am a little thick on this one: How do I create different colored link style for say a:

1. navigation bar
2. footer bar
3. main body

Does making classes make sense in this situation

doug

Can some explain (briefly) how one goes about specifying CSS styles for different link areas in a page. for example, I want navigation links to have a different set of "rules" than footer links.

ted

I guess I am not understanding how this works.

I am having a problem with creating font/color styles on sublinks. I want all site wide links to be the 12px blue. And the links on my submenu I want to be 10px white.

How do I achieve this?

Heres my code:

a:link {
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
color: #000066;
}
a:visited {
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
color: #000066;
}
a:hover {
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
color: #0099FF;
text-decoration: none;
}
a:active {
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 12px;
color: #000066;
}

.sublinks a {
color:#FFFFFF;
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: none;
}
.sublinks a:visited{
color:#FFFFFF;
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: none;
}
.sublinks a:hover{
color:#0000FF;
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 10px;
}
.sublinks a:active{
color:#0000FF;
font-family:"trebuchet ms", verdana, helvetica, arial, sans-serif;
font-weight: normal;
font-size: 10px;
text-decoration: none;
}

And here are my links:

<div align="center" class="sublinks"><a href="index.php?page=areasofpractice">Areas of Practice</a></div>

and the page is: http://www.caffreysmith.com

As you can see, the links are not taking css effect.

Please help!