CSS - Looking For A Colour Code Generator That Can Be Embedded Into A Web Application?

In CSS, is it possible to define certain colours for a certain piece of text?

For example, in the site I'm doing at the moment, the paragraph font-colour is black, but when the text ''CrudeSep'' comes up, I would like The 'sep' piece of the text to be in orange. This would save me having to make an image to do this!

Any help appreciated.

Hi.

Is there any way to:

a) Change background color of the title box that appears when you hover over an image AND

b) Reduce the delay it takes to appear?

Thanks.

I'm having trouble with my list on a site im working on.

When you hover over the link, I want it to display a background colour the full width of the box, not just the length of the text.

You can see the menu, on the left hand side - HERE.

Here's the CSS of the list.

Code:

div #leftcontent {
	padding-left: 0px;
	padding-top: 0px;
	display: block;
	font-size:90%;
	font-family:Arial, Helvetica, sans-serif;
}

#leftcontent a {
	text-decoration:none;
	padding:0px;
	color:#000066;
}

#leftcontent a:hover {
	text-decoration:none;
	background-color:#66CCFF;
	background-color-width:30px;
}


#leftcontent ul{
	margin: -10px 10px 2px 5px;
	padding: 0;
	list-style: none;
}


#leftcontent li a{
	margin: 0 0 .5em 0;
	padding: 2px 5px 5px 0px;
	line-height: 1.4em;
	font-size:100%;
	color:#FFFFFF;
}

Any help is appreciated.

Cheers.

__________________
ULTRASUK

Hi can anyone tell me if I can override embedded CSS with a linked stylesheet?

Here is what I want to change:
Code:

<col width="40%" style="background-color:#EEEEEE;text-align:left;">

I want to change the background-color without changing anything in the above mentioned code, this means I want to change it with an extern stylesheet.

OK I have embedded a flash movie and I want no padding at the bottom of the flash object so it butts up with my horizontal menu. I have used the following html

PHP Code:
<td class="flash"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="340" height="140">
  <param name="movie" value="images/movie.swf">
  <param name="quality" value="high">
  <embed src="images/movie.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="340" height="140"></embed>
</object></td> 





Here is the css I use for the cell:

PHP Code:
.flash{
    vertical-align: bottom;
    text-align:right;
    padding-right:25px;
    background-color:#EBF0F5;
    padding-bottom:0px;
    margin:0px;
} 





But in Netscape and Mozilla browsers there is a 2pixel gap at the bottom of the object ? IE and Opera are ok, does any-one know anything about this ?

thanks for your time.

does anyone know off hand without me posting any code, why my CSS would work embedded in the page between style tags and not referenced with a link tag (<link type="text/css" rel="stylesheet" href="blah.css" />).

this bug occurs in firefox.

basically i want them to hover over the image and the tool tip pops up.. it works awesome in firefox(of course) but does nothing in IE.

also for testing i made a link tool tip and it works in IE but its cropped horribly.

you can check it out by looking he

http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendID=9726504

heres the style classes:

Code:

a span 
{
   display: none;
}

a:hover span 
{
  position: absolute;
  display: block;
  background: grey;
  border: 1px solid black;
}

a:hover 
{
   color: 000000;
   background-color: grey;
   text-decoration: none;
   font-size:16;
}

heres the div placement:

Code:

<div class="aim">
<a>
<img border="0" class="" src="http://mattwild.com/media/graphic/aim.gif">
<span>allaimnamesRused</span></a>
</div>

by the way they are the two buttons "add my aim" and "add my msn" and the link underneath them

Hi everyone,

Basically I am working on a yahoo store design, and I have learned through working with Yahoo Store that it is very proprietary and limited in access. They allow me to access external style sheets and some of the layout of the site but I found for a specific tag id that if I alter it's margin value, something in the inaccessible backend creates an embedded style for that tag that overrrides the external style sheet. Yahoo help has been no help because they don't support custom code.

Anyway, I was wondering if there was a way to override or disable an embedded style in general or for a specific tag? I am pretty sure there isn't, but if there is, I would be forever grateful. I would especially appreciate any non-javascript solutions. I think javascript could do the trick but a non-javascript solution would be preferable and that is what I'm looking for.

Thank you anyone who can help out.
-Greg

Hi all. I am in the process of re-coding some beautiful email templates that were pure CSS layouts into nasty HTML nested tables so our clients can still see our newsletter when viewing them in Web based email browsers like Yahoo, GMail, etc. (since these often strip out our CSS sections)

Typically we would define our link styles in CSS using something like: PHP Code:
 a, a:link, a:visited {
        color: #BF28B2;
        text-decoration: none;
        font-weight: bold;
} 



I just realized I am not sure how to represent the same style when using inline styles such as <span style='...'>text</span>. Just what can I do to modify the link styles using inline styles?

Thanks

Hi all,
the page i am talking about is...

http://sydneynightowl.com.au/home.php

The problem is the the div 3column seems to start too early in the work flow and also the background colour on the header bleeds.

The div and header should be starting after the first 3 divs (which are set to float)

I hope i have explain this correctly, any help is apriciated.

The css code is

Code:

@charset "utf-8";
/* CSS Document */


body {background-color:#000000;
	background-image: url(../images/background.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	color:#FFFFFF;
	font-family:"Lucida Sans Unicode", sans-serif;
	font-weight:100;
	font-size:12px;}


#container {
	position:absolute;
	width: 700px;
	left:50%;
	margin-left:-358px;
}
	
	#header {
	margin-top:0px;
	height: 115px;}
	
		#toolbar {height: 30px;
		line-height:10px;
		padding: 0px 10px;
		font-variant:small-caps;
		}

	#cornerlogo {
	position:fixed;
	top:5px;
	left:5px;
}

	
	#topnavigation {height: 35px;
	line-height:35px;
	text-align:center;}
	
	#content { border-bottom:1px;}

		.3column {width:695px;
		padding-right:5px;
		padding-left:5px;
		margin-top:5px;}
	
	
		#leftcolumngl {float:left;
		width:223px;
		height:370px;
		padding-right:5px;
		padding-left:5px;
		padding-top:5px;
		margin-top:15px;
		margin-right:5px;
		border:#FFFF00 solid thin;}
	
		#middlecolumngl {float:left;
		height:370px;
		width:225px;}
	
		#rightcolumngl {float:left;
		height:370px;
		width:230px;
		padding-left:5px;}
	
		#leftcolumn { float:left;
		width:230px;
		padding-right:5px;}
	
		#middlecolumn {float:left;
		width:230px;}
	
		#rightcolumn {float:left;
		width:230px;
		padding-left:5px;}
		
		#imagecolumn {float:left;
		width:340px;
		padding-left:5px;}
		
		#infocolumn {float:left;
		width:340px;
		padding-left:5px;}
		
	
	#footer {height: 30px;
	border:thin solid #FFFFFF;
	clear:both;
	text-align:center;
	margin-bottom:30px;
	margin-top: 30px;
	line-height:25px;}

#bgfirst {
	position:absolute;
	top:190px;
	left:0px;
	width:90%;
	height:200px;
	margin-bottom:20px;
	background-color:#00CC00;
}

#bgsecond {position:absolute;
	top: 400px;
	right:0px;
	width:90%;
	height:200px;
	background-color:#660066;
}



a:link {color: #fffc00; font-weight: normal;}
a:active {color: #fffc00; font-weight: normal;}
a:visited {color: #fffc00; font-weight: normal;}
a:hover {color: #fffc00; font-weight: bold;}

a.event:link {color: #fffc00; font-weight: normal;}
a.event:active {color: #fffc00; font-weight: normal;}
a.event:visited {color: #fffc00; font-weight: normal;}
a.event:hover {color: #fffc00; font-weight: bold;}

a.club:link {color: #fffc00; font-weight: normal;}
a.club:active {color: #fffc00; font-weight: normal;}
a.club:visited {color: #fffc00; font-weight: normal;}
a.club:hover {color: #fffc00; font-weight: bold;}

h1 { text-align:center;
	color:#000000;
	background-color:#fffc00;
	margin-left:3px;
	margin-right:3px;
	font-variant:small-caps;
	font-size:22px;}

h2 {text-align:center;
	color:#fffc00;
	background-color:#333333;
	margin-left:3px;
	margin-right:3px;
	font-variant:small-caps;
	font-size:18px;}

.ourprice {
	display:inline;
	color:#FF0000;
	line-height:20px;
	font-variant:small-caps;
	font-size:14px;}


img {
	border-color:#fffc00;
	border-style:solid;
	border-width:thin;
}

img.noborder { border:none;}

img.venues {float:left;	
	margin:10px;}

	.mainnavimages {
	border-color:#979700;
	border-style:solid;
	border-width:thin;
}

p {line-height:15px;}

strong { color:#fffc00;}

Hi,

I have found this code in a php thing of mine and I would like to change it, and this bit off css is what makes it "happen". As it stands, when you mouse over a row nothing happens. What I would like it to do is change colour of the whole row (rows 1-4) (Like in phpMyAdmin browse section). This is the code I think I should change:

Code:

/* Common elements */
.row1 { background-color: #F5F9FD }
.row2 { background-color: #DFE6EF }
.row3 { background-color: #EEF2F7 }
.row4 { background-color: #E4EAF2 }

I also have this bit of CSS that can change ONE row's colour, but not all of them at the same time. If it helps, this is the code. I have edited the code into the main php file I have, in all the rows, but it only changes one "cell" when you hover over it, and not the whole row.
Code:

<td class="row4" onmouseover='window.status="{$info['name']}"; 
this.style.backgroundColor=iOver;' onmouseout='window.status="Done"; 
this.style.backgroundColor=iOut;' onclick="javascript:window.location.href='{$ibforums->base_url}showforum={$info['id']}';">;
</td>
</span></td>

Thanks,

Prism128

PS: The iOver and iOut (in the second code) are colour references in a php file

At http://jordanmeeter.com/contact/form you'll see that I have a form. After you submit the form, it will display "Success! Your Email has been sent." in green text. Now why is it displaying green when in the HTML, I have <strong style="color:rgb(84, 172, 219);">Success! Your Email has been sent.</strong> (That RGB equals a blueish colour) But if you highlight the text, and use Firefox's "View selection source" it will appear as style="color:green;" . What the heck is overriding my CSS?

Hi,
I have some text which has a line through it, i.e.

.sale_originalprice {
color:#666666 ;
font-family: Verdana, Arial ;
font-size:10pt ;
font-weight:normal;
text-decoration: line-through;
}

What I want to do is change the line-through colour to red. But the text should remain grey (i.e. #666666)

Is this possible?
I tried
text-line-through-colour: red;
already

but that didnt work

Thanks!

I'd like to be able to have different hover colours for different table rows. I have a general hover colour for the whole page and I'd like to have a different hover colour for the table rows.

In the head I have
a:hover { color: green }
a.white:hover { color: white }

So by hand I can insert the class="white" to each individual cell as part of the link but what if I wanted a whole row to hover white?

How would I code this or is there still no way to do it?

Hi all, newbie here.

I have an image I want to use as a background. I want this image to slowly fade to black at the bottom (or blue, or green, or whatever, to be decided later). Can I do this in pure CSS?

To be more specific, the image is a relatively small one in the middle of the page, and will fade to black which will continue down the page. Do I need to use javascript/jQuery to do this? Because I'd rather not, I'm not familiar with them and it will probably be too much effort.

I have tried making the image transparent and having a background gradient white to black behind it, but that doesn't look right (obviously, since I need 0% transparency of the image at the top and 100% at the bottom).

Thanks for any and all help!