input type hidden => disturb layout

[Eduard Dewolf]

Hi,

Im have been changing my site to make it HTML 4.01 compliant

As I should, I wrapped all INPUT tags in blocks
I wrapped the not visible INPUT type HIDDEN tags in first PRE, later H6 tags
to comply to HTML 4.01, but this changes my layout severly

In the upper right corner of http://www.dewolf.net, one can cahnge the
language of the site.
But I do not find a way of aligning the prompt 'change language' with the
two submit buttons next to it. (they look like links, but they are submit
buttons)
I think this is due to the INPUT type HIDDEN buttons that I had to wrap in
blocks.

Can anyone give me a hint on how to get the alignment correct?

Thx

Edward

[Steve Pugh]

"Eduard Dewolf" <ed***********@pandora.be> wrote:

Im have been changing my site to make it HTML 4.01 compliant

As I should, I wrapped all INPUT tags in blocks
I wrapped the not visible INPUT type HIDDEN tags in first PRE, later H6 tags
to comply to HTML 4.01, but this changes my layout severly
Are they performatted text? No.
Are they level size headings? No.
So don't use <pre> or <h6>.

Use something appropriate (like <fieldset>) or something generic (like
<div>).
In the upper right corner of http://www.dewolf.net, one can cahnge the
language of the site.
But I do not find a way of aligning the prompt 'change language' with the
two submit buttons next to it. (they look like links, but they are submit
buttons)
In Opera 7.11 they look like tiny dots. This resolves itself when CSS
is disabled so I guess something in your CSS is acting up.
I think this is due to the INPUT type HIDDEN buttons that I had to wrap in
blocks.

You don't have to wrap each <input> in it's own block. You can wrap
the hidden inputs in the same div as the submit button.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Kris]

In article <%n******************@afrodite.telenet-ops.be>,
"Eduard Dewolf" <ed***********@pandora.be> wrote:

Im have been changing my site to make it HTML 4.01 compliant

As I should, I wrapped all INPUT tags in blocks
I wrapped the not visible INPUT type HIDDEN tags in first PRE, later H6 tags
to comply to HTML 4.01, but this changes my layout severly

In the upper right corner of http://www.dewolf.net, one can cahnge the
language of the site.
But I do not find a way of aligning the prompt 'change language' with the
two submit buttons next to it. (they look like links, but they are submit
buttons)
I think this is due to the INPUT type HIDDEN buttons that I had to wrap in
blocks.

Can anyone give me a hint on how to get the alignment correct?

If your HTML looks something like this at the moment:

<form ...>

<p>
<input type="hidden" ...>
</p>

<h2>
<input type="hidden" ...>
</h2>

<pre>
<input type="hidden" ...>
</pre>

<p>
<input type="text" ...>
</p>

</form>

Then simply make it:

<form ...>

<p>
<input type="hidden" ...>
<input type="hidden" ...>
<input type="hidden" ...>
<input type="text" ...>
</p>

</form>

A final hint is to influence layout issues with CSS. The margins that
for instance a H2 creates are trivial when you can influence its
appearance through CSS.

--
Kris
kr*******@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.

[Ben M]

> In article <%n******************@afrodite.telenet-ops.be>,

"Eduard Dewolf" <ed***********@pandora.be> wrote:

Im have been changing my site to make it HTML 4.01 compliant

As I should, I wrapped all INPUT tags in blocks
I wrapped the not visible INPUT type HIDDEN tags in first PRE, later
H6 tags to comply to HTML 4.01, but this changes my layout severly

In the upper right corner of http://www.dewolf.net, one can cahnge
the language of the site.
But I do not find a way of aligning the prompt 'change language'
with the two submit buttons next to it. (they look like links, but
they are submit buttons)
I think this is due to the INPUT type HIDDEN buttons that I had to
wrap in blocks.

Can anyone give me a hint on how to get the alignment correct?

If your HTML looks something like this at the moment:

<form ...>

<p>
<input type="hidden" ...>
</p>

<h2>
<input type="hidden" ...>
</h2>

<pre>
<input type="hidden" ...>
</pre>

<p>
<input type="text" ...>
</p>

</form>

Then simply make it:

<form ...>

<p>
<input type="hidden" ...>
<input type="hidden" ...>
<input type="hidden" ...>
<input type="text" ...>
</p>

</form>

A final hint is to influence layout issues with CSS. The margins that
for instance a H2 creates are trivial when you can influence its
appearance through CSS.

Use a div, a paragraph does not consist of a series of hidden input elements
does it?

In addition a div *generally* has no padding or margin by default.

--
BenM
http://www.benmeadowcroft.com/

[Kris]

In article <bg**********@newsg4.svr.pol.co.uk>,
"Ben M" <ce******@virgin.net> wrote:

Use a div, a paragraph does not consist of a series of hidden input
elements does it?
It does not hold only that.

rephrase that to: "a paragraph does not consist of a series of input
elements"

What does it contain?
Is this not a legit use of a paragraph?

<p>
<label for="email">Your e-mail please:</label><input type="text"
id="email" ...>
</p>

In addition a div *generally* has no padding or margin by default.

So? Appearance is trivial.

Semantics aren't, why is a p element preferable to using a div?

Because I think it is more of a paragraph than it is something generic,
something 'nothing'.

--
Kris
kr*******@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.

[Ben M]

> In article <bg**********@newsg4.svr.pol.co.uk>,

"Ben M" <ce******@virgin.net> wrote:

Use a div, a paragraph does not consist of a series of hidden input
elements does it?

It does not hold only that.

rephrase that to: "a paragraph does not consist of a series of input
elements"

What does it contain?
Is this not a legit use of a paragraph?

<p>
<label for="email">Your e-mail please:</label><input type="text"
id="email" ...>
</p>

In addition a div *generally* has no padding or margin by default.

So? Appearance is trivial.

Semantics aren't, why is a p element preferable to using a div?

Because I think it is more of a paragraph than it is something
generic, something 'nothing'.

You have snipped the original example my comments cited (given below for
context).

<p>
<input type="hidden" ...>
<input type="hidden" ...>
<input type="hidden" ...>
<input type="text" ...>
</p>

In your new example a p is more useful as there is textual content. In the
original example however there was no textual content. Hence my suggestion
to use a div. The original was *not* a paragraph, hence it should not have
been marked up as such.

The p element is preferable to a div when the content could be reasonably
considered a paragraph. When it could not be considered a paragraph a more
appropriate, or more general, element should be used.

--
BenM
http://www.benmeadowcroft.com/

[Kris]

In article <bg**********@newsg4.svr.pol.co.uk>,
"Ben M" <ce******@virgin.net> wrote:

> In addition a div *generally* has no padding or margin by default.

So? Appearance is trivial.

Semantics aren't, why is a p element preferable to using a div?
Because I think it is more of a paragraph than it is something
generic, something 'nothing'.

You have snipped the original example my comments cited (given below for
context).

Sorry, my fault.

<p>
<input type="hidden" ...>
<input type="hidden" ...>
<input type="hidden" ...>
<input type="text" ...>
</p>

In your new example a p is more useful as there is textual content. In the
original example however there was no textual content.
Isn't there? If I input some, doesn't that count?
Hence my suggestion
to use a div. The original was *not* a paragraph, hence it should not have
been marked up as such.
To not make this discussion into a mud-fight by my doing, I have to
admit that I hold a fairly liberal view on what is a Paragraph or not.
To me, a paragraph is either clearly one, or a block of content when
nothing better applies. Only after I also outrule it as a P, it becomes
a DIV. I see it as the 'almost'-last alternative.

The p element is preferable to a div when the content could be reasonably
considered a paragraph.
I am curious what you consider as one. This is not to prove I am right
or anything, I am just curious.
For instance, is this a paragraph:

<p>
<a ...>More news...</a>
</p>

or this?

<p>
....
</p>

or this?

<p>
<img ..>
</p>
When it could not be considered a paragraph a more
appropriate, or more general, element should be used.

I agree on that. We disagree on what is a paragraph.

--
Kris
kr*******@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.

[Jukka K. Korpela]

Kris <kr*******@xs4all.netherlands> wrote:

I have to
admit that I hold a fairly liberal view on what is a Paragraph or
not. To me, a paragraph is either clearly one, or a block of
content when nothing better applies. Only after I also outrule it
as a P, it becomes a DIV. I see it as the 'almost'-last
alternative.

But why would you ever outrule P, if you think that it can be any block
of content?

I'd suggest consulting some dictionary definitions for "paragraph",
like "a subdivision of a written composition that consists of one or
more sentences, deals with one point or gives the words of one speaker,
and begins on a new usually indented line".
http://www.m-w.com/cgi-bin/dictionary?paragraph

You could also ask whether you would welcome browsers and other
software that treat P elements paragraphs as defined for literary works
traditionally. Or would it be a threat that some browsers would present
P elements _in their own ways_ as appropriate for a particular
rendering situation? For example, a program could
- make a clear pause when reading the page
- obey the user's command for moving to the next paragraph
- leave space before and after each paragraph, as browsers have
traditionally done for some odd reason
- use "literary paragraph" style, with no vertical spacing but with
first line of each paragraph indented when it immediately follows
another paragraph
- treat the content as a unit when performing some linguistic analysis
of paragraph structures on Web pages.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html