|
CSS - Way To Use :hover In Style Tags?
<div style="blah">
What would be used to put :hover in the style tag in place of 'blah'? Similar TutorialsI have a menu bar made up of <a href> elements that have a hover style of:
PHP Code: #mainMenu a:hover { color:#000000; background-color: #66c74c; padding: 1px 4px 1px 4px; margin: 1px 1px 1px 1px; } This will provide a green colored rollover visual as the user moves their mouse over the menu bar. I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code: //--- Simplify setup by creating an array of the menus and hilight ID's --- var menus = ["menu1","menu2","menu3","menu4","menu5", "menu6","menu7","menu8","menu9","menu10"]; function J_hiliteMenu(menu) { //--- first make sure all the menu are hidden and unhilited --- for(i=0; i < menus.length; i++) { if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position var obj = document.getElementById(menus[i]); if (obj == null) continue; // if menu is not available skip it obj.style.color = "#ffffff"; obj.style.backgroundColor = "#234fd7"; } //--- hilite the menu we're interested in --- var obj = document.getElementById(menu); obj.style.color = "#000000"; obj.style.backgroundColor = "#f8f400"; } Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript? Thanks! I have some listing text that comes from a database, displayed in a column. Each block of text is enclosed in a DIV tag. I use the following to cause the area of the text to change background color when there is a mouseover: Quote: div.list { padding: 5px 5px 5px 5px; } div.list:hover { background-color: #FFFACD; } Works fine for Firefox, but doesn't do anything in IE. How can I fix this so it works in IE as well? Having two problems, kind of related to browsers. 1) Most of the time, the site loads better under Firefox. For some reason, Firefox won't implement the text-decoration:none attribute. Any ideas? 2) Also, the on hover flip filter doesn't seem to be working in IE, which i was told was the only browser that would work in? I think I used bad syntax, but can't find it. Help would be appreciated! edit--i used the html validation and the css one, the html said I cant use the xspace and vspace in this iframe: <iframe class="fade" style="position:absolute; top:125; left:200;" src="blog.html" width="400" height="400" frameborder="0" align="left" xspace="3" vspace="3"></iframe> this is the only i frame I use, and was something I got off a frames tutorial... guess i didn't learn it well enough? was a ton more wrong with the css, but it wasn't like the html validator and telling me where i went wrong. here is the full css file: .fade{filter:alpha(opacity=70); -moz-opacity:0.7; background:#ffffff;} font, td{color:#0000FF; font-size:medium; font-family:sans-serif; font:"Comic Sans MS",Tahoma;} a,a:link,a:visited,a:hover,a:active { font-size:medium; font-weight:bold; font-family:sans-serif; font:"Comic Sans MS",Tahoma; text-decoration:none; } .link1 a:link { color:#0000FF; } .link1 a:visited { color:#0000FF; } .link1 a:hover { color:#0000FF; filter:flipv; } .link1 a:active { color:#0000FF; } .link2 a:link { color:#0000F5; } .link2 a:visited { color:#0000F5; } .link2 a:hover { color:#0000F5; filter:flipv; } .link2 a:active { color:#0000F5; } could someone please help me figure out what I did to my fonts, and where the links are preventing the underline decoration from being disabled? Hi, I'm new to CSS and am trying to design my blog template. For the styles, I have this so far: Code: <style type="text/css">
#navbar-iframe{display: none;height: 0;}
body{background: #FFFFFF; font: 13px arial;color: #999;line-height: 150%;}
.left { width: 460px; text-align:justify; }
.right { width: 180px;font: bold 11px arial;color: #c8c8c8; }
.navigations{
background: #6a6a6a; text-decoration: blur; padding-top: 1px; border-bottom: 3px solid #666 ;float: right; width: 190px; font: 28px arial; color: #aaa; line-height: 200%;text-transform: lowercase; letter-spacing: -2px; }
.navigations :hover{
font: 28px arial; text-decoration: none; padding-top: 1 px; border-bottom: 3px solid #666; float: right; width: 190px; color: #F2EAEA;
background: #777; line-height: 200%;text-transform: lowercase; letter-spacing: -2px;
cursor: crosshair }
.cloud { font: 26px georgia;letter-spacing: 1px;color: #BDA28F }
.icon {border: 20px solid #eee; width:100px; height:100px;}
.h1 { font: 20px times new roman;color: #FD0479; letter-spacing: 0px; line-height:18px;text-transform:uppercase}
.h2 { font: 12px arial; color: #6a6a6a; letter-spacing: 1px; text-transform: lowercase;padding:4px;background: url((URL address blocked: See forum rules)); }
.h3 { font: 12px arial; color: #6a6a6a; letter-spacing: 1px; font-weight:bold;padding:4px;}
a:link,a:active,a:visited {font: 12px arial; color: #aaa; border-bottom: 1px solid #6a6a6a; text-decoration: none;text-transform: none;letter-spacing: 0px; }
a:hover { color: #8BC4C4; border-bottom: 1px solid #e8e8e8;background: #f2f2f2; text-decoration: none; cursor: crosshair}
b { color: #BE0304;font-weight:bold; }
i { color: #FA727C; }
s { color: #ddd; }
em {font-family: georgia}
blockquote{ color: #999; background: #f5f5f5;padding: 8px; }
</style>
But I can't seem to get the hover navigations to change background colour and text colour. What am I doing wrong? Thanks! i have some css that i want to be able to change the background colour of an input box (type: text) and a textarea this is the style for the textbox: Code:
table#form tr.error input {
background-color:#FFB7B7;
}
which works, but when i try: Code:
table#form tr.error input, textarea {
background-color:#FFB7B7;
}
it seems to ignore the names before textarea, and is effectively doing this: Code:
textarea {
background-color:#FFB7B7;
}
any ideas on a fix? is it just something with textareas? my layout is pretty simple... Code: <div class="container"> <div class="topbar"> <div class="list"> <div class="gametitle"></div> <div class="percentage"></div> <div class="system"></div> </div> </div> i have the following CSS applied to gametitle, percentage and system... for somereason, gametitle doesnt work... Code: .gametitle {
float:left;
width:250px;
color:#FFF;
}
.gametitle a:link,
.gametitle a:visted,
.gametitle a:hover {color:#FFF;}
.percentage {
float:left;
color:#FFF;
}
.percentage a:link,
.percentage a:visited,
.percentage a:hover {color:#FFF;}
.system {
float:right;
color:#FFF;
}
.system a:link,
.system a:visited,
.system a:hover {color:#FFF;}
here is the page where all this code is going down... Mini Catalog Hi, I am trying to get a hover to work with my links. The problem is when i have a list-style-type in css. When that exists, the link text for each link goes behind the bullets instead staying to the right of them. What do i need to do to have a list-style and the hover effect hovering over the links? I'd like to do something like this: Quote: <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#666666" width="100%"> <tr> <td>Test</td> </tr> </table> But I don't want to use an inline style tag. I tried this: Quote: <html> <head> <style> .border { border-color: #666666; border-collapse: collapse; border: 1px; } </style> </head> <body> <table class="border" cellpadding="0" cellspacing="0" width="100%"> <tr> <td>Test</td> </tr> </table> </body> </html> But it does not work. What am I doing wrong? ok easy one. basically i have a links outside a div and inside a div called footer. how do i do it so that the links inside the footer div dont take the css style of the one outside? i am trying to do: #footer.a:hover { } and tried a:hover#footer but it aint working? edit never mind!!! I am using style sheet for fonts etc. I was wondering is it OK to use style sheet and <Font> tags at the same time on a page. I mean if you are using certain font only once. Why bother creating a class in style sheet and then calling using that class .. hello, Im running a website that uses the hover css style to change the button from a darker colored text to a lighter colored text (two different images) but when I go to the web page and hover over it it disappears, only for a second but its still annoying, and then replaces it with the new image. is there any way to get rid of this brief disappearance? In my main CSS file, the background-color is set to #FFFFFF (white) however this also erased my background images in the cells of my table i have tried to add them with style tags, but the main CSS still overrides Top of the table + cell with bg PHP Code: <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td width="766" height="295" valign="top" style="background-image:url(images/row1.gif); background-repeat:no-repeat "> This is the main CSS: PHP Code: body,td,th { font-family: Tahoma; font-size: 11px; color:#5D5D5D; background-color:#FFFFFF; } body { font-family: Tahoma; font-size: 11px; color:#5D5D5D; background-color:#FFFFFF; } Hello Everyone @ Devshed, I'm trying to improve my limited CSS skills and have a few simple questions which would really help clean up my HTML. I haven't been able to find the answer in the excellent CSS resources in the sticky (if you haven't already they are worth checking out), or in past questions so here is a new post. I understand it is possible to set styles for html tags which then apply to all document elements without having to specify a class in the actual html, so a style sheet looking like, table {border: 1px solid #000000; background-color: #EEEEEE;} th {font-weight: bold;} td {font-size: 10px;} .... Applies to a table such as the one below without having to specify a class attribute in each element. <table> <th>Title</th> <td>Cell </td> </table> I have 8 small tables on a page and would like to specify each with a unique style. A example styling could be table .style1 {border: 2px solid #000000; background-color: #CCCCCC;} th .style1 {font-style: italic;} td .style1 {font-size: 12px;}, Is there anyway I can re-write the style sheet declarations so that I declare the style I want to apply to the entire table just the once? As opposed to writing class='style1' in each table element (see below). Are ID's usefull here? <table class='style1'> <th class='style1'>Title</th> <td class='style1'>Cell</td> </table> Thanks in advance for your time, Peter I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule: Code:
.textarea-box {
color: #990000;
background-color: #fff;
width: 375px;
height: 200px;
border: #000 solid 1px;
}
...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule? Thanks for help with this. j9 I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! Hi, I have some code that looks like this . #nav,#nav ul which puts all the listed elements in a vertical list. Now if I do ths #nav ul.. this changes all the elemnts to a horizontal list. What does the ',' do for the id css tags exactly as i thought it refered to nested <ul> lists but is doesn't. I've used css to change my alt tag text to be consistent in size and font to the rest of the site, however, a couple of my images are relatively thin, but are tall. It seems that the alt tags get centered to the image, so you only see the middle of the tag, not the beginning and the end. Is there a way to wrap the text within the confines of the image. Thanks. Hello, I've been messin with this all night but just can't get the result i'm after. The bit of code which follows, almost works - except the fields on the right hand side don't align to the top (to be in line with the top of each text on the left). What am I doing wrong? Can anyone please help me? Thanks, JT EDIT: Screenshot of the current output is attached too for information Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Document</title>
<style type="text/css">
div.configset label {
font-weight: bold;
}
div.configset fieldset {
background-color:#FFE391;
border:1px solid;
margin:0.5em 0.5em 0.5em 0.5em;
}
div.configset dl {
font-size: 0.85em;
width:100%;
}
div.configset dt {
float:left;
border-right: 1px solid #FFCC6F;
width:45%;
padding:0.5em 0.5em 0.5em 0.5em;
}
div.configset dd {
clear:both;
margin: 0 0 0 46%;
padding:0.5em 0.5em 0.5em 0.5em;
}
</style>
</head>
<body>
<form id="form1" method="post" action="">
<div class="configset">
<fieldset>
<legend>General Options</legend>
<dl>
<dt>
<label for="conf_13">Website Enabled</label><br /><span>Toggle the website on and off. Note that no part of the website (except admin functions) will work if this is set to False.</span>
</dt>
<dd>
<input type="checkbox" name="conf_13" id="conf_13" checked="checked" tabindex="1" />
</dd>
</dl>
<dl>
<dt>
<label for="conf_1">Website Name</label><br /><span>Name of the website. Appears in title of browser and some links</span>
</dt>
<dd>
<input type="text" name="conf_1" id="conf_1" size="40" maxlength="50" tabindex="2" value="Kinetic" />
</dd>
</dl>
</fieldset>
<fieldset>
<legend>Login Options</legend>
<dl>
<dt>
<label for="conf_7">Login Attempts</label><br /><span>Amount of login attempts before time delays start occurring to prevent forced access</span>
</dt>
<dd>
<input type="text" name="conf_7" id="conf_7" size="2" maxlength="2" tabindex="6" value="3" />
</dd>
</dl>
<dl>
<dt>
<label for="conf_8">Login Failure Delay</label><br /><span>Amount of time (in minutes) to delay a member from logging in with the failed account details</span>
</dt>
<dd>
<input type="text" name="conf_8" id="conf_8" size="2" maxlength="2" tabindex="7" value="5" />
</dd>
</dl>
</fieldset>
</div>
</form>
</body>
</html>
This must be a common problem but I have no way to look it up in the forum. In Firefox and IE7 you can define CSS for successive tags with the larger sign: div>span { ... } Does anyone know of anything similar for IE6 ? |
|||||||