Re: Slightly ugly output

Discussion in 'HTML' started by Denis McMahon, Aug 2, 2010.

  1. On 01/08/10 23:11, lrhorer wrote:

    > This isn't urgent, because the code works, but it is slightly
    > unpleasant looking, to me, anyway. I have a page with two radio
    > buttons side-by-side. One links to one page and the second to another.
    > By my understanding, a single form can only link to a specific page, so
    > I created two different forms for the two buttons, each linking to a
    > different page, and put them in the same table. Evidently, this is
    > causing them to show up with one slightly higher than the other. Now I
    > could eliminate the problem by putting them in the same form, linking
    > to an intermediate cgi script, and then immediately forwarding to one
    > page or the other based upon which button was clicked. Is there a
    > cleaner, simpler way, though?


    Not sure why you're using radio buttons for this. It sounds like
    something you'd normally do with plain links, if there's no other form
    data involved. Why not:

    <p style="text-align:center">
    <a href="handler1" class="btnlink">bing</a>
    <a href="handler2" class="btnlink">frog</a>
    </p>

    using css to make the "btnlink" class look and behave like a button when
    clicked etc.

    ..btnlink {
    border: medium outset black;
    display: inline-block;
    text-decoration:none;
    background-color:#dddddd;
    padding: 2px 5px;
    color: black;
    }
    ..btnlink:active {border: medium inset black;}

    If one button is a submit for a form, and the other has to call a
    different page, try (with the same css):

    <p style="text-align:center">
    <span class="btnlink"
    onclick="document.getElementById('form_id').submit()">bing</span>
    <a href="handler2" class="btnlink">frog</a>
    </p>

    This also means you can put the "submit" button outside the form.

    Doubtless someone will be along shortly to tell me my css, html or
    javascript is horribly broken, but whatever.

    Rgds

    Denis McMahon
    Denis McMahon, Aug 2, 2010
    #1
    1. Advertising

  2. Denis McMahon wrote:

    > <p style="text-align:center">
    > <span class="btnlink"
    > onclick="document.getElementById('form_id').submit()">bing</span>
    > <a href="handler2" class="btnlink">frog</a>
    > </p>
    >
    > This also means you can put the "submit" button outside the form.
    >
    > Doubtless someone will be along shortly to tell me my css, html or
    > javascript is horribly broken, but whatever.
    >


    Yes it is, but far worse is that your "solution" *requires* JavaScript
    in order to submit the form.

    To OP without a URL to what you are attempting it is hard to advise.
    Generally if you need a form to have two options that run difference
    scripts far better fussing with two form actions but have a single
    "frontend" script and have a radio button group with your two options.

    <form action="theDecider.cgi">
    <div>
    Choose: <input type="radio" name="do" value="this"><label>This</label>
    or <input type="radio" name="do" value="that"><label>That</label>
    <br>
    <input type="submit" value"Make it so!">
    </div>
    </form>


    #theDecider.cgi
    ....
    if( param('do') eq 'this' )
    {
    # call 'this' script
    }
    elseif ( param('do') eq 'that' )
    {
    # call 'that' script
    }
    else
    {
    # invalid input handle error
    }




    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Aug 2, 2010
    #2
    1. Advertising

  3. On 02/08/10 04:14, lrhorer wrote:

    >> using css to make the "btnlink" class look and behave like a button
    >> when clicked etc.
    >>
    >> .btnlink {
    >> border: medium outset black;
    >> display: inline-block;
    >> text-decoration:none;
    >> background-color:#dddddd;
    >> padding: 2px 5px;
    >> color: black;
    >> }
    >> .btnlink:active {border: medium inset black;}

    >
    > That's getting a lot more involved than I want to be. This isn't for a
    > commercial application.


    It's hardly cutting edge css either.

    >> If one button is a submit for a form, and the other has to call a
    >> different page, try (with the same css):
    >>
    >> <p style="text-align:center">
    >> <span class="btnlink"
    >> onclick="document.getElementById('form_id').submit()">bing</span>
    >> <a href="handler2" class="btnlink">frog</a>
    >> </p>

    >
    > Wouldn't that put them on different lines?


    Why would two items in the same <p></p> be on different lines unless (a)
    the paragraph wasn't wide enough for both of them or (b) you put a <br>
    in between them?

    Yes I did try that code out before I posted it.

    Rgds

    Denis McMahon
    Denis McMahon, Aug 2, 2010
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?Q2hhcmxpZSBEaXNvbg==?=

    Datagrid with fewer records than page size is ugly

    =?Utf-8?B?Q2hhcmxpZSBEaXNvbg==?=, Feb 29, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    446
    Alvin Bruney [MVP]
    Feb 29, 2004
  2. cr88192
    Replies:
    3
    Views:
    573
    cr88192
    Sep 7, 2005
  3. Esmail
    Replies:
    2
    Views:
    466
    Esmail
    Aug 13, 2009
  4. rf
    Replies:
    25
    Views:
    1,069
    Neredbojias
    Aug 6, 2010
  5. Andy

    Re: Slightly ugly output

    Andy, Aug 2, 2010, in forum: HTML
    Replies:
    11
    Views:
    757
    Neredbojias
    Aug 4, 2010
Loading...

Share This Page