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 2 of 2
  1. #1
    New Coder
    Join Date
    Oct 2012
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Css Stack/Image position issues... Newbie

    Code:
    <!DOCTYPE html>
    <head>
    <style type="text/css">
    <!--
    .Generator {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 36px;
    	color: #525252;
    	clip: rect(auto,auto,auto,auto);
    	top: -10px;
    }
    body {
    	background-color:#E8FFFf;
    }
    -->
    </style><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head>
    <body class="Generator">
    <center>
        
    <p id="generator"><img src="gentletude/tape.png" width="700" height="475"></p>
    
    <input type="image" src="gentletude/play.png" onClick="myFunction()"/>
    </center>
    
    
    <div id="boldStuff"">
    </div>
    </div>
    <script type = "text/javascript">
    var i = 0;
    
    function myFunction() {
    	var r_text = [];
    	r_text[0] = "Apologise to your friend";
    	r_text[1] = "Hold the door";
    	r_text[2] = "Stop glaring and smile at someone";
    	r_text[3] = "Give your enemy a compliment";
    	r_text[4] = "Put your phone on silent";
    	r_text[5] = "Don't barge past people";
    	r_text[6] = "Don't blame the cashier";
    	r_text[7] = "Tip the barrista";
    	r_text[8] = "Call your Mum";
    	r_text[9] = "Call your Dad";
    	r_text[10] = "Call your Grandparents";
    	r_text[11] = "Observe a moment of silence";
    	r_text[12] = "Give your leftovers to a homeless person";
    	r_text[13] = "Don't glare at the school children";
    	r_text[14] = "Be positive with your mates";
    	r_text[15] = "Buy an extra round ";
    	r_text[16] = "Do something with your spare time";
    	r_text[17] = "Let someone else go first for a change";
    	r_text[18] = "Don't cut your wife off";
    	r_text[19] = "Buy a drink for a stranger";
    	r_text[20] = "Give money to a street performer";
    	r_text[21] = "Pay someone's toll";
    	r_text[22] = "Bring flowers to a nursing home";
    	r_text[23] = "Smile at a stranger";
    	r_text[24] = "Do something for the environment";
    	r_text[25] = "Write a good review for an employee";
    	var j = i;
    	while(j == i)
    		j = Math.floor(25*Math.random());
    	i = j;
    	document.getElementById('boldStuff').innerHTML = r_text[i].toUpperCase();
    }
    
    </script>
    </body>
    </center>
    </html>
    This is a screen shot of what happens as it is now:
    http://imgur.com/CPn9xMV

    What I need it to do is this:
    http://imgur.com/k2Oa2VQ

    So I need to move the button up on top of the main image, and then have the generated text in the white area...

    I literally have NO IDEA how to do this.

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Quote Originally Posted by cmyk529 View Post
    I literally have NO IDEA how to do this.
    Lol. Well, I can set you in the right direction. Right now, you have this:

    Code:
    <p id="generator"><img src="gentletude/tape.png" width="700" height="475"></p>
    Instead of that, what you can do is set the image of the tape as the background of a div. Like this:

    HTML:
    Code:
    <div id="generator"></div>
    CSS:
    Code:
    #generator {
        width: 700px;
        height: 475px;
        background-image: url('gentletude/tape.png');
        background-repeat: no-repeat;
    }
    What this does is create an empty div. The CSS defines a width and height. Then, we added a background, which is the image of the tape. We told the background NOT to repeat so that it's only shown once.

    Now, if you want something to appear above this, just put it in between the div tags like this:

    Code:
    <div id="generator">
        <input type="image" src="gentletude/play.png" onClick="myFunction()"/>
    </div>
    Last edited by ttkim; 04-28-2013 at 04:28 AM.
    My signature :)


  •  

    Tags for this Thread

    Posting Permissions

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