Horizontal Line

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • shapper

    Horizontal Line

    Hello,

    I have 20 inputs in a web page and I would like to add a 200px gray
    horizontal line as a separator every 5 inputs to divide the form into
    sections.

    What is the best way to do this?

    Do I need to place each group of 5 inputs inside a div and define the
    div bottom border to 1px?

    Thanks,
    Miguel

  • Evertjan.

    #2
    Re: Horizontal Line

    shapper wrote on 22 feb 2007 in comp.infosystem s.www.authoring.stylesheets:
    Hello,
    >
    I have 20 inputs in a web page and I would like to add a 200px gray
    200px wide?
    horizontal line as a separator every 5 inputs to divide the form into
    sections.
    >
    What is the best way to do this?
    No, in programming and mark-up, there is no "best" way,
    as programming is an art.
    Do I need to place each group of 5 inputs inside a div and define the
    div bottom border to 1px?
    <style type='text/css'>
    ..hrGray {color:gray;wid th:200px;}
    </style>

    <hr class='hrGray'>
    ....
    <hr class='hrGray'>
    ....
    <hr class='hrGray'>
    .......

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)

    Comment

    • Jukka K. Korpela

      #3
      Re: Horizontal Line

      Scripsit shapper:
      I have 20 inputs in a web page and I would like to add a 200px gray
      horizontal line as a separator every 5 inputs to divide the form into
      sections.
      That would look odd if the font size is, say, 60px, which might be the
      smallest font size that the user can read.

      Did you intend to try to lock the font size? Well, you can't, but you can do
      some harm trying to do it.

      So make the width something more flexible, like 100% (why not?).
      What is the best way to do this?
      Does it make sense to do this? If the lines would not correspond to any
      _logical_ grouping, it might be just a distraction.

      Assuming it makes sense, using <hr width="100%"wit h
      hr { color: gray; background: gray; }
      is one option. The benefit is that the line appears even when CSS is off.
      Do I need to place each group of 5 inputs inside a div and define the
      div bottom border to 1px?
      That might be a more feasible option, though it might be argued that it's
      logically a <fieldsetrath er than <div>, but <fiedsethas an obligatory
      <legendand some idiosyncratic rendering features, so I reluctantly say
      that <divis more practical.

      --
      Jukka K. Korpela ("Yucca")


      Comment

      • Andy Dingley

        #4
        Re: Horizontal Line

        On 22 Feb, 13:00, "Jukka K. Korpela" <jkorp...@cs.tu t.fiwrote:
        I have 20 inputs in a web page and I would like to add a 200px gray
        horizontal line as a separator every 5 inputs to divide the form into
        sections.
        >
        That would look odd if the font size is, say, 60px, which might be the
        smallest font size that the user can read.
        Why would it "look odd" ? It would be the same 200px grey rule that
        the users with 12px text would see. Of course you'd now find fewer
        characters alongside it, but that's in no way "odd".

        Comment

        • Jukka K. Korpela

          #5
          Re: Horizontal Line

          Scripsit Andy Dingley:
          On 22 Feb, 13:00, "Jukka K. Korpela" <jkorp...@cs.tu t.fiwrote:
          >
          >>I have 20 inputs in a web page and I would like to add a 200px gray
          >>horizontal line as a separator every 5 inputs to divide the form
          >>into sections.
          >>
          >That would look odd if the font size is, say, 60px, which might be
          >the smallest font size that the user can read.
          >
          Why would it "look odd" ? It would be the same 200px grey rule that
          the users with 12px text would see.
          That's why it would look odd.
          Of course you'd now find fewer
          characters alongside it, but that's in no way "odd".
          The line would look riculously small. Try it and you'll see.

          --
          Jukka K. Korpela ("Yucca")

          Comment

          • dorayme

            #6
            Re: Horizontal Line

            In article
            <1172155434.052 252.199230@l53g 2000cwa.googleg roups.com>,
            "Andy Dingley" <dingbat@codesm iths.comwrote:
            On 22 Feb, 13:00, "Jukka K. Korpela" <jkorp...@cs.tu t.fiwrote:
            >
            I have 20 inputs in a web page and I would like to add a 200px gray
            horizontal line as a separator every 5 inputs to divide the form into
            sections.
            That would look odd if the font size is, say, 60px, which might be the
            smallest font size that the user can read.
            >
            Why would it "look odd" ? It would be the same 200px grey rule that
            the users with 12px text would see. Of course you'd now find fewer
            characters alongside it, but that's in no way "odd".
            Two giants, almost completely happily married, drive from their
            house (a converted two story block of flats) in their sedan (a
            converted furniture long distance removalist truck) to the
            adoption agency. They are shown a nice little fellow. "Yes, he is
            very cute... but it would look a bit odd... haven't you got any
            giant kids for adoption please?" "But why?" says the counsellor,
            "he is just a normal kid like most other kids, no one would bat
            an eyelid seeing you all out together..."

            --
            dorayme

            Comment

            • Martin Clark

              #7
              Re: Horizontal Line

              Jukka K. Korpela wrote...
              >Assuming it makes sense, using <hr width="100%"wit h
              >hr { color: gray; background: gray; }
              >is one option.
              Hello Jukka,

              Out of interest, would the following also work?
              <hrwith
              hr {border: 1px solid gray; width: 100%; }

              Apart from the width being included in the definition, is there any
              difference in the way this would be implemented?
              --
              Martin Clark

              Comment

              Working...