I need help with styling and placement of a button

  • sanuja.com

    #7476

    I love Graphene theme so I wanted to use the exact same styles for my custom buttons. I tried….

    <center><form action="#skip" valign="center"><input type="submit" class="button" value="Skip Tech Jargon" tabindex="10"/></form></center>

    at, http://sanuja.com/blog/resolving-css-conflicts

    1) But it would not align to center nor I found a way to remove the text from being inserted starting from the side. I mean why can’t I make the text start in a new separate line AFTER the button? (yep, found a kind of dumb solution of adding a <hr> right after the button, which will push the text to a new line. But that is not the right way of doing things 🙂

    2) Why is the button refresh the page when the href place holder is already defined in the page itself? (if you want to skip to instructions, it should just be able to skip. But in Chrome and FireFox, the page get refresh when someone press the button)

    Thank you in advance.

    Mod

    Kenneth John Odle

    #38352
    Quote:
    But it would not align to center nor I found a way to remove the text from being inserted starting from the side.

    Try this in page:

    <form action="#skip" class="sanuja-button">
    <input type="submit" tabindex="10" value="Skip Tech Jargon" class="button sanuja-button">
    </form>

    and in CSS:

    .sanuja-button {
    clear: both;
    float: none;
    margin-left: auto;
    margin-right: auto;
    }

    Gives you this:

    mkNNax3.png

    Prasanna SP

    #38353
    #post-6118 .button {
    float: none;
    }

    BTW, why do you have <form> there? You can just use anchor tag.

    <a href="#skip" class="button skip-tech-jargon">Skip Tech Jargon</a>

    and, CSS.

    .skip-tech-jargon {
    float: none !important;
    display: table !important;
    margin: 0 auto !important;
    }

    You can specify button width instead of display: table;

    width: 98px;

    sanuja.com

    #38354

    Thanks both of you! You guys are awesome.

    Pretty much graphene support team is my professors into CSS!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.