CSS - Website Colour Scheme

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

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.

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

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;}

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

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

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

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?

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

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.

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

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?

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!