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

<!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