CSS - Setting Background As Wrapping Element

hello. i'm building a javascript application which will allow the user to select a file from his/her hard drive (using <input type='file' />) and display the image in the background. when the user hits submit, the image will be uploaded and in the future, the user will have the image hosted from the server.

the reason i post this in the CSS forum is because the error is coming from CSS, not javascript. i need to know how to point the css to an image on the user's local machine.

Don't know if I got the language right on the headline? I've got the following css for my forms:
.form table {
border-collapse: collapse;
color: black;
border: 1px solid black;}

and the markup looks like this

<table class="form" width="100%" cellspacing="0">

however when I link a different page to the same sheet I'm getting a table that has been styled with the above scc even though i haven't marked up the class...

any ideas...

good
http://www.rickweston.com/my_ucwdc/membership/register.php

bad
http://www.rickweston.com/judge/about_judge/index.php

thnks for any help

Usually I find anything I need to know if I have the source code of a web site but this time I've lost. Some web sites changes the background color of the browsers address (URL) input field (works only with Gecko type browers I think).

Just one example: https://www.gmx.net (a commercial email service provider in Germany).

How can this be done?

Ciao, Meph

*** After posting I have been playing with other options, but would still love to know why the bg position on .container_12 does not work.


Please look at this page http://www.mts-diesel.com/index.php?cPath=20_24_56 There is an element w/ an class of container_12 that I have put an inline style declaration of

style="background:transparent url(images/container_12_bg.jpg) 0 1000px !important;"

I am trying to push the background down below the navigation but for some reason I can only move the background image to the right, and not down as needed.

Thank you for any help. Tom

I'm trying to create a block quote like in the image below:

http://www.norrislakevillas.com/images/block-quote-sample.png

The quotation marks sit in the bottom right corner of a 50 X 45 px transparent PNG image with 10px of spacing on the top and left.

The element is rendering correctly with the exception of the background image, it just won't show up.

CSS Code:
Code:

#block_quote{
   float:left;
   width:400px;
   background:#f7f7f7;
   background-image:url(images/quote-top.png) left top no-repeat;
   margin:50px 0 100px 53px;
   border:1px solid #ccc;
}

#block_quote p{
   font:italic 14px segoe ui, arial, sans-serif;
   color:#5f5f5f;
   line-height:1.4em;
   margin:0;
   padding:20px 15px 20px 60px;
}

Any ideas why the image isn't rendering?

Thanks

Given an element of a fixed width but varying heights, is there a way to give that element a gradient background that would scale to the height? I would be really impressed if someone could show me a way. Thanks.

I can't figure out what's going on here. View this page in Firefox and the problem is obvious:

http://www.westportsquares.com/page...e-internet5.php

The background on the word Comments which is between H2 tags extends upward. Here is my code for h2 and the parent element:

Code:

div.comment { 
	padding: 4px; 
	text-align: left; 
 }
	
div.comment h2 {text-align: center;  
  background: #484452; 
  color: #A098B3; }	

Hopefully I'm just missing something simple here. Any suggestions?

Hi,

My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner).

Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page.

I have tried various approaches and read up on positioning but so far have not been able to do it using css.

Any help is much appreciated.

Jim

I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover.

Here is an example:


Code:

<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>

.link a { some link height }

.link a span { display: none; }

.link a:hover span {
  position: abolute;
  top: (some link height * the number of links);
  background-image: (some image url)
  width: (image width)
  height: (image height)
}

Appearance:

------
Link1
Link2
Link3
Link4
-------
-------
Rollover Image to appear here
-------

The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed.
IE
------
Link1
sublink1
sublink2
Link2
Link3
Link4
-------

will break my scheme.


Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang?

If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that.

thanks.

Okay, I've been going MENTAL with this. Please help!!!! Here is the page: go to bartlettinteractive dot com / retail /index.html (sorry, I am a new user so they won't let me put in the actual link).

Anyways, when you minimize your screen, the nav WRAPS when I want it to just be hidden.

I have tried every combination of overflow:hidden and whitespace:nowrap I could imagine and nothing is getting it done.

Please be my CSS hero.

I'm having trouble with creating CSS rollovers. Well, not so much trouble as frustration. The rollover itself works fine in FF, and that's cool by me, but I have to make it work in IE, and whilst it *does* work in IE, whenever I roll over one of the CSS buttons, a 2 pixel gutter appears in my border div

See what I mean... Open this link in FF and then in IE

Ahh, great, now it's putting the gutter there in IE regardless. Great.

Here's the CSS I'm using:

Code:

body { font-family: tahoma; font-size: 12px; background: #fff; }
		img { border: 0px; }
		
		#Container { width: 520px; height: 400px; border: 1px solid #808080; margin-left: auto; margin-right: auto; background: url("backdrop.gif"); background-repeat: repeat; }
		#HeaderContainer { border: 0px solid none; width: 500px; padding-bottom: 0px; float: left; }
		#NavContainer { position: relative; margin-left: auto; margin-right: auto; border: 1px solid #000; width: 500px; float: left; padding: 2px; background: #fff; margin: 0px; }
		#FooterContainer { border: 0px solid none; width: 500px; float: right; padding-top: 4px; padding-right: 0px; background: #fff; text-align: right; margin: 0px; }
		
		.nav { width: 100px; border: 0px solid none; background: #c0c0c0; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
		.navSelected { width: 100px; border: 0px solid none; background: #fff; height: 20px; text-align: center; padding-top: 5px; float: left; margin: 0px; }
		a.navText, a.navText:visited { font-weight: bold; color: #000; text-decoration: none; }
		a.navTextSelected, a.navTextSelected:visited { font-weight: bold; color: #808080; text-decoration: none; }

and here's the HTML (minus the CSS):

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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Page :: </title>
	<style type="text/css" media="screen">
		<!--Already included in snippet above /-->
	</style>
	<script type="text/javascript">
		function roll(item, onOff) {
			var	targetDiv;
			var targetText;
			var showHide = onOff;
			
			targetDiv = document.getElementById(item.id);
			targetText = document.getElementById(item.id + "Text");
			if (showHide == 1) {
				targetDiv.className = "navSelected";
				targetText.className = "navTextSelected";
			} else if (showHide == 0) {
				targetDiv.className = "nav";
				targetText.className = "navText";
			}
		}
	</script>
</head>

<body>

<div id="Container">
	
	<div id="NavContainer">
		<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Toast" class="nav"><a id="ToastText" class="navText" href="/test.php?p=Toast">Toast</a></div>
		<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Lemons" class="nav"><a id="LemonsText" class="navText" href="/test.php?p=Lemons">Lemons</a></div>
		<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Cakes" class="nav"><a id="CakesText" class="navText" href="/test.php?p=Cakes">Cakes</a></div>
		<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Nachos" class="nav"><a id="NachosText" class="navText" href="/test.php?p=Nachos">Nachos</a></div>
		<div onmouseover="javascript:roll(this, 1);" onmouseout="javascript:roll(this, 0);" id="Frogs" class="nav"><a id="FrogsText" class="navText" href="/test.php?p=Frogs">Frogs</a></div>
	</div>
	
	<div id="FooterContainer"><a href="http://telestatic.net"><img src="http://telestatic.net/images/tsnLogo.jpg" width="136" height="15" alt="The Telestatic Network" title="The Telestatic Network" /></a>&nbsp;<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fresume.telestatic.net%2Ftest.php%3F"><img src="http://telestatic.net/images/btnXHTML.png" alt="Valid Strict XHTML 1.0!" title="Valid Strict XHTML 1.0!" height="15" width="80" /></a>&nbsp;<a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fresume.telestatic.net%2Fresume.css"><img src="http://telestatic.net/images/btnCSS.png" alt="Valid CSS!" title="Valid CSS!" width="80" height="15" /></a></div>
</div>

</body>

</html>

Hope to god someone can explain what's going on before I go totally insane.

I searched the forum and could not find a post with a similar issue, so I am creating this one.

I have left and right containers, and the heights only wrap to the contents in the right container. So if there happens to be more content in the left container, the text exceeds the div background and continues onto the page background.

URL REMOVED

I appreciate any help I can get with this - Cadet Palmer

Hi,
Does anyone know how to get text in a textarea to automatically wrap when the text input hits the right hand border of the textarea.

It works fine in I.E. without any style rules or using the html tag 'wrap'. But in firefox the text just continues horizontally and a horizontal scroll bar appears at the bottom of the box when the text reaches the right-hand border.

Read a solution somewhere, sometime ago but can't remember where.

Tried so far:
[1] css overflow rule
[2] HTML 'wrap' attribute
[3] css white-space rule

solution must validate CSS.

thanx in advanz

My menu keeps wrapping when the browser window is resized... How do I prevent this?

Here is my code:

index.php
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>Sphinx Gaming Inc. -::- Home</title>
<link rel="stylesheet" type="text/css" href="main.css" />

<script type="text/javascript">
	var blanking_flag = true;
	function search_remvalue(method)
	{
		if (blanking_flag === true && method == 'focus')
		{
			document.search_frm.query.value = "";
			blanking_flag = false;
		}
		else if (method == 'focus' && document.search_frm.query.value == "Search...")
		{
			document.search_frm.query.value = "";
			blanking_flag = false;
		}
		
		if (blanking_flag === false && document.search_frm.query.value == "" && method == 'blur')
		{
			document.search_frm.query.value = "Search...";
		}
	}
</script>

</head>

<body>
	<div id="wrapper">
         <div id="header">
		 
		       <a href="index.html"><h1><p>Sphinx Gaming Inc.</p></h1></a>	 
			   
		 </div>

         <div id="navigation">
		 
				<ul >
					<li><a href="#">Home</a></li>
					<li><a href="#">Products</a></li>
					<li><a href="#">Services</a></li>
					<li><a href="#">Downloads</a></li>
					<li><a href="#">Support</a></li>
					<li><a href="#">About Us</a></li>
					<li><a href="#">Advertising</a></li>
					<li><a href="#">Contact Us</a></li>
					<li><a href="#">Partners</a></li>
				</ul>
				<form name="search_frm" action="" method="get">
				<input type="text" size="30" name="query" value="Search..." onBlur="search_remvalue('blur')" onFocus="search_remvalue('focus')"/>
				</form>
				
		 </div>
		 <div id="content">
		      
			  <p>This is the main content</p>
	          		 
		 
		 </div>
		 <div id="footer">
		       
			   <p> It is currently <?php echo date('l \t\h\e  jS \of F Y h:i:s A'); ?><br/>	</p> <br/>
			    <p class="bottom">Copyright Richard Carson, 2010. If you have any questions, comments or concerns, feel free to email me at rcarson@sphinxgaming.com</p>
	     </div>   </div>
   
</body>
</html>

main.css
Code:

* { padding: 0; margin: 0; }

html,
	body {
		margin:0;
		padding:0;
		height:100%;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 13px;
		white-space:nowrap;
	}

p {
	padding: 10px;
}

#wrapper { 
	margin: 0 auto;
	width: 100%;
	min-height:100%;
	position: relative;
}

#content { 
	float: left;
	color: #333;
	background: #FFFFFF;

	padding:10px;
	padding-bottom:60px;	/* Height of the footer */
}

#header {
	color: #555;
	width: 100%;
	float: left;
	height: 75px;
	background: #000000;
}

#header h1 {
	font-size: 50px;
}

#header p {
	text-align: center;
}

#header a {
	width: 99.9%;
	height: 100%;
	float: center;
	text-align: center;
	display: block;
	text-decoration: none;
	font-weight: normal;
}

#header a:link { 
	color: #999;
	border: none;
}
#header a:visited { 
	color: #999;
	border: none;
}
#header a:hover { 
	color: #999;
	border: none;
}
#header a:active { 
	color: #999;
	border: none;
}

#footer { 
	position:absolute;
	bottom:0;
	width:100%;
	height:60px;			/* Height of the footer */
	clear: both;
	color: #999;
	background: #333;
}

#footer p {
	text-align: right;
	margin: 3px;
	padding: 1px;
	vertical-align: top;
}

#footer p.bottom {
	text-align: center;
	font-size: 10px;
	vertical-align: bottom;
	}

#navigation {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	height: 25px;
	color: #999;
	background: #333;
	text-align: center;
}

#navigation ul
{
	padding: 0;
	margin: 0;
	display:inline;
	width: 100%;
} 

#navigation li
{
	float: left;
	padding: 0;
	margin: 0;
	display:inline;
} 

#navigation li a
{
	height: 25px;
	line-height: 25px;
	float: left;
	width: 120px;
	padding: 0;
	margin: 0;
	display: block;
	border-left: 0.1em solid #444;
	border-right: 0.1em solid #444;
	color: #999;
	text-decoration: none;
	text-align: center;
} 

#navigation a:link { 
	color: #999;
}
#navigation a:visited { 
	color: #999;
}
#navigation a:hover { 
	color: #BBB;
}
#navigation a:active { 
	color: #FFFFFF;
}

Thanks in advance,
Richard Carson

Good afternoon, hoping you guys can help me with something that's been tasking me the last couple of days.

Basically I have an image floated right inside a container div, and I wan't some divs to wrap around this on the left. I've done this bit.

Inside each of the divs is a left floated number and a paragraph of text. I'm having trouble getting this not to wrap around the number without floating certain elements and breaking the rest of the layout.

Here's a stripped down version of the page (sorry if the code is messy).

Code:

http://tomarcher.co.uk/upload/linkdump/test/single%20-%20Copy.php

I look forward to your replies.