Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Adding a scrolling text bar over a picture.

    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?

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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
    <!--[if IE 7]><![endif]-->

    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
    Last edited by Sammy12; 07-18-2011 at 08:02 PM.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    use z-index: number; the larger number will appear on top

  • Users who have thanked Sammy12 for this post:

    hallows (07-18-2011)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •