Adding a scrolling text bar over a picture.

hallows · 07-18-2011, 07:18 PM

I have been working on a guild for neopets, and as a beginner to coding I was stumped when my text box went below my picture not on it. Can someone tell me how to put it on the picture please?

Sammy12 · 07-18-2011, 07:27 PM

Code:

<!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" lang="en">
	<head>
		<style>
			* { margin: 0; padding: 0; }
			
			.comment {
				position: relative;
				background-color: #F4F4F4; 
				width: 302px;
				height: 132px;
				margin: 20px auto;
				z-index: 0;
			}
			
			.comment * {
				font-family: Arial, Helvetica, sans-serif;
			}
			
			.comment textarea.cgi {
				width: 300px;
				height: 130px;
				z-index: 2;
				background-color: transparent;
				border: #BBB 1px solid;
			}
			
			.comment textarea.cgi + img {
				position: absolute;
				top: 1px;
				left: 1px;
				z-index: -1;
				width: 160px;
				height: 120px;
                                border: 1px solid;
			}
		</style>
	</head>
	<body>
		<div class="comment">
			<textarea class="cgi"></textarea> 	
			<img src=""/>					
		</div>
	</body>
</html>

fixed. i really hope this is what you were asking for lol

doesn't work in ie7 or 8. gonna have to use an


not really sure if their is a universal way to position things behind like this. if there is, i would be very interested in learning how

hallows · 07-18-2011, 08:04 PM

the neopets site wont allow it so I have no idea. Thank ya though. it was just i would put <img src="http://i408.photobucket.com/albums/pp164/jasonem/Harry-Potter-The-Order-Phoenix-Deat.jpg"> and under it the text table, but the table would be under the pic not on it

Sammy12 · 07-18-2011, 08:06 PM

use z-index: number; the larger number will appear on top