CSS - Background Colour Hover On Textfield?

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 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 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 was wondering on this table I have I want it to have black background colour but I want to change the opacity to where you could see the background image too

Hi there,

I was wondering how I would go about creating input fields have a different colour background when teh user has clicked on it and ins typing. I tried using :active, bit it didn't work.

Any ideas?

Hi all, I would be very grateful if someone could help me out with a coding problem. Basicaly, I have two columns and I want both to fill with the background colours with the same height. My sample coding is below. (NOTE: Ive had to remove the urls from the DOCTYPE and <html>, please replace with correct code).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="w3.org/1999/xhtml" >
<head><title>100% Height CSS Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">

#all{
WIDTH: 950px;
PADDING-TOP:0px;
MARGIN: 3px auto 0px;
POSITION: relative;
BACKGROUND-COLOR: #fff;
FLOAT: left;
}
#leftside{
FLOAT:left;
WIDTH:169px;
MARGIN: 0px;
PADDING: 0px;
BORDER-RIGHT: 1px solid #999;
POSITION: relative;
BACKGROUND-COLOR: #ededed;
}
#rightside{
BORDER: 0px solid #000;
WIDTH:775px;
FLOAT:left;
POSITION: relative;
MARGIN: 0px 0px 0px 5px;
BACKGROUND-COLOR: #F4CDD8;
}
</style>
</head>
<body>
<div id="all">
<div id="leftside">a<br>b<br></div>
<div id="rightside">c<br>d<br>e</div>
<div>
</body>
</html>

In the above example I would like the "leftside" div to stretch to the same height height as the "rightside" div filling the area up with the "leftside" background colour and also extending the 1px border.

All help much appreciated.
Thanks

Soph

I have a FAQ web page which has a list of questions at the top which link to the answer for that question (on that page).

I have used 'on click' to change the background colour of the div which contains the answer to the question you have clicked on.

Code:

<a href="#name" onclick="document.getElementById('namediv').style.background='#99ccaa'" >click here !!! </a><br>

And this works, but it becomes a problem when i scroll back to the questions and click on another one. It will change the background of the new div as required but I can't find a way to revert the previous div back to its original background color.

any ideas?

Thanks

Essentially I'm creating a 'drop-up' menu without javascript.

Here is my test page:
http://38.99.165.179/kalle/cssmenu/index3.html

PROBLEM:

I am using 'float: left' to arrange my main menu items horizontally.

With 'float: left' it seems like I lose control over the #menu_container background color. It's supposed to be a shade of red. If I delete 'float: left', I regain control over the container background, and the shade of red appears.

Why is this happening?

This problem doesn't seem to exist if I use 'display: inline' instead of 'float: left', to sort my main menu items horizontally. BUT 'display: inline' causes other issues, and so for various reasons I'd like to try to keep using float: left.

Here is my code:
Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>

<style>

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #555555;
    color: #EEEEEE;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

#top {
    width: 100%;
    height: 80%;
    text-align: center;
}


/* MENU BAR */

#menu_container {
    width: 100%;
    margin: 0 auto;
        
    /* doesn't work!!! */
    background-color: #CC6666;
}

   
#menu {
    font-size: 16px;
}

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

#menu ul {
    
}

#menu li {
    position: relative;
    display: block;
    height: 1.2em;
    margin-right: 50px;
    text-align: left; 



/* PROBLEM */
/* With 'float: left', the background color disappears for #menu_container. */
/* Disable 'float: left' here, and you see what I mean. */
/* Why does this happen?

    float: left;

/* The 'float: left' is needed to sort my main menu items horizontally. If I use the alternate way 'display: inline', then my drop-up menus don't automatically attach themselves to the correct spot. I want to avoid manually positioning them. */

}

#menu li ul {
    background-color: #BBBBBB;
    position: absolute;
    bottom: 1.2em;
    display: none;
    list-style: none;
    width: 110px;
    padding: 0px;
}

#menu li:hover ul {
    display: block;
    white-space: nowrap;
}

#menu li:hover ul li {
    display: block;
}

#menu li:hover ul li:hover {
    background-color: #777777;
}

/* END - menu bar */


#bottom {
    margin-top: 70px;
    height: 150px;
    text-align: center;
    clear: both;
    padding-top: 2px;
    background-color: #222222;
}


</style>

</head>


<body>


<div id="top">

    content

</div>

<div id="menu_container">
   
    <ul id="menu">
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">Anything</a></li>
                <li><a href="#">Needed</a></li>
                <li><a href="#">Here?</a></li>
            </ul>
        </li>
        <li><a href="#">Something 1</a>
            <ul>
                <li><a href="#">Imagine</a></li>
                <li><a href="#">the</a></li>
                <li><a href="#">Possibilities</a></li>
                <li><a href="#">of Magic!</a></li>
            </ul>
        </li>
        <li><a href="#">Something 2</a>
            <ul>
                <li><a href="#">Taste</a></li>
                <li><a href="#">the</a></li>
                <li><a href="#">Sensation</a></li>
                <li><a href="#">of the Bubbles</a></li>
                <li><a href="#">on your Tongue!</a></li>
            </ul>
        </li>
        <li><a href="#">Something 3</a></li>
        <li><a href="#">Contact</a></li>
    </ul>


</div>


<div id="bottom">

    content

</div>

</body>
</html>

Can anyone tell me how to change the background colour of all tooltip texts on a web page?

Cheers.

Dear all,

I have an iframe of variable width (width="100%") and a fixed height. Within the iframe I show multiple divs containing calendar appointments.

Quite often, the number of divs that are side by side causes the iframe to scroll horizontally, which is fine, but when I scroll to the right I lose my background image and colour in the portion that wasnt visible when the page loads.

If I reduce the screen size down, and refresh, then expand again, the area of the iframe that appears has a white blank background.

Is there any way around this?

Many thanks, Mark

I have customized the elements of a form for a website I am working on. I have set the input fields to have a white background, however, in three out of the six textfields the background is yellow (this only happens in Internet Explorer 6).

I have checked the CSS, and the yellow isn't included anywhere.

If anybody can help I would be grateful. Thanks.

I've got a problem with the background on hover. It's just a smidge too low and I can't figure out how to raise the background without raising the text. If you look at the image below, you'll notice that the hover "courses & events" is just a bit too low. (real stuff is on a development site, with themes, master pages, etc., and doesn't have a dns beyond our firewall) Any help appreciated.

http://www.mahec.net/images/a.jpg

#topBar {
position:absolute;
padding:0;
width:800px;
background:#78658c;
filter: Alpha(Opacity=90, FinishOpacity=30, Style=1, StartX=0, StartY=90, FinishX=0, FinishY=30);
-moz-opacity:.60;
opacity: 0.6;
border-top:solid 1px #000000;
height:25px;
overflow:hidden;
}

#topInnerBar a {
text-decoration:none;
color:#F9F9E4;
font-weight:bold;
line-height:27px;
margin-top:-5px;
padding:2px 10px 5px;
}

#topInnerBar a:hover {
text-decoration:none;
color:#593F72;
font-weight:bold;
line-height:27px;
margin-top:-5px;
padding:2px 10px 5px;
background:#F9F9E4;
}

I'm using <LI> to make vertical menu with image hover effect? It seems quite good and working properly in both IE and Firefox. But In IE6 hover effect comes slowly after nearly 1 seocnd. Is there any solution?
following is my css code.

Code:

#navigation { width:160px;	font:bold 14px Arial, Geneva, Helvetica, sans-serif; }
#navigation ul {list-style: none; margin: 0; padding: 0;}
#navigation ul li a {display:block;	background:url(button-menu2.png) no-repeat;	vertical-align: bottom;	font-size:12px;	font-weight:bold; text-align: left; padding-top: 6px; padding-left: 18px;	height: 20px !important; height: 20px; width: 100%;	text-decoration: none;	color: #ffffff;	}
#navigation ul li a:hover {text-decoration: none; background-position: 0px -25px; color: #fff;}

Hi All,

Anyone know of a way to change acheive this behaviour?

I want to have several links in LI and when one hovers over the LI, the background of the whole UL changes (not just the background of the list item itself).

Thanks in advance for any pointers.

Cheers,

:)Ben

Hi,

I am trying to set background color on hover for a single table of links, rather than the entire document like the below example shows.

http://www.projectseven.com/tutorials/css/pseudoclasses/

I have tried various ways, I do not want to use javascript for this and I am aware of the way to apply background color to the .td field but this also applys to the normal text not just links.

So my question is how do I apply the background hover color to one table of links instead of the body. Thanks!