CSS question: How can I code an inline variable length horizontal line?

Discussion in 'HTML' started by seiyaku, Nov 15, 2006.

  1. seiyaku

    seiyaku Guest

    Simple requirement, so I'm sure there ain't a simple answer...

    I'm wanting to display a horizontal line, like you might see on an
    application form

    FIRST NAME _________ FAMILY NAME ________

    (Note: This is NOT an input form on the screen; just looks like one)

    I could insert a single-celled table with a bottom border, but I'd
    probably get arrested.

    I thought <hr> might be the answer, but that seems to throw a line
    break before and after. As does a <DIV>. No good.

    So what I'm using is <span
    style="text-decoration:underline;letter-spacing:50px;">&nbsp;&nbsp;</span>;...
    using .class of course and having a different .class for each length I
    want to display. It works, but the coding looks embarassingly daft.

    There's an example on my page at
    http://www.apsresp.org/congress/1993.html (scroll to the bottom of the
    page)

    What's a more elegant / standard CSS way to do what I'm trying to do?

    Many thanks
     
    seiyaku, Nov 15, 2006
    #1
    1. Advertising

  2. Re: CSS question: How can I code an inline variable length horizontalline?

    seiyaku wrote:
    > Simple requirement, so I'm sure there ain't a simple answer...
    >
    > I'm wanting to display a horizontal line, like you might see on an
    > application form
    >
    > FIRST NAME _________ FAMILY NAME ________
    >
    > (Note: This is NOT an input form on the screen; just looks like one)


    What about the old-fashioned way: a sequence of underscores?
     
    Harlan Messinger, Nov 15, 2006
    #2
    1. Advertising

  3. seiyaku

    Andy Dingley Guest

    seiyaku wrote:

    > Simple requirement, so I'm sure there ain't a simple answer...


    :cool:


    > I'm wanting to display a horizontal line, like you might see on an
    > application form
    >
    > FIRST NAME _________ FAMILY NAME ________


    Easy:

    #txtFirstName,
    #txtFamilyName {
    border: none;
    border-bottom: thin solid;
    padding: 0;
    padding-bottom: 0.12em;
    }



    > So what I'm using is <span
    > style="text-decoration:underline;letter-spacing:50px;">&nbsp;&nbsp;</span>;...


    Hmmm..... Apart from using em units instead of pixels that's not such a
    bad solution!

    The problem is that CSS doesn't like to set width on inline elements
    and it doesn't let you sit them on the same line unless they are
    inline. So what's to be done?

    The "obvious" and "neat" solution is to use display: inline-block;
    http://www.w3.org/TR/CSS21/visuren.html#display-prop
    Unfortunately this is a CSS2.1 feature, so probably isn't deployable
    today.

    Back in the real world, then I don't know how to make it work with
    <span> and to control the width. So instead I'd do it with <div> and
    their default of display:block; This makes setting the width trivial.
    #txtFirstName { width: 12em; }

    To get them all on the same line I'd then use float:left; Remember to
    clear afterwards.


    Float is a whole new can of worms! The only readable guide I know of
    is here:
    http://brainjar.com/css/positioning/
     
    Andy Dingley, Nov 15, 2006
    #3
  4. seiyaku

    seiyaku Guest

    Wooaoooh! - thanks Andy, I'll go with your advice.

    (You could tell I'm a newbie and replied in simple language, so thanks
    for that too!)

    John
     
    seiyaku, Nov 15, 2006
    #4
    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. the idiot
    Replies:
    27
    Views:
    4,581
    David Dorward
    Mar 8, 2005
  2. Replies:
    2
    Views:
    6,639
    Adrienne Boswell
    Jan 31, 2006
  3. Abhi
    Replies:
    2
    Views:
    750
    E. Robert Tisdale
    Jul 3, 2003
  4. Alvin
    Replies:
    7
    Views:
    487
    E. Robert Tisdale
    May 6, 2005
  5. Guest
    Replies:
    2
    Views:
    1,162
    Martin Jay
    Nov 18, 2007
Loading...

Share This Page