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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Editing a text area and button

    I've an image I made in photoshop which i want to use for my site.

    I've attached it.

    This is for people to upload things to my site.

    I need to get that image into a working text are and submit button.

    I've tried to use classes with CSS and html but it's not coming out. right.

    here is the html and CSS i'm using

    Code:
    <div id="button">
    <form id="form1" class="form" name="form1" method="post" action="">
      <label for="submit"></label>
      <input type="text" name="submit" id="submit" />
      <input  name="button2" type="submit" class="buttonStyle" id="button2" />
    </form></div>
    Code:
    #button{
    	background-image:url(upload_bar_bg.png);
    	background-repeat:no-repeat;
    	width:650px;
    	height:65px;
    }
    
    .buttonStyle {
    border: none;
    background-image:url(submit_button.png);
    background-repeat:no-repeat;}
    
    .form{
    	height:65px;}
    I'm not getting the height in the text area and the button is completely cut off.

    Any suggestions ?
    Attached Thumbnails Attached Thumbnails Editing a text area and button-uploadbar.png  
    Last edited by DavidStokes; 06-16-2012 at 06:16 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,452
    Thanks
    23
    Thanked 631 Times in 630 Posts
    To use an image as a button try this:
    Code:
    <input type="image" src="submit_button.png" alt="Submit" />
    Use the green as back-ground for the div the input tag and button is in.
    Last edited by sunfighter; 06-16-2012 at 10:21 PM.

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Great thank you.

    Now i have to figure out how to re-size the text area and center is

  • #4
    New Coder
    Join Date
    Jan 2011
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Have a another little problem.

    Here is the test uploaded
    http://www.fragofthemonth.com/test/

    As you can see the text area and submit button don't align, I wanted them to look like the image attached in the 1st post. The only reason the textarea is there is because of the image. If removed it hugs the top. I've tried a few different CSS things but nothing is working for me.

    Any suggestions ?

    Here is the HTML and CSS i'm using at the min.

    Code:
    <div id="button">
    <form id="form1" name="form1" method="post" action="">
      <label for="submit"></label>
      <input name="submit" type="text" class="form" id="submit" value="Paste YouTube.com URL in here" />
     <input  type="image" src="submit_button2.png" alt="submit" align="bottom" />
    </form></div>
    CSS
    Code:
    #button{
    	background-image:url(upload_bar_bg.png);
    	background-repeat:no-repeat;
    	width:650px;
    	height:65px;
    	text-align:center;
    }
    
    .form{
    	height:30px;
    	width:350px;
    	text-shadow:#333;
    	padding-left:5px;}

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,452
    Thanks
    23
    Thanked 631 Times in 630 Posts
    Play with this:
    Code:
    <div id="button">
    <form id="form1" name="form1" method="post" action="">
    <div style="float:left;padding-top:20px;padding-left:5px;"><input name="submit" type="text" class="form" id="submit" value="Paste YouTube.com URL in here"></div>
    <div style="padding-top: 4px;"><input type="image" src="sunbm.png" alt="submit" style="text-align: left;"></div>
    </form>
    </div>
    and use the
    Code:
    #button {
    	width: 550px;
    }
    to bring them together

  • Users who have thanked sunfighter for this post:

    DavidStokes (06-21-2012)


  •  

    Posting Permissions

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