CSS - Change Link Colours In Layer.

Hi,

Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise.

I am not very good at coding or editing HTML/CSS, so I don't know how to do this.

All I know is that my website has a class on the body, and each menu item has a unique ID.

My website is: http://firstcareambulance .org/
Any help is appreciated.

Thanks

Hi.

I have just recently begun working with CSS. Is it possible with CSS (and without the use of any JavaScript) to have the background image change on a link mouseover?

I have the first image below (blue.jpg) set as my default background image and would like the second image (blue1.jpg) to display when the user hovers over a particular link.

URL
URL

Thanks for any help anyone can offer

Hello

I thought I could make it, but what I got so far is jumping over the screen, so please a need some help.

I got a image with two transparant shapes.
Behind those shapes I would like to show 2 other images.

|-------1-------|
| |-----| |----| |
| |...2..| |..3..| |
| |____| |____| |
|_____________|

Image 1 should be on top z-Index
Image 2 should under image 1, a part of the image should be visible.
Image 3 should under image 1, a part of the image should be visible.

Now the issue, image 2 and 3 should be dynamically replaceable.

Please help

Thanks

Hi everyone,

I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not.

I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located.

To get a visual you can check the website (just remove the *)
*onholdmusicsource*.com

In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button.

Comments would be fine
Ideas would be great
Solutions would be fantastic

Many Thanks-

I would like the link colour to change and the background of the <li> to change as well. I can't figure out what CSS to use for it though. I have made bold and underlined the li I want to change on hover.

Code:

<li id="menuitem_2mainnav">
<a id="menulink_2mainnav" class="mainlevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=2">Meetings</a>
<ul id="menulist_2mainnav">
<li id="menuitem_2_1mainnav"><a id="menulink_2_1mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=14">TEST 1</a></li>
<li id="menuitem_2_2mainnav"><a id="menulink_2_2mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=15">TEST 2</a></li>
<li id="menuitem_2_3mainnav"><a id="menulink_2_3mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=16">TEST 3</a></li>
<li id="menuitem_2_4mainnav"><a id="menulink_2_4mainnav" class="sublevelmainnav" href="/example/index.php?option=com_content&view=article&id=1&Itemid=17">TEST 4</a></li>
</ul>
</li>

I have tried:
Code:

#menulist_2mainnav li:hover{ color:#000000 !important;  }

But it doesn't change the links text colour.

Hi,

Is there a way to tell the browser to replace certain colours with other colours? For example replace #FF0000 with #00FF00?

Also is there anyway to refer to the parent of an element?

Thanks,
Matthew

how can i colour the scroll bars on my page - i.e. the ones when you have to scroll up and down the page, but also, the ones used within form elements such as drop down lists. I have tried using css, but to no avail.

My page consists of two frames - one on the left and one on the right.

Thankyou.

Hi.

I've got an element in my CSS such as:

PHP Code:
.footer {
  width: 760px;
  background-color: Aqua;
} 





I'm trying to use it in a table to have the table take on the properties of the .footer element. Currently I'm using it like this:

PHP Code:
<TABLE class="footer" ALIGN="CENTER" BORDER=0 CELLPADDING=2> <tr><td>MY CONTENT</td></tr></table> 





Should the bg of the table not be what I set in the CSS element???

Hi,

Why does the following not change my scrollbar colours?

PHP Code:
 body {
    font: 14px Arial, sans-serif;
    color: #18387B;
    background: #687BA3;
    margin-top: 5px;
    margin-left: 5px;
    SCROLLBAR-FACE-COLOR: #FF9900;
    SCROLLBAR-HIGHLIGHT-COLOR: #FF9900;
    SCROLLBAR-SHADOW-COLOR: #999999;
    SCROLLBAR-3DLIGHT-COLOR: #FFFFFF;
    SCROLLBAR-ARROW-COLOR:  #000000;
    SCROLLBAR-TRACK-COLOR: #000000;
    SCROLLBAR-DARKSHADOW-COLOR: #666666;
    
} 

Hi everyone!

I am having a problem with some missing colours and images in firefox.

I have validated my XHTML 1.0 and CSS as OK. It looks correct in IE 6.0 but not in FF, i am sure someone will know the answer straight away!


address is http://www.wellandpower.net

charlie

Hi,

I use blog software (Wordpress) to run my site and this allows me to use different themes. I have created three themes that are exactly the same except for the colours used.

I would like to seperate the layout definitions from the colour definitions so that I can call the layout css on all of them and then call the required colour css.

I have tried taking out all references to colour and then putting those references into a new css and then calling that but unfortunately it didn't work.

I am presuming that some definitions require more than just colours.

Can somebody help seperate the layout from the colours for me?

I'm sure there are other "issues" with the css, so if anything else is bad please let me know.

I have attached the relevant css as a text file.

TIA
Phillip

That's about the height of it.
I have been trying to pick colours for the site I'm playing with.
I can't find any pastal (my preference - not necessarily the best, I'm still learning) colours I like in the Web Safe Colours.
So, I started snooping around the internet . . . mostly to find out how bad it is that I'm not considering IE 5.x when developing. I found this information at Upsdell: Browser News and it appears to be dated Nov 19th 2005. It suggests that ~1% are restricted to the 256 colours. Is this site reputable for information accuracy and is it reasonable to conclude that web safe colours are a thing of the past?

Cheers!

Hi Everyone.

I'm a new member and so please forgive me if I don't immediately understand all the jargon.

However I have a problem and I was hoping someone might be able to help. I have searched the web and W3 schools but couldn't find the answer I was looking for.

I am using strict HTML with an external CSS style sheet.

I have a several paged website I am creating for part of a University assignment.

I have several links which have 3 colours for 3 states. Link, visited and highlight.

These work perfectly. (For me anyway).

I have now been told to remove 'circular references'. I understand this to be;

If I am on the 'Home' page, then 'Home' is no longer a link. (The cursor turns to a text bar instead of a hand)

I have removed href from the html to stop this happening. leaving just
<a>Home</a>

This is fine, however, the colours that I specified in the css now no longer apply and the text is just black.

I have followed the instructions in the web pages that I have seen to retain the colours, or add them to an inline style sheet, but nothing seems to work.

I can only achieve adding one colour (but not making it change when visited or hovering) or changing the colour of ALL links.

Sorry if this is confusing.. I hope someone can help!
The relevent code is below.

HTML
<head>
<style type="text/css">
.homebut a:link {color: red;}
.homebut a:visited {color: purple;}
.homebut a:hover {color: orange;}
<!--none of the above seems to work-->
</style>
</head>
<body>
<div class="homebut">
<a>Home</a>
</div>


CSS
/*This is applied to all links but doesn't work when I remove HREF from the HTML*/
a:link { COLOR: #0099FF; text-decoration:none;}
a:visited { COLOR: #00FFFF; }
a:hover { COLOR: #FFFFFF; }

Hi guys i am lost big time.

ive spend well over 10 hours trying to think, try, to solve this problem.

i have got 6 Horizontal CSS Dropdown Menu to make but each one of them must have there own colours , green, blue, yellow, pink etc. and in that the hover colour must match the colour menu that your on at the time i.e be slightly darker.

any ideas on how i would do this its driving me mad, ive tryed classes, divs java but am just getting no where

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)