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 9 of 9
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Problem with aligning css button

    I've two buttons on my form. I should align in vertically on same line but, one seems to be above the other one.
    Here is the css code

    Code:
    .submit input
    {
    margin-left: 12.5em;
    }
    .submit input
    {
    color: #000;
    background: #ffa20f;
    border: 3px outset #d7b9c9
    }
    .reset input
    {
    margin-left: 25em;
    }
    .reset input
    {
    color: #000;
    background: #ffa20f;
    border: 3px outset #d7b9c9
    }
    I've attached the picture of the button.
    Attached Thumbnails Attached Thumbnails Problem with aligning css button-button.jpg  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Here is the css code
    Some CSS alone without the corresponding HTML is pretty useless. Please post the HTML or a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    <p class="submit"><input type="submit" value="Submit" />
    <p class="reset"><input type="reset" value="Reset" />
    HTML code for button

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    .reset input
    {
    margin-left: 25em;
    }
    The second input element has a 25em; margin-left applied to it.

    PS: Validate your markup using http://validator.w3.org/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    What should be instead of the 25em; margin-left to align it vertically on same line?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    .reset input
    {
    margin-left: 12.5em;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry I mean horizontally on same line?

    margin-right?

    smething like that?

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    horizontally on same line?
    Then remove those two <p> tags
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Mar 2012
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah horizontally on same line, but if I remove the <p>, find it attached in the picture below

    I don't want it like this, I want it to align just below the textbox above it.
    Attached Thumbnails Attached Thumbnails Problem with aligning css button-untitled.jpg  


  •  

    Posting Permissions

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