CSS - Wrong Colour Showing Up...

Is it possible to set the colour of the padding in a table cell?

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 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 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!

A background image is being applied to an image, but I cant find anywhere in the CSS where this color is being applied. Ive also been fiddling with the position of the arrows using margins and padding, but these dont seem to have an effect either.

Here is a link to my page:
http://www.zombiemod.com/rm/nina2/main.php?g2_itemId=14

Here are the two images in question:
http://www.zombiemod.com/rm/nina2/t...ntrols-left.png
http://www.zombiemod.com/rm/nina2/t...trols-right.png

You can see there is a background color to the images of #f0f0f0 and the positioning isnt correct, im trying to remove the background colour and find out how to reposition the horizontal position of these images.

Here is my HTML:
Code:

<div id="content">
  <div id="main-image-container"  {if $theme.imageCount == 0}style="display:none"{/if}>
    {if $theme.imageCount > 0}
      <div id="slideshow-controls">
        <ul id="control-buttons">
    <li><button id="controls-left">
      <img src="{g->theme url="images/controls-left.png"}" alt="{g->text text="Left"}" />
      </button></li>
    <li><button id="controls-play">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Play"}" />
      </button></li>
    <li><button id="controls-right">
      <img src="{g->theme url="images/controls-right.png"}" alt="{g->text text="Right"}" />
      </button></li>
        </ul>
      </div>

Here is my CSS:

Code:

#slideshow-controlsx {
    position: relative;
    height: 14px;
    margin: 0px 0 -58px;
    overflow: hidden;
    z-index: 100;
    text-align: left;
	top:200px;
}

#main-image-container > #slideshow-controlsx {
    margin-bottom: -50px;
	margin:0 auto;
}

#slideshow-controlsx ul {
    position: relative;
    margin: 0;
    padding: 0px 0px 0px 0px;
    list-style: none inside;
	width:690px;
   /* background-color: #000;*/
 /*   opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=40);   Lower opacity for IE since the controls don't hide */
}

#slideshow-controlsx ul li {
    float: left;
    margin: 0;
    padding: 0;
}

#slideshow-controlsx button {
    width: 8px;
    height: 14px;
    /*margin: 0;
    padding: 0;*/
  /*  background-color: #000;*/
  	padding:0px;
    border: none;
    text-align: center;
    cursor: pointer;
}

Can anyone please tell me where the background colour #f0f0f0 is being applied, and how I should be modifying the code to move the images closer in towards the centre of the image.

James

hey,

i want to change a certain link to a different colour. but i want all the other links to be the 'original'

i have tried appling a class but the 'original' link seems to be taking over

i want to change the "Top" link to red

site is located at:

http://studentwork.qantm.com.au/pking/website/seminars.cfm

the css is located at:

http://studentwork.qantm.com.au/pking/website/ptwm.css

any help would be great

thanks

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

Hey Guys,

I have validated both my html and css. The only errors that come back for my css is that I have the same colour background and whatnot. BUT that's what I want. So there aren't really errors.

Here is my page:
jacenta.com/whichsbc

What I have been attempting to achieve and been utterly failing is:

If you goto the menu on the side and hover over you will see a light grey background show up. Basically I want that to extend to ethier ends of the box. Is there anyway for this to be done??? I've tried everything and I just can't seem to figure this one out. A good example of what I am looking for is in my drop down menu at the top when you select a heading and a dropdown comes down, hover over an item and a light blue background will show up.

It's probally something simple... I know. But ahh. It's just so frusterating!

If someone could help me out I would apperciate it so much!
You all are such a great help.
- Jacenta

Hi. I think this is probably a simple question for you guys. I have a web page with lots of input text boxes. What I would like is when the cursor is in the text box, the background changes to yellow from white. And as an added bounus. Some are originaly grey to indicate required input and maybe even a difrent active colour. Lots of websites do this so must be simple.

TIA

Desmond.

Hi,

I gave in, and would like to change my colour scheme. However I do not know from where to start to select good coloures for my website

I want my website to still leave an imprint in peoples mind, but at the same time it is relaxing to see and browse in.

I tought of black orange and brown .. however black does not look like a relaxing colour to me ... I could use different shades of brown as well ..

Anyways .. anyone having any sugestions are more then welcome.

dd112g

Is it possible to include (in this instance) a white border, INSIDE an orange background colour on a h1. The background colour of the page is white and the background colour of the h1 is orange, so I need the border inside rather than around the h1 bg colour for it to work otherwise you wouldn't see it for the white page background.

Can this be done?

If so can anyone help..

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?

i currently have the following code for links..

Code:

a {
	color:#666666;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font-family: arial, helvetica, sans-serif;
	}
a:link {color:#666666;}
a:visited {color:#333333;}
a:hover {background-color:#eee;}

is there a way of having another set so that some have the colour settings as above and another set have the colour settings that are blue or something???

any suggestions would be great....

thanks

RF

Is there a way to get it so that if images dont load, then it shows a background colour

I tired using both colour an image, but it didn't work

Code:

background: url(images/background.png);
	background:#000000;

The reason i'm asking is when i'm at college, i have images disabled, and because i used white text, i have to highlight the text in order to read it

Is there a way to do this

Hi,

How do i change the colour of the background hover colour of a drop down menu? I can only seem to change the background of the normal state. Any ideas?