HTML - Color Fade And Onmouseout Problem

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.

Hi.I am trying to put different colors in s same paragraph.So i use <a style="color:blue">my text</a> then <a style="green">same paargraph continued </a>.It works but i was thinking if this is the right way to do or is there another way?

Hello, so basically this summer I took the liberty of making a personal website for myself. I wanted to get to know XHTML and CSS a little bit more over the summer. Getting to my question though, I made a rollover menubar (using photoshop) and everything was going swell until I wanted to get it up and running in my html file.

I made a table inserting the non and rollover images and instead of using the massive javascript code block Dreamweaver gave me I decided to use simple "onmouseover/onmouseout" code snippets. When I view it in Firefox it is fully functional but for some reason the rollover images are a little shifted, correct size, but shifted, so there is white space in between the non rollover images.

Here's what is looks like:



Here is the code for the table/banner (3 rows and 9 columns):

Code:

--------------------------------------------------------------------------------------------------------

banner_01: large blue block (3 rows merged) left of home
banner_02: blue rectangle above home
banner_03: vertical blue in between home/blog (3 rows merged)
banner_04: blue rectangle above blog
banner_05: vertical blue in between blog/misc (3 rows merged)
banner_06: blue rectangle above misc
banner_07: vertical blue in between misc/contact (3 rows merged)
banner_08: blue rectangle above contact
banner_09: vertical blue right of contact (3 rows merged)
banner_10/banner1_10: home (regular)/home (hover)
banner_11/banner1_11: blog (regular)/blog (hover)
banner_12/banner1_12: misc (regular)/misc (hover)
banner_13/banner1_13: contact (regular)/contact (hover)
banner_14: blue rectangle under home
banner_15: blue rectangle under blog
banner_16: blue rectangle under misc
banner_17: blue rectangle under contact

--------------------------------------------------------------------------------------------------------

<table align="center" width="925" height="140" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="283" rowspan="3"><img border="0" src="banner_01.gif" width="283" height="140"></td>
      <td width="134"><img border="0" src="banner_02.gif" width="134" height="16"></td>
      <td width="23" rowspan="3"><img border="0" src="banner_03.gif" width="23" height="140"></td>
      <td width="134"><img border="0" src="banner_04.gif" width="134" height="16"></td>
      <td width="23" rowspan="3"><img border="0" src="banner_05.gif" width="23" height="140"></td>
      <td width="134"><img border="0" src="banner_06.gif" width="134" height="16"></td>
      <td width="23" rowspan="3"><img border="0" src="banner_07.gif" width="23" height="140"></td>
      <td width="134"><img border="0" src="banner_08.gif" width="134" height="16"></td>
      <td width="37" rowspan="3"><img border="0" src="banner_09.gif" width="37" height="140"></td>
    </tr>
    <tr>
      <td><!---HOME BUTTON--->
	    <a href="home.html"><img border="0" width="134" height="112" src="banner_10.gif" 
		onmouseover="this.src='banner1_10.gif';" 
		onmouseout="this.src='banner_10.gif';"/>
            </a>
      </td>
      <td><!---BLOG BUTTON--->
	    <a href="blog.html"><img border="0" width="134" height="112" src="banner_11.gif" 
		onmouseover="this.src='banner1_11.gif';" 
		onmouseout="this.src='banner_11.gif';"/>
            </a>
      </td>
      <td><!---MISC BUTTON--->
	    <a href="misc.html"><img border="0" width="134" height="112" src="banner_12.gif" 
		onmouseover="this.src='banner1_12.gif';" 
		onmouseout="this.src='banner_12.gif';"/>
            </a>
      </td>
      <td><!---CONTACT BUTTON--->
	    <a href="contact.html"><img border="0" width="134" height="112" src="banner_13.gif" 
		onmouseover="this.src='banner1_13.gif';" 
		onmouseout="this.src='banner_13.gif';"/>
            </a>
      </td>
    </tr>
    <tr>
      <td><img border="0" src="banner_14.gif" width="134" height="12"></td>
      <td><img border="0" src="banner_15.gif" width="134" height="12"></td>
      <td><img border="0" src="banner_16.gif" width="134" height="12"></td>
      <td><img border="0" src="banner_17.gif" width="134" height="12"></td>
    </tr>
  </table>

I hope that the content didn't frazzle anyone, I would just like to fix the display of the menubar as it is fully functional.

Thank you very much,
JP

EDIT: I would also like to make the banner the whole width of the browser but it breaks up the images when I try to do so, just wondering if anyone can figure that out too. 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!

I have a social network. I want my users to be able to pic colors for certain things...
I'd really like to use the GUI that twitter has for this, but that could be expensive... So how do I do it?

And how do i get smilies to input text into a text box like this one... Dynamic pages are going to be hard i think

So the plan is to play this sound MP3 as soon as the site gets entered.

I also need it to loop untill the person clicks on either Dutch or English.. and gets directed towards the destined homepage where the MP3 file fades out within about 10 seconds.

My question.. can I do all the above with HTML?

I thought about editing the last part of the mp3 file manually so ill make it fade and then just play that faded mp3 as soon as the destined homepage gets entered..
but that wont be possible, since i dont know at which point the user clicks on Enter site...

Hi everyone,
I'm building a webpage with the center portion as the content area. I have a background image for the entire page, then another background image for the content area, then more image links stacked on top of the content area. What I want to do is for the content area to fade in/out to different pages depending on which image link I click.
What I did is have all the "pages" in one html file, separated by div containers. Clicking a link will navigate to that div container. Since each "page" is essentially just a background image with some content on it, I tried to stack all of them into the exact same spot, but I'm having trouble with this as all the pages currently are lined up vertically, going below my screen hidden from view.

Here's an illustration of what it looks like:


I got everything working now except for two annoying problems:
- The fade out animation does not play when navigating to any page except the home page (navigating to home page the animation will play)
- When I go to any page except home page, all the images will appear lined up vertically, causing the scroll bar at the side to appear briefly before disappearing, since having each page stacked and all visible will go beyond bottom of my screen, which is very unappealing

Here is my code so far:
I've simplified it to two content pages so it's easier to read.

HTML:
Code:

<meta charset="utf-8">
<title>The Elements of Go</title>

	<!--jQuery library-->
	<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>

    <!--CSS for html-->
	<link href="css/ElementsOfGo.css" rel="stylesheet" type="text/css">
	<!--<link href="css/ElementsOfGoFonts.css" rel="stylesheet" type="text/css">-->
    
    <!--FADE-->
    <script type="text/javascript">
	
	$(document).ready(function() {
		
		setTimeout(function() { showWindow("mainpage") }, 2000);

		$('.aboutbutton').click(function() { 
			hideAllWindows();
			setTimeout(showWindow("aboutpage"), 2000);
		} );
		
		$('.mainbutton').click(function() { 
			hideAllWindows();
			setTimeout(showWindow("mainpage"), 2000);
		} );

		function hideAllWindows() {
			$('#mainpage').fadeOut();
			$('#aboutpage').fadeOut();
			$('#historypage').fadeOut();
			$('#referencespage').fadeOut();
			$('#strategiespage').fadeOut();
		}
		
		function showWindow(name) {
			$('#' + name).fadeIn();
		}
	});
	</script>
    
</head>

<body>

	<div id="backgroundcontainer">
     
            <div id="mainpage">

            	CONTENT GOES HERE FOR THIS PAGE

                <!--image link to head to about page-->
                <a class="transition aboutbutton"><img src="some image">
                </a>

            </div>
        
            <div id="aboutpage">

                CONTENT GOES HERE FOR THIS PAGE

                <!--image link to head back to main page-->
                <a class="transition mainbutton"><img src="some image">
                </a>
                </div>
          
        </div>
	
</body>

</html>

CSS:
Code:

@charset "utf-8";
/* CSS Document */

/*The webpage background image*/
body {
	background-image:url(../pictures/menubackgroundbubbles.png);
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
}

#backgroundcontainer {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/*background image for the content pages*/
#mainpage,#aboutpage {
	background-image:url(../pictures/background.png);
	background-position:center;
	background-attachment:fixed;
	background-repeat:no-repeat;
	overflow:hidden;
	display: none;
	margin-left: auto; 
	margin-right: auto;
	position: relative;
	width:800px;
	height:570px;
}

#mainpage img,#aboutpage img {
	position: absolute;
	border:none;
	width: 119px;
	height: 119px;
}

Thanks for any help!

Hi guys, we're using a WordPress theme for a clients site and we'd like to know how to make the hero banner on the home page automatically rotate?

http://www.anchorhotelhaydonbridge.com/newsite/

Thanks in advance,

Paul

Hello,

I am trying to achieve something in html that im not sure is possible, but i have been told it is.

If I have a line of text with a link, is it possible when someone clicks the link, the line of text changes out and a new line of text pops up?

for example. if i have this:

<p>hello, please click <a href="#">here</a> to change this text</p>

when the user clicks the link, the line pops out and the following line pops in in its place:

<p>hello, this is the new text, please click <a href="#">here</a> to change back to the old text</p>

Is this possible to do with just html (html5?) and css/javascript? if so, how would i go about doing it?

I appreciate any help.

thank you.

Ben.

edit: i no longer need the text to fade, it just has to swap the lines of code on click.

Hello,

I am using some Jquery code + CSS to display fade in and out text above each image. However, i can't figure out what I am doing wrong and the text is not being displayed when the user hovers the mouse over each image..

http://www.greekconcierge.com/group.php

Any ideas?

best regards,
Andy

I have a page with a black background, and a script so that when a link is clicked the page fades out and then redirects to the link location. Since the background is black, the page fades to black before redirecting. How can I have it fade to white and then redirect?

ok so I found this code online:

HTML Code:

                        <div class="one"><a class=one-link href="http://benjaminpotter.org"><span class=one-span 
                onmouseover="if (window.Station) { Station.run(this, 'opacity', {from:Station.read(this, 'opacity') || 0, to: 1, time: 300, f: Interpolators.sineCurve}); }"
                onmouseout="if (window.Station) Station.run(this, 'opacity', {from:Number(Station.read(this, 'opacity')) || 1, to: 0, time: 300, f: Station.f.inversion(Interpolators.sineCurve)})"
            ></span></a></div> 
                    </div>

can someone help me understand it and potentially get it to work?

When I view my site at 32 bit color at a res of 1028x1200, I can't see my hr lines.

But when I view it at 16 bit I can.

Anyone know why?

And yes it and my CSS validate.

Geoserv.

edit: site www.apnaonline.ca

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