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

shapper wrote on 22 feb 2007 in comp.infosystems.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;width:200px;}
</style>

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

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

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%"> with
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 <fieldset> rather than <div>, but <fiedset> has an obligatory
<legend> and some idiosyncratic rendering features, so I reluctantly say
that <div> is more practical.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On 22 Feb, 13:00, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

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".

Scripsit Andy Dingley:

On 22 Feb, 13:00, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

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")
http://www.cs.tut.fi/~jkorpela/

In article
<1172155434.052252.199230 (AT) l53g2000cwa (DOT) googlegroups.com>,
"Andy Dingley" <dingbat (AT) codesmiths (DOT) com> wrote:

On 22 Feb, 13:00, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

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

Jukka K. Korpela wrote...

Assuming it makes sense, using <hr width="100%"> with
hr { color: gray; background: gray; }
is one option.

Hello Jukka,

Out of interest, would the following also work?
<hr> with
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