SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Location
    India
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form alignment.. wth right side submit buttoni

    Dear All I am making a simple form with 2 fields Name and Email and I want my submit button (img.) right side of this 2 fields in middle, plz. find here with image of my form..subscribeform.jpgsubmit.png


    I am using HTML:
    <form action="" name="subscribe" id="subscribe">
    <p class="subs_heading">Subscribe our News Letter </p>
    <label>Name/label> <input type="text" /> <br />

    <label>Email: </label> <input type="text" />
    <input type="image" value="submit" src="submit.png" class="submit" />
    </form>

    CSS:
    .subs_heading {color:#fff; font-family:Tahoma; font-size:16px; padding-left:20px; font-weight:bolder; height:20px; width:250px; text-align:center;}
    label{display:block; padding:5px 0 0 0px; width:80px; border:solid 0px #000; margin:0 0 0 0px; float:left; color:#fff; text-align:left;}
    input{border:solid 1px #dddddd; margin:0 0 10px 0px; padding:5px; color:#bbbbbb; width:150px; float:left;}
    .submit{
    position:absolute;
    display:block;
    width:78px;
    height:36px;
    }

    Please let me know where i am doing something wrong to align this button in right side..

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    This is really rough, and not the best way, but may help a bit:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    
    <meta charset="utf-8">
    
    <title>Experiment</title>
    	
    <style media="all">
    * {margin: 0; padding: 0;}
    body {font-family: arial, sans-serif;}
    .subs_heading {color:#fff; font-family:Tahoma; font-size:16px; padding-left:20px; font-weight:bolder; height:20px; width:250px; text-align:center;}
    label{font-size: 1.125em; width: 64px; clear: left;display:block; padding:5px 0 0 0px; border:solid 0px #000; margin:0 0 0 0px; float:left; color:#fff; text-align:left;}
    input{margin:0 0 10px 0px; padding:5px; color:#bbbbbb; float:left; border: none;}
    .submit{position:absolute; left: 350px; top: 30px; width: 75px; height: 35px; border-radius: 12px; background: white; }
    form {position:relative; background: #4b5360; border-radius: 12px; overflow: hidden; width: 400px; padding: 4px 30px; }
    input[type="text"] {width: 230px;}
    </style>
    	
    </head>
    
    
    <body>
    <form action="" name="subscribe" id="subscribe">
      <p class="subs_heading">Subscribe our News Letter </p>
      <label>Name:</label> <input type="text" /> <br />
      <label>Email: </label> <input type="text" />
      <input type="image" value="submit" src="submit.png" class="submit" /> 	
    </form>
    </body>
    
    </html>

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Shame shame ralph. P instead of a legend? * {padding: 0;}? oooh ooh, you're getting coal in your stockings this year :)

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Shame shame ralph. P instead of a legend? * {padding: 0;}? oooh ooh, you're getting coal in your stockings this year
    I have so much P in my stockings already that a bit of coal might be helpful. My focus was on knocking the main CSS into shape.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Actually, I never understood why people in the 1800s would be unhappy to get free fuel for Christmas.

    Today Santa gives out free tanks of gas to evildoers : )

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    Arnhem, The Netherlands
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wouldn't that get messy?

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I'm sure they'd come in brightly-coloured Christmas-red plastic gasoline containers. With little green ribbons on top.


Bookmarks

Posting Permissions

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