CSS - Why Does Color Change
the code here works fine, except that the displayed text changes from white to black. It would be nice if each new text would start as FFFFCC and then fade to 3E3D11. Here is the script that I'm manipulating from Java Script Source:
<!-- Paste this code into the CSS section of your HTML document --> #tic { /* enter any styles for the ticker below */ border: .05em #CEC3AD solid; font-size:0.85em; padding:10px; width:400px; line-height:20px; } #tic * { /* this will hide all children tags */ font-size: 1em; margin:0px; padding:0px; display:none; } #tic a { /* add more tags to this list if you wish to display them inside the children */ display:inline; } <!-- Paste this code into an external JavaScript file --> /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: James Crooke :: http://www.cj-design.com */ var list; // global list variable cache var tickerObj; // global tickerObj cache var hex = 255; function fadeText(divId) { if(tickerObj) { if(hex>0) { hex-=5; // increase color darkness tickerObj.style.color="rgb("+hex+","+hex+","+hex+")"; setTimeout("fadeText('" + divId + "')", fadeSpeed); } else hex=255; //reset hex value } } function initialiseList(divId) { tickerObj = document.getElementById(divId); if(!tickerObj) reportError("Could not find a div element with id \"" + divId + "\""); list = tickerObj.childNodes; if(list.length <= 0) reportError("The div element \"" + divId + "\" does not have any children"); for (var i=0; i<list.length; i++) { var node = list[i]; if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) tickerObj.removeChild(node); } run(divId, 0); } function run(divId, count) { fadeText(divId); list[count].style.display = "block"; if(count > 0) list[count-1].style.display = "none"; else list[list.length-1].style.display = "none"; count++; if(count == list.length) count = 0; window.setTimeout("run('" + divId + "', " + count+ ")", interval*1000); } function reportError(error) { alert("The script could not run because you have errors:\n\n" + error); return false; } var interval = 7; // interval in seconds var fadeSpeed = 40; // fade speed, the lower the speed the faster the fade. 40 is normal. <!-- Paste this code into the HEAD section of your HTML document Change the file name and path to match the one you created --> <script type="text/javascript" src="yourFileName.js"></script> <!-- Paste this code into the BODY section of your HTML document --> <div id="tic"> <h1>Welcome to The JavaScript Source ...</h1> <p> The JavaScript Source is a part of Jupitermedia, in the Web Developer channel of the internet.com network.</p> <p> All the scripts on this site are free for personal or business use.</p> <p> The only requirement is that you leave the credit information inside the script.</p> <h2>JavaScripts</h2> <p> JavaScript programs are contained within the HTML code of the Web page and are interpreted by the browser as it's read.</p> <p> JavaScript provides greater flexibility through such luxuries as being able to create windows, display moving text, sound or other multimedia elements with relative ease.</p> <h2>Some Basics</h2> <p> JavaScript is not Java; it is an object-based scripting language; and it is cross-platform. </p> </div> <script type="text/javascript"> <!-- initialiseList("tic"); //--> </script> <p><div align="center"> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </div> Similar TutorialsHi, I'm just learning css and need some help. I am attaching an html page that has a navigation bar that changes the background color of the table cell when you mouse over the text link. It works OK but I would like to have the bg color change when you mouse over the td cell. I am currently making it look like it changes the td background by adding Code: display: block; line-height: 32px; to the "td.navbar a:hover" class. Is it possible to change the td background when mousing over it using only css? Here's the code that I have now: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color: #000000; } td.navbar { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #FFFFFF; text-decoration: none; } td.navbar a:link{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #FFFFFF; text-decoration: none; } td.navbar a:visited{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #FFFFFF; text-decoration: none; } td.navbar a:hover{ background-color: #000000; height: 33px; width: 88px; display: block; line-height: 32px; } td.navbar a:active{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #FFFFFF; text-decoration: none; } --> </style></head> <body> <table width="780" height="35" border="0" cellpadding="0" cellspacing="0" bgcolor="#000099"> <tr> <td width="41"> </td> <td width="2"></td> <td width="88" height="33" class="navbar"><div align="center"><font><a href="http://www.mysite.com/">Home</a></font></div></td> <td width="2"></td> <td width="88" class="navbar"><div align="center"><a href="#about">About</a></div></td> <td width="2"></td> <td width="88" class="navbar"><div align="center"><font><a href="inc/support.php">Support</a></font></div></td> <td width="2"></td> <td width="88" class="navbar"><div align="center"><font><a href="inc/contact.php">Contact</a></font></div></td> <td width="2"></td> <td width="88" class="navbar"><div align="center"><font><a href="inc/services.php">Services</a></font></div></td> <td width="2"></td> <td width="88" class="navbar"><div align="center"><font><a href="inc/shop.php">Products</a></font></div></td> <td width="2"></td> <td width="88" class="navbar"><div align="center"><font><a href="inc/links.php">Links</a></font></div></td> <td width="2"> </td> <td> </td> </tr> </table> </body> </html> Hello, a bit of a .css n00b and needs your help. After changing a .css sytle sheet to suit my a needed color shceme the links become underlined when the color is changed. Anyone willing to to tell why. Any help appreciated. A sample of the link code: /*- Links */ #primary a:hover, #primary a:visited:hover, .secondary a:hover, .secondary a:visited:hover { text-decoration: none; } h2 a:hover, h2 span a:hover { color: #423525 !important; <!---27d to 423525 --> text-decoration: none; } a{ color: #423525C; <!---27d to 423525 --> text-decoration: none; } .itemtext a:visited { color: #b41; } Thanks. I know how to make the background of a link change but how do you do it if it isnt a link? in css... Hello, and thanks in advance for anyone who helps me with this. I want to know if it's possible to choose one color on a page and change it to another. This is the page I want to change: http://www.neopets.com/randomfriend.phtml?user=bubbapyque The menu on the left is uneditable by me because it's on Neopet's server. But I'd like to change the yellow color of the menu to something else. Possible? Thanks. Crystal like you see in pic table rows are different color. but i wanna block this for popup. this is popup html Code: <tr> <td class="td_popup"><div class="f1">First Name :</div></td> <td class="td_popup"><input name="firstname" id="firstname" type="text" /></td> </tr> js for css Code: $(document).ready(function() { zebraRows('tr:odd td', 'odd'); $('tbody tr').hover(function(){ $(this).find('td').addClass('hovered'); }, function(){ $(this).find('td').removeClass('hovered'); }); //default each row to visible $('tbody tr').addClass('visible'); css Code: th:hover { cursor:pointer; } .td1 { background:#666666; height:25px; text-align:left; font-weight:bold; font:arial; font-size:12px; line-height:10px; color:#FFFFFF; padding:2px; margin-left:auto; margin-right:auto; text-indent:3px; } td.odd { background-color:#F0F0F0; } .td_popup{ background-color:#DDD; } Ok so I've got a dropdown menu (what you use to select size/font/color when posting a thread) for a search form i'm doing, but the thing is nothing i seem to do in css seems to be able to get rid of the ugly grey outline and grey dropdown button, but as i'm seeing here on the forums the same ugly grey outline appears, is this a problem that is only resolved with like the latest version of i.e., is it possible or not? Thank you, Robert Velasquez UpBeetMusic.com Hi, I have the following sample html. In here moving mouse over in any <li> changes backgroung color. Also I want to have the following as is due to the currently functionality Code: <li><a onMouseover="this.style.cursor='crosshair'; cssdropdown.dropit(this,event,'dropdownmenu2')">News</a></li> here I still want to have <a without href but only wants to change the cursortype and the background color, but also I want the background color to show like others i.e. background color changes too. How can I achieve this functionality. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style> #sample ul li a{ float: left; color: #7F7F7F; font-weight: bold; padding: 6px 12px 6px 7px; text-decoration: none; background-color: #9C2B01; } #sample ul li a:hover{ background-color: cyan; } </style> </HEAD> <BODY> <table><tr><td> <div id="sample"> <ul> <li><a href="http://www.test.com">Home</a></li> <li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropdownmenu1')">Education Services</a></li> <li><a onMouseover="this.style.cursor='crosshair'; cssdropdown.dropit(this,event,'dropdownmenu2')">News</a></li> <li><a href="http://cnn.com" onMouseover="cssdropdown.dropit(this,event,'dropdownmenu3')">Search</a></li> </ul> </div> </td></tr></table> </BODY> </HTML> Any help is appreciated. Thanks I am using a Wordpress template called Arthemia Premium. I want to change the background color in the headline section, but nothing "sticks" when I change the hex color codes in the style.css. Tell me what to post here and I will. Thanks BTW I have very basic knowledge of CSS Hi, I just want to change the color when I mouseover an href without a style sheet. This does not work: <a href="test.html" style="a:hover { color: #DA8525; }">Test</a> Is that suppose to work? Thanks for taking the time to read my question. I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working. Any ideas? Thanks, Brad hey guys, this has been bothering me for several days and really don't think theres a solution to it, but I might as well post it up to see if anyone else has a similar problem. the problem is when using CSS to change background colors on rollover, it is being slow in IE, but works perfectly fine in firefox. this, however, only happens when I have an extra div beneath the rollovers. i can't really explain it well, so I will show you what i mean. on the following page of a website I am developing you there are rollover effects on the right hand side for 'galleries' 'site statistics' and even the div below that. the link is: http://rollinlow54.com/galleries/ now, in firefox, the background change is instant, no lag whatsoever. in IE, there is a good bit of lag, driving me crazy. so i played around with it forever, and realized that the only way to prevent IE from lagging is to remove the div with 'popular galleries'. so i did that he http://rollinlow54.com/fixme.php Here is the CSS for the code in the first page: Code: #links a { margin-left: 8px; margin-right: 8px; margin-bottom: 0px; margin-top: 4px; padding: 3px; text-decoration: none; width: 170px; float: left; background-color: #3A628A; color: white; font-family: arial, verdana, sans serif; font-size: 11px; } #links a:hover { text-decoration: none; background: #0A2F54; } that controls the 'galleries' 'site statistics' and other main links, and there are similar controls for the 'popular galleries' div beneath that. here is the HTML: Code: <div id="links"> <a href="http://rollinlow54.com/">galleries (18)</a> <a href="http://rollinlow54.com/">site statistics</a> <a href="http://rollinlow54.com/">download my resume (pdf)</a> <a href="http://rollinlow54.com/">contact information</a> <a href="http://rollinlow54.com/">visit company site</a> </div> there are similar HTML controls for the 'popular galleries' links as well. is there anyway around this?? Thanks for taking the time to read my question. I have a container in which I have a link. I would like to change the color of the container when the user hovers over the link. Can I do that? I can make the background of the text change, but the container is wider than the text. HTML: Code: <div id="LinkBox" class="LB1"><a class="LinkBoxLink" href="#">Link #1</a></div> CSS: Code: #LinkBox { float: right; height: 20px; margin-bottom: 15px; border-color: gainsboro; border-width: 1px; border-style: solid; text-align: center; } .LB1 { width: 241px; } a.LinkBoxLink:link { text-decoration: none; color: black; } a.LinkBoxLink:visited { text-decoration: none; color: black; } a.LinkBoxLink:hover { background-color: red; color: yellow; } a.LinkBoxLink:active { text-decoration: none; } Thanks again for your help. Brad Hi All I wonder if someone can help me, I would like to change background and foreground colour of two <td>'s that are in One <tr> . This is the tricky part, I want it so that when I Hover on <tr> one <td>'s Foreground colour is changed and other <td>'s Background colour. To me that seem impossible in css alone and if that is not the case can someone please enlighten me. Thanks Hi. I am having dificulty getting a menu item to change colour and background colour when mouse over http://www.des-otoole.co.uk/HC2010/holidayclub.php any reason as it is at the end of the style sheet code Code: #tabnav a:hover { background: #bfbfbf; color: #f05320; } Hi, I have 5 input textbox in my page. I want to change the background color of one input textbox to red. How to change the color of the input box to red? Thank you I'm trying to create a hover effect that changes the background color behind a link, but instead of ending with the text, the color change extends to the width of the div. It's hard to explain, so here's an example: checkout the sidebar at pastemagazine.com. I've tried dissecting their source code, but they have about 5 different stylesheets and it's really hard to follow. As far as I can tell, this is what makes the hover effect and I just can't figure out how they make the background color change extend beyond the text. I have my links in a ul just as they do and they don't seem to be doing anything else special. Code: #sect1 ul.stories a:hover{ background-color:#d9f7ff; color: #71808F; } Thanks! cae I have these two areas. Code: .MenuItem { color:#FFFFFF; font-size:12px; background-color:#CC0000; font-weight:bold; height:18px; padding-top:5px; padding-bottom:5px; border-top:0px solid #FF0000; border-left:2px solid #FF0000; border-bottom:2px solid #FF0000; border-right:2px solid #FF0000; } .MenuItemTop { color:#FFFFFF; font-size:12px; background-color:#CC0000; font-weight:bold; height:18px; padding-top:5px; padding-bottom:5px; border-top:2px solid #FF0000; border-left:2px solid #FF0000; border-bottom:2px solid #FF0000; border-right:2px solid #FF0000; } which refer to the left nav. My code only changes the color behind the text, not the entire area (box) behind the text. Code: .MenuItemTop a:hover, .MenuItem a:hover { color:#FFFFFF; text-decoration:underline; font-size:12px; background-color:#000000; } Any ideas why? example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm Brad I have a Joomla! 1.5 site and I would like to make the colors of a current selection and the hovering text (when I mouse over a link) different colors. Right now they are both set to be white as governed by the following code in my template.css: .navigation .menu-drop > li:hover > a > span, .navigation .menu-drop > .active > a > span, .navigation .menu-drop > #current > a > span, .navigation .menu-drop > .sfHover > a > span { color: #FFFFFF; } What would I need to do to this to make the changes I need? Like is there a spot where I can split this code and add in another color? Hi, Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise. I am not very good at coding or editing HTML/CSS, so I don't know how to do this. All I know is that my website has a class on the body, and each menu item has a unique ID. My website is: http://firstcareambulance .org/ Any help is appreciated. Thanks I am trying to edit a CSS that was set up by someone else - never done this before, using Dreamweaver. I wanted the links to be a darker blue on baykeeper DOT org, so I changed the code in both homepage.css and subpage.css, the two style sheets for our website. There appears to be only one place to specify link color in each style sheet: a:link { color: #004B91; text-decoration: none; } a:visited { color: #004B91; text-decoration: none; } a:active { color: #004B91; text-decoration: none; } a:hover { text-decoration: underline; If you look at baykeeper DOT org/index.html which is drawing from homepage.css, only the main content has dark blue links. The side column does not. On any other page (drawing from subpage.css) the links are still the same color. I have checked in the .css files and refreshed the pages but clearly I'm missing something... My questions a 1. Is there some other way to set link color in CSS? I don't see any other places where I could change the color, but maybe I don't know where to look. 2. I had a similar problem with the favicon - I updated the template but it didn't apply to all the pages equally. Why is that? Is there some way to refresh individual pages' connections to the templates? Mysterious to me. 3. Once I figure this stuff out, the bottom nav links will be invisible because the darker blue will blend in - so that's a location where I *want* the link color to be different (white). How do I control the link color in different sections of the layout? Thanks in advance for any help you can provide. |