|
HTML - Making A Fade Color Background
So I need to make a background to a <div> with a color fade in it.
Here's the catch: The application is a Joomla template, so the <div> height will be very variable, and will always be getting longer as additional content is added, so the standard trick of just making a gradient image and setting repeat x won't work. So what I need is a way to basically have two different colors (the starting and ending colors for the gradient) and have the browser always render that gradient regardless of the element height, 1000 px, or 10000 px. Is this possible? Similar TutorialsAt the moment I have a color fade on the left side of our website behind the links. I am using the onmouseover and onmouseout commands to change the color when someone puts their cursor over the link. I have no problem changing the background color when the mouse is over the link, but I can't find a way to return it to the color fade background after someone removes their mouse. Any ideas as to what I should put in the onmouseout spot to get it to return to the original fading background? <tr> <td width="200" valign="top" style="filter:progidXImageTransform.Microsoft.Gradient(endColorstr='#F5F5F5', startColorstr='#CAF0F7', gradientType='1'" ><table width="87" height="155" border="0"> <tr> <td><table width="200" height="229" border="0" cellpadding="0" cellspacing="0" bordercolor="#F5F5F5" id="navigation"> <tr> <td width="200"><div align="center"><a href="Homepage.html" class="navText style3" onmouseover="style.backgroundColor='#CAF0F7';" onmouseout="????????" ><font color="#5A434A"><span class="style5">Home</a></div></td> </tr> thanks Hi, I want to change the background color of my textbox on focus and change it back to white on onblur event. Issue: When i change the back ground color for text box on focus it properly changes it. But when i leave the focus from textbox border color for text box is impacted and its changed to white. Please help so that border color for textbox is not impacted only background color should change here is the sample code <code> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <p> <input name="text1" type="text" id="text1" value="textbox 1" onfocus="this.style.background ='#cad5df'" onblur="this.style.background='white'"> </p> <p> <input name="text2" type="text" id="text2" value="textbox 2" onFocus="this.style.background = 'yellow'" onBlur="this.style.background='white'"> </p> </body> </html> </code> Hello all! Does anybody noticed that font colors are treated as background color while printing in IE? I just set a <font color=#f0f0f0>MY TEST</font> or <span style="color: #f0f0f0">MY TEST</span> and, on screen, it's OK. On print preview, it goes black. I can print in grayscale only if I turn "print background images and colors" on. Does anybody has a workaround on it? It will be a watermark, so it should be printed in grayscale. I dont think I'm setting a background color, specially on first example (color of the font). Thanks! On my forum we have made a member legend where if you roll the mouse over the box text pops out above saying what group it is. How do i make that text in color. Code: <script>
<!--
//variables
newtitle = "Member Legend"
pretext = "Legend:"
selected = "Selected:"
mover = "Group:"
howwide = "100%"
numbergroup = 8
dropdown = "NO"
dropdefault= "Groups- - -"
//legend;Team Name,Color,Symbol Color,Symbol,iconimg
var legend = []
legend[1]=["Administrator" , "blue" , "SYMBOL COLOR HEX" , "TEAM SYMBOL" , "http://209.85.48.9/1867/132/upload/p6013117.gif"]
legend[2]=["Moderator" , "red" , "SYMBOL COLOR HEX" , "TEAM SYMBOL" , "http://209.85.48.9/1867/132/upload/p6013069.gif"]
legend[3]=["Community Staff" , "green" , "SYMBOL COLOR HEX" , "TEAM SYMBOL" , "http://209.85.48.9/1867/132/upload/p6013104.gif"]
legend[4]=["Review Staff" , "brown" , "SYMBOL COLOR HEX" , "TEAM SYMBOL" , "http://209.85.48.9/1867/132/upload/p6013176.gif"]
legend[5]=["Graphics Staff" , "purple" , "SYMBOL COLOR HEX" , "TEAM SYMBOL" , "http://209.85.48.9/1867/132/upload/p6013202.gif"]
legend[6]=["Advertising Staff" , "orange" , "SYMBOL COLOR HEX" , "TEAM SYMBOL" , "http://209.85.48.9/1867/132/upload/p6013145.gif"]
legend[7]=["Elite Member" , "+" , "SYMBOL COLOR HEX" , "TEAM SYMBOL" , "http://209.85.48.9/1867/132/upload/p6013069.gif"]
legend[8]=["<s>Banned</s>" , "black" , "SYMBOL COLOR HEX" , "TEAM SYMBOL" , "http://i15.photobucket.com/albums/a399/Gamer3773/black3.jpg"]
//icons
newicon = "http://209.85.48.11/9339/63/upload/p3858342.gif"
//options groups
memgroup = []
memgroup[1] = [""]
//end variables;start external
document.write('<script src = "http://70.85.240.179/4035/102/upload/p370790.ibf"></script>')
//-->
</script>
here is an example http://z11.invisionfree.com/asdlk/index.php? Hi... I have the following table: HTML Code: <table width="180" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a65.jpg" width="180" height="37" border="0" /></a></td> </tr> <tr> <td> <img src="http://www.radioimaging101.com/images/spacer.gif" width="180" height="10" /></td> </tr> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a72.jpg" width="180" height="37" border="0" /></a></td> </tr> <tr> <td> <img src="http://www.radioimaging101.com/images/spacer.gif" width="180" height="10" /></td> </tr> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a76.jpg" width="180" height="37" border="0" /></a></td> </tr> <tr> <td> <img src="http://www.radioimaging101.com/images/spacer.gif" width="180" height="10" /></td> </tr> <tr> <td> <a href="#"><img src="http://www.radioimaging101.com/images/a82.jpg" width="180" height="37" border="0" /></a></td> </tr> </table> What I want to do is make those images (a65.jpg) part of the background, so that I can place objects on top and cover it up when needed, but have it show through when not covered by another object. I know this is probably remarkably simple, but I've just never had to do it before and haven't had luck with my trial and error approach. Any help is appreciated. This code is on the page at http://www.radioimaging101.com/index.php Thanks! I'm just wondering how I can find the code to change for the background color of my site. Someone else designed it, and they have left the project so I can't ask where it is. Here is the index.html file, where I'm guessing I should be able to find the place to change it (?) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Baller Magazine</title> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> <link href="baller.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> <!-- function openwin() { window.open('http://www.goodglobalgames.org/js/', 'win','width=870,height=700,status=no,scrollbars=yes,directories=no,menubar=no,resizable=no,toolbar= no'); } // --> </script> <script type="text/javascript"> <!-- function openwindow() { window.open("contact.html", "", "width=600,height=650"); } // --> </script> <SCRIPT SRC="select.js" LANGUAGE="javascript"></SCRIPT> <style type="text/css"> <!-- .style4 {color: #FFFFFF} --> </style> </head> <body onload="MM_preloadImages('images/head-o_05.jpg','img/defblog2.1-o.jpg','img/signup-o.gif')"> <div style="width:940px; margin: 0 auto;"> <table border="0" cellpadding="10" cellspacing="0" style="margin:0 auto; width:940px;"> Or is it in the css stylesheet? I would appreciate any help someone out there can provide. Thank you So I'm rather rusty with html and building a low budget site. At www.cccathens.com I have a background image set to a particular width well at www.cccathens.com/about_us I'm not using the same background image. But I would like the same look as far as having the white on each side. Is there a way to set the background color of the page so it has the same effect? Thank you, Todd Hi, i want the background color of a div to only span a percentage of the div. For example HTML Code: <div style="width: 90%; padding: 1%; background: green;">50%</div> But i only want the green background colour to span the percentage (in this case 50%) of the div. Is this possible, and if so can somebody point me in the right direction? Thankyou. <IFRAME SRC="leo.html" margin="0" FRAMEBORDER="0" style="background-color: black;" NAME="main" width="790" height="480" scrolling="--"></iframe> When I load just a picture into the frame, just simply a jpg as a link into the frame the background is black in mozilla/ff but white in IE? Any suggestions? Thanks, Leo How can I toggle the background-color of a div onclick? For example, I have a div that has a background color of #EEE. I would like this to change to #2E6DCC when I click on the div, and change back to #EEE when I click again. I am having difficulty though, as I seem to be only able to change the #EEE to #2E6DCC, and not change it back onclick. Any kind of help would be very appreciated. Here is my JavaScript : Code: function colortog(ele) {
if (document.getElementById(ele).style.backgroundColor = "#EEE") {
document.getElementById(ele).style.backgroundColor = "#2E6DCC";
}
else if (document.getElementById(ele).style.backgroundColor = "#2E6DCC") {
document.getElementById(ele).style.backgroundColor = "#EEE";
}
else {
document.getElementById(ele).style.backgroundColor = '#EEE';
}
}
How/where can I add a background color to this table? thanks. Code: <TABLE cellSpacing=0 cellPadding=0 width=100% border=0>
<TR>
<TD><font class=tbody>
<form action="/smusermanager/members/default.asp?action=login" method=post name=login language="JAVASCRIPT" onsubmit="return Validate();"><input type=hidden name=todo value="login"><input type=hidden name=url value="/smusermanager/members/default.asp">
<table border=0 cellspacing=0 cellpadding=0 width=95% align=center class=colorformborder><tr class=colorformborder><td><table border=0 cellspacing=0 width=100% cellpadding=0><tr class=colorformborder><td colspan=2><table border=0 cellspacing=1 cellpadding=5 width=100% colspan=2><tr class=colorformheader><td colspan=2><font class=textsize9><font color=white><b>Login Here</b></font></td></tr>
<tr class=colorformfields><td align=center colspan=2><font class=textsize9></font></td></tr><tr class=colorformfieldsalt><td align=right width=50% ><font class=textsize9>Email Address</font></td><td><font class=textsize9><input class=fieldbox type=text size=20 maxlength=50 name="members_username"></font></td></tr>
<tr class=colorformfields><td align=right width=20% ><font class=textsize9>Password</font></td><td><font class=textsize9><input class=fieldbox type=password size=20 maxlength=50 name="members_password"></font></td></tr><tr class=colorformfields><td colspan=2 align=right><font class=textsize9><input class=fieldbox type=submit value="Login" id=submit2 name=submit2></font></td></tr>
</td></tr></table></td></tr></table></td></tr></table></form>
<div style="padding-left: 24px;"> <font face="Arial" color="#000000" size="3"><img src="/images/Hphone.gif" style="vertical-align: middle;"> <a href="?action=login"> Home</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone1.gif" style="vertical-align: middle;"><a href="?action=register"> Register</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone2.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> FAQ</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone3.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Terms Of Use</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone4.gif" hspace="4px" style="vertical-align: middle;">
<a href="?action=forgotusername"> Contact Us</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone5.gif" style="vertical-align: middle;"><a href="?action=forgotpass"> Forgot Password</a><br><br>
<IMG src="/images/clear.gif" width=1 height=5><br><img src="/images/hphone7.gif" style="vertical-align: middle;"><a href="?action=forgotusername"> Forgot Username</a></font></div>
</font>
</TD>
</TR>
</TABLE>
So, I tried to use CSS to make my background text black. It hasn't worked... not quite sure why. Here is the site again: Thesoulofashark.com Cheers My webpage is centered, the unused side panels (underlying background) are mid-grey. I would like them white but cannot remember what the code is, or is it CSS which I do use Thanks Hi Guys, Thanks in advance for any help by the way. I am currently slightly overhauling my webpage - www.adamhuckle.com - which as you can see has a white background. I would like to change the background to black if possible, is this as simple as I am hoping it is? I have tried inserting a "<body bgcolor="#000000">" but this didnt work. How would I do this, from the little HTML knowledge I have I have noted that "<link rel="stylesheet" href="styles.css" type="text/css"/>" seems responsable for the link color (which when hovered goes from black to red). Can this be over ridden? Thanks guys, Hello eveybody, I have a question i am fairly new to the HTML scene. I am opening up an online store and have purchased volusion as my shopping cart. I wanted to change the background to a different color, but i just want the background not the entire background even the layout that is in front of the background is changing. I have gone into the css file to change it and it is not what i am looking for. Can anyone out there give me some advice on how to do this. I hope i made myself clear on what i am asking for. If not feel free to let me know and i will elaborate more. Thank you This is a coursework assignment. i've noticed on some website it gives you the option to change the color of the background too a high contrast version. is this possible without using Javascript? (html5 ideally). Obviously i'm not expecting someone to tell me what to do but a link in the right direction would be nice please I want to rebuild a website, and I want to have a button that gives people the option of three background color choices. How can I do that? Hi, I am trying to add a bgcolor to a site, however, it does not display in Firefox except when I remove the following line from the HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Is the above line necessary? Is there a way I can change it so I don't have this issue? Thanks! I have a dropdown menu and was wondering how I could change the bg color to black. This is my code for it: <div class="c2"> <form name="jump"> <select name="menu" onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;"> <optgroup label="Games"> <option>Choose an Option</option> <option value="http://broggini.webs.com/1.swf">Age Of War</option> <option value="http://broggini.webs.com/4.swf">Bloons</option> <option value="http://broggini.webs.com/5.swf">BoxHead Zombie Wars</option> <option value="http://broggini.webs.com/3.swf">Bubble Shooter</option> <option value="http://broggini.webs.com/6.swf">Hapland</option> <option value="http://broggini.webs.com/7.swf">Hapland2</option> <option value="http://broggini.webs.com/8.swf">Hapland3</option> <option value="http://broggini.webs.com/11.swf">Kitten Cannon</option> <option value="http://broggini.webs.com/12.swf">Line Rider</option> <option value="http://broggini.webs.com/2.swf">Mario</option> <option value="http://broggini.webs.com/9.swf">The Impossible Quiz</option> <option value="http://broggini.webs.com/10.swf">The Impossible Quiz 2</option> <option value="http://www.primarygames.com/arcade/action/dunebuggy/index.htm">Dune Buggy</option> <!-- --></optgroup> </select How would I add a background color to the sides of my web page? I know how to add a background color in css, but I would like to only add it to 20% on the left and 20% on the right with 60% left for content in the middle. Is this possible? |
|||||||