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

    Misaligned Submit Button

    Do any questions get answered here?

    How would I get a simple input form to align with a submit button?

    You can see the problem at: http://bit.ly/ovFGhR
    The CSS txt file: http://bit.ly/nMyP45

    My CSS I think is telling the input text box to be a part of the paragraph above and the button sits below, misaligned.

    Please help!!

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts


    Code:
      padding: 7px 25px;
    The width is set to 100% since its a block element. By adding 25px to the left and right, you are making it more than a 100%;, therefore margin: auto; will not center correctly.

    Set a width for the apply button = (100% width - 50px) and use margin: auto;

    Code:
     width: 700px;
     margin: auto;
    Last edited by Sammy12; 07-06-2011 at 06:42 AM.

  • Users who have thanked Sammy12 for this post:

    isleofman (07-06-2011)

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for your swift reply!

    I tried that but it hasnt worked:

    Code:
    #reg form button {
    	border:none;
    	outline:none;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        color: #ffffff;
        display: block;
        cursor: pointer;
    	float: left;
        clear: both;
        padding: 7px 25px;
    	width: 100% 50px;
        text-shadow: 0 1px 1px #777;
        font-weight:bold;
        font-family:"Century Gothic", Helvetica, sans-serif;
        font-size:22px;
        -moz-box-shadow:0px 0px 3px #aaa;
        -webkit-box-shadow:0px 0px 3px #aaa;
        box-shadow:0px 0px 3px #aaa;
        background:#4797ED;
    }

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by isleofman View Post
    Thanks for your swift reply!

    I tried that but it hasnt worked:

    Code:
    #reg form button {
    	width: 100% 50px;
    }
    that's not actually valid css

    try
    Code:
    width: 700px;
    margin: auto;
    padding: 7px 25px;
    +

    take out float: left;

    then upload to your server so i can see the changes
    Last edited by Sammy12; 07-06-2011 at 06:53 AM.

  • Users who have thanked Sammy12 for this post:

    isleofman (07-06-2011)

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Sorry - mental breakdown on that wonderful 100% 50px;!?

    I've done that now but the text input box is still riding above the submit

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Quote Originally Posted by isleofman View Post
    Sorry - mental breakdown on that wonderful 100% 50px;!?

    I've done that now but the text input box is still riding above the submit
    Did I wake up just for this? yes, yes i did.
    I told you the wrong width 1 sec

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    #reg form button {
        float: none;
        margin: auto;
        border:none;
        outline:none;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        color: #ffffff;
        display: block;
        cursor: pointer;
        clear: both;
        padding: 7px 25px;
        width: 115px;
        margin: center;
        text-shadow: 0 1px 1px #777;
        font-weight:bold;
        font-family:"Century Gothic", Helvetica, sans-serif;
        font-size:22px;
        -moz-box-shadow:0px 0px 3px #aaa;
        -webkit-box-shadow:0px 0px 3px #aaa;
        box-shadow:0px 0px 3px #aaa;
        background:#4797ED;
    }
    margin: auto; sets an equal margin on both sides so that it's center. I looked at your script and margin: center does not exist.

    the code ^ should work

    Yes, I was sleeping then I woke up and was like, "wait, did I tell him to set the width to 700px?" lol.
    Keep the width at 115px; and use margin: auto
    Last edited by Sammy12; 07-06-2011 at 07:23 AM.

  • Users who have thanked Sammy12 for this post:

    isleofman (07-06-2011)

  • #8
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Hello ,
    I have checked your code and the form having text box and apply button has to be placed inside the div and using that div we can provide height and width and align it inside the form.

  • Users who have thanked shankar.adodis for this post:

    isleofman (07-06-2011)

  • #9
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Ha! Many thanks Sammy! I have the submit aligned center now but still below the text input.

    Shankar - How do I get the correct div tag to work? I think the text input box is recalling the "steps" format.

  • #10
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    #signin_menu {
        -moz-border-radius-topleft:5px;
        -moz-border-radius-bottomleft:5px;
        -moz-border-radius-bottomright:5px;
    Code:
    #signin_menu {
        -moz-border-radius-top-left:5px;
        -moz-border-radius-bottom-left:5px;
        -moz-border-radius-bottom-right:5px;
    Just to let you know, on your sign in form, you left out some dashes.
    You probably want to set

    border-radius:
    -webkit-border-radius:
    -moz-border-radius:

    for maximum caution

    Did you have another question or was that it?
    Going to bed. night night.
    Last edited by Sammy12; 07-06-2011 at 07:53 AM.

  • Users who have thanked Sammy12 for this post:

    isleofman (07-06-2011)

  • #11
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thanks for your help tonight Sammy! The last question I promise is how do I get the Apply! button next to the email address input.... i.e. inline?

  • #12
    New Coder
    Join Date
    Jun 2011
    Posts
    10
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Anybody got thoughts on this? How do I get this all onto one line?

  • #13
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    /*signup.css */
    #stylized .small{
    color:#666666;
    /*display:block;*/
    font-size:11px;
    font-weight:normal;
    text-align:center;
    width:140px;
    float: none;
        margin: auto;
        border:none;
        outline:none;
    	vertical-align:middle;
    }
    
    /*style.css */
    #steps BUTTON
    {
    	border: none;
    	outline: none;
    	-moz-border-radius: 10px;
    	-webkit-border-radius: 10px;
    	border-radius: 10px;
    	color: #FFFFFF;
    	/*display: block;*/
    	cursor: pointer;
    	margin: 0px 400px;
    	clear: both;
    	padding: 7px 10px;
    	text-shadow: 0 1px 1px #777;
    	font-weight: bold;
    	font-family: "Century Gothic", Helvetica, sans-serif;
    	font-size: 22px;
    	-moz-box-shadow: 0px 0px 3px #aaa;
    	-webkit-box-shadow: 0px 0px 3px #aaa;
    	box-shadow: 0px 0px 3px #AAA;
    	background: #4797ED;
    }
    
    #reg form button {
    	float: none;
        margin: auto;
        border:none;
        outline:none;
    	vertical-align:middle;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        color: #ffffff;
       /* display: block;*/
        cursor: pointer;
        clear: both;
        padding: 7px 25px;
        width: 115px;
        text-shadow: 0 1px 1px #777;
        font-weight:bold;
        font-family:"Century Gothic", Helvetica, sans-serif;
        font-size:22px;
        -moz-box-shadow:0px 0px 3px #aaa;
        -webkit-box-shadow:0px 0px 3px #aaa;
        box-shadow:0px 0px 3px #aaa;
        background:#4797ED;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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