CSS - Moved Link

I want to change a link within a set of links. It is a vertical menu and it appears as a sub-category which i want it to look different.

How do i reference the sublinks? I did this which has no effect.
<a href='".$mypath."' id='catsub2'>";



//these settings override it still.
#blanksideboxContent.sideBoxContent a{
color: #000000;
font-size:1em;
font-family:verdana;
font-weight:bold;
text-decoration: none;
border:2px outset #000000;
background-color:#5ec82a;
width:125px;
display :block;
margin-left:2%;
}


#catsub2 a{
width:80px;

}

Hi

I have this which IE needs to call "menu-ie.css" and all other browsers need to call the "menu.css".

Code:

<!--[if IE]>
   <LINK rel="stylesheet" href="inc/menu-ie.css" title="contemporary" type="text/css">
<![endif]-->
<LINK rel="stylesheet" href="inc/menu.css" title="contemporary" type="text/css">

Just tested and it doesn't work... it only calls "menu.css"

Tried it with "if IE7" and "if IE6" with no avail.

--------------

IE Style:
Code:

 #menu * {margin:0;} 
#leftcolumn {width:150px; float:left; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif;}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
 .dropdown dd {position:absolute; top:0; overflow:hidden; width:207px; display:none; background:#fff; opacity:0}
.dropdown ul {width:203px; border:2px solid #C7DDCE; list-style:none} 
.dropdown li {display:inline}
#top a.loook, #top a.loook:active , #top a.loook:visited{display:inline;padding:2px;  text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
 .dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:199px} 

All Others Style:
Code:

 #menu * {padding: 0;margin:0} 
#leftcolumn {float:left; width:150px; font:9pt "Trebuchet MS", Geneva, Arial, Helvetica, SunSans-Regular, sans-serif}
.dropdown {display:block; position:relative}
.dropdown dt {width:150px; border:2px solid #C7DDCE; padding:2px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover{background:url(images/header_over.gif); color:#000;
}
.dropdown .upperdd {border-bottom:none}
.dropdown dt.uppdtdd:hover {background:url(images/header_over.gif); color:#000;}
 .dropdown dd {position:absolute; top:0; overflow:hidden; width:184px; display:none; background:#fff; opacity:0}
.dropdown ul {width:180px; border:2px solid #C7DDCE; list-style:none} 
.dropdown li {display:inline}
#top a.loook, #top a.loook:active, #top a.loook:visited {display:inline;padding:2px;  text-decoration:none; color:#000; background:none; width:180px}
.dropdown a:hover {background:#E8E8E8; color:#000}
.dropdown .underline {border-bottom:0px solid #C7DDCE}
 .dropdown a, .dropdown a:active {display:block; padding:2px; color:#333; text-decoration:none; background:#F7F7F7; width:180px} 

Anyone know how this is done?

hi everyone,
im wondering why my a:link etc is not working on the following page www.think2go.ch/index_template.htm, namely on the top menu where it says "seite drucken" "weiter empfehlen" "home" and "kontakt". it works fine with IE, but does not in other browsers.
what its suppossed to look like is:
a:link.2{
color: white;
text-decoration: none;
font-weight: bold;
}
a:visited.2{
color:white;
text-decoration: none;
font-weight: bold;
}
a:hover.2{
color: #85ADC0;
text-decoration: none
font-weight: bold;
}
a:active.2{
color:white;
text-decoration: none;
font-weight: bold;
}

sample code: <a class="2" onClick="window.print()" href="#">Seite drucken</a>

any help is greatly appreciated!
thanks...

You're probably not going to fully understand what I'm asking, because I can't describe things well, but just try. Okay?

I've seen websites that have the navigation on the left side in a panel. And when you click a link on there, the page loads in the bigger panel on the right. But, the whole page doesn't reload (in other words only the big right panel reloads). I'm pretty sure they use CSS for that, not frames. Because when I look at the code on those certain pages, I can see that they use style sheets. Are you still following?

My question to you is, how do you target the link to shoot into that panel???

I can't figure it out. Maybe you can. Feel free to ask any questions.


Later,
a fellow geek (and proud of it!)
~Sam~
Marvelgirl@ameritech.net
http://www.x-mencharacters.com

I have not done much web designing lately and have forgoten a number of things. Right now i cannot remember if it is possible to specify link styles for a specific class for a cell in a table. I have this code for the entire page:

a:link,a:active,a:visited,a:hover { color : #FFFFFF; text-decoration: underline; }

However, I want to have it different in only a specific cell of a table. Is there a way to put it in the following code?

td.newshead { background-color: #013501; border-style: solid; border-color: #FFFFFF; border-bottom-width: 1px; border-top-width: 1px; border-left-width: 1px; border-right-width: 1px; font-family: verdana; font size: 125%; font-variant: small-caps; font-weight: bold; color: #FFFFFF; text-align: center; }


I can't do something like making another link class like this either

a.class:link,a.class:active,a.class:visited,a.class:hover { color : #013501; text-decoration: underline; }

I have the information comming from another page and I am not able to the <a class="class" href="url">. I need to put it in the style for the cell. Anyone able to help me out here?

To start with, here's a block of code:

my style.css

Code:

.main { 
	font-family: Verdana, Arial, Helvetica, sans-serif;
 	font-size: 11pt;
 	color: #FFFFFF;
 	background-color: #666666;
 	text-align: center;
 	vertical-align: top;
 	border: #000000; } 

a.main:link  {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #666666; }

a.main:visited { 
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: #FFFFFF;
  text-decoration: none;
  background-color: #666666; } 

a.main:hover {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FF8A00;
  text-decoration: underline overline line-through;
 background-color: #666666;} 

a.main:active {  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FF6F00;
  text-decoration: blink;
  background-color: #666666; }

my html-file's thingies:

Code:

 <div id="Main" style="position:absolute; width:50%; z-index:5; left: 25%; top:
 25%; background-color: #333333;
 layer-background-color: #333333;
 border: 3px none #000000;" class="main">

And the problem:
With Windows XP /w IE and Linux /w Opera I get the same stupid looking detail - the backgrounds of the links are different from the div's background. So that the dark grey part is broken by the links and their light grey boxes. Looks horrific..

By the way, is there a good place for language references for CSS, PHP and HTML in the internet (URL)?

I'd like to be able to make some links on my page one color and others a different color so they show up appropriately on different backgrounds. how would i go about doing this?

thanks

Not sure what this is referred to. I checked my dhtml book but its from 2000! I want to apply link, visited, hover, active to below code:

Code:

#print_category {
     position: absolute;
     left: 35%;
     top: 30%;
     font-size: 13px;
     text-align: left;
     line-height: 2 ;
     margin-right: 5em;
		}

Properties I want to apply:

A:link {color: #000099;
text-decoration: underline;
}

A:visited {color: #000099;
text-decoration: none;
}

A:hover {color: #000099;
text-decoration: none;
}

A:active {color: #000099;
text-decoration: none;
}

How can this be done, Ive tried but to no avail:

- A#print_category:active {color: #000099;
text-decoration: none;
}

Thanks!

I have set my 'a' tag as follows

PHP Code:
 a { 
         display:block; 
         width: 100px;
         padding: 5px;
         border-style: solid;
         border-color: #B1B1AA;
         border-top-width: 1px;
         border-bottom-width: 1px;
         border-left-width: 1px;
         border-right-width: 1px;
         
     
     
     
        }
        a:hover { 
            width: 100px;
         background-color: #CCCCCC;
         border: 1px;
         border-style: solid;
         border-color: #B1B1AA;
         border-top-width: 1px;
         border-bottom-width: 1px;
         border-left-width: 1px;
         border-right-width: 1px;
        }
        
        a:link {
        
         color: #000000;
         }
         
        a:visited {
         color: #000000;
        } 





here's the problem. I only want a certain menu to have this style and I want all the rest of my links to be another way but right now, all my links are like how I have above.

Can someone tell me how I can assign different link styles to different links?

I don't want them all the same.

thanks

this might be basic but I can't get it to work.

}
#subhead{
background-image: url(banImgs/top_sub_01.jpg);
background-repeat: no-repeat;
height: 140px;
}

I want "top_sub_01.jpg" in every page to link to \default.html

thockenb@yahoo.com

I just wanted to know is it possible using css to add a link to a background image in a table or cell?

if so how would you do that?

Hi, i was wondering how to stop it putting hyperlink decorations on images, i thought that this following code would work but it doesnt could someone post the right code please.

{text-decoration: none;
}

Hi, I am having trouble setting up different link styles in my site.

My code is:

Code:

.menu {
	font-family: Helvetica;
	font-size: 18px;
	color: #FFFFFF;
	
}

a.menu:link {
	color : #FFFFFF;
	text-decoration : none;
}

a.menu:visited {
	color : #FFFFFF;
	text-decoration : none;
}

a.menu:hover {
	color : #FFFFFF;
	text-decoration : underline;
}




a:link {
	color : #FFFFFF;
	text-decoration : underline;
}

a:visited {
	color : #FFFFFF;
	text-decoration : underline;
}

a:hover {
	color : #FFFFFF;
	font-weight : bold;
	text-decoration : underline;
}

From what I've read this should setup a default style for all links to follow, as well as define an alternate link style for anything in the menu class.

So when I use the following code:

<div class="menu"><I>01</I> &nbsp; <a href="">HOME</a></div>

.. I would have thought the link would follow the style for .menu

But it doesn't. It takes the style of the default links as well.

How do I properly setup an alternate link style??

Hey,

I have the following in a CSS document:
Code:

/* Link Colors */
a:link { color: #000000; }
a:visited { color: #000000; }
a:hover { color: #888888; }
a:active { color: #000000; }

/* User Class colors */
.classadmin { color: #FF0000; font-weight: bold; }
.classmod { color: #0066FF; font-weight: bold; }
.classmember { color: #00CC00; font-weight: bold; }

In the Active Users section of my site, I link to the user's profile, and I would also like the color of the link to be the color of the user's class. My HTML code is:
Code:

<a class="classmember" href="user.php?id=1">$username</a>

But, I also have a Color Key:
Code:

Color&nbsp;Key: <font class="classmember">Member</font>, <font class="classmod">Moderator</font>, <font class="classadmin">Administrator</font>.

I thought I could do something like:
a.classmember:link { color: #00CC00; font-weight: bold; }
But that messes up the Color Key.

So, I don't know how I can have the .classmember, .classmod, and .classadmin override the a:link {} pseudoclasses.

Thanks for any suggestions!

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
}
a:visited {
color: #FFFFFF;
text-decoration: underline;
}
a:hover {
color: #FFE648;
text-decoration: none;
}
a:active {
color: #FFFFFF;
text-decoration: underline;
}
a:link {
text-decoration: underline;
color: #FFFFFF;
}
.main_border {
border-top: none;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #333333;

}
.field_style1 { font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #666666;
}
.whitebold_12px {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}
.whitebold_11px { font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: none;
color: #FFFFFF;
}
.arrow_bold {
font-size: 14px;
color: #FDDB00;
font-weight: bold;
}
.disclaimer {font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #CCCCCC;
}
.footer_text1 {font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FFFFFF;
}
-->
</style>

<style type="text/css">
.footer_text2 {FONT-SIZE: 9px; COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif}
A {COLOR: #ffffff; FONT-FAMILY: Arial, Helvetica, sans-serif}
A:visited {COLOR: #333333; TEXT-DECORATION: underline}
A:hover {COLOR: #cccccc; TEXT-DECORATION: none}
A:active {COLOR: #333333; TEXT-DECORATION: underline}
A:link {COLOR: #333333; TEXT-DECORATION: underline}
</style>


This my style tags. I have bunch of links on the page. Now it possible that links could be in different colors and also visted and hover links could be different. When I put class .footer_text2 , it over writes everything that I hade before and all my links get style accorrding to footer_text