View Full Version : A form-like layout


Toxaris
01-06-2011, 02:46 PM
I have a form in a book, which I want to represent. An example is added to this post. The tough part is to have all lines the same length and have the form justified.
The form is just an example and part of the story. Now I have 'solved' it by using images, but I would rather do it in xhtml and css. I have tried tables, but could not get it to work the way I want. It has to resize rather reasonably when I change the font-size...

Are there any xhtml and css guru's that can help?

frabjous
01-06-2011, 06:38 PM
The only thing that occurred to me would be to use tables within tables. This will give you a rough idea:

The CSS:
table {
border-collapse: collapse;
}
td {
white-space: nowrap;
padding: 0px;
}
table.whole {
width: 100%;
margin: 0px;
}
table.half {
width: 50%;
display: inline-block;
}
table.quarter {
width: 25%;
display: inline-block;
}
td.fill {
width: 100%;
border-bottom: solid 2pt black;
}


The (X)HTML:
<table class="whole">
<tr>
<td>
<table class="half"><tr>
<td>Naam</td>
<td class="fill"></td>
</tr></table><!--
--><table class="quarter"><tr>
<td>Geslacht</td>
<td class="fill"></td>
</tr></table><!--
--><table class="quarter"><tr>
<td>Leeftijd</td>
<td class="fill"></td>
</tr></table>
</td>
</tr>
<tr>
<td>
<table class="whole"><tr>
<td>Verlangd soort werk</td>
<td class="fill"></td>
</tr></table>
</td>
</tr>
<tr>
<td>
<table class="whole"><tr>
<td>Plaatselijk adres</td>
<td class="fill"></td>
</tr></table>
</td>
</tr>
<tr>
<td>
<table class="whole"><tr>
<td>Geboorteplaats</td>
<td class="fill"></td>
</tr></table>
</td>
</tr>
<tr><td>&nbsp;</td></tr>
<tr><td>Namen van de ouders:</td></tr>
<tr>
<td>
<table class="half"><tr>
<td>Vader</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Adres</td>
<td class="fill"></td>
</tr></table>
</td>
</tr>
<tr>
<td>
<table class="half"><tr>
<td>Moeder</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Adres</td>
<td class="fill"></td>
</tr></table>
</td>
</tr>
<tr>
<td>
<table class="half"><tr>
<td>Beroep van vader</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Moeder</td>
<td class="fill"></td>
</tr></table>
</td>
</tr>
<tr>
<td>
<table class="half"><tr>
<td>Geboorteplaats vader</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Moeder</td>
<td class="fill"></td>
</tr></table>
</td>
</tr>
</table>


Here's how it looks in Firefox:

http://www.mobileread.com/forums/attachment.php?attachmentid=64271&stc=1&d=1294353467

I haven't tested that in any ebook reader, and it's rather hack-ish all around. Perhaps someone will have a better idea.

Toxaris
01-07-2011, 04:08 AM
Looks good... but only in Firefox. In Chrome it looks strange with fields overlapping each other and Sigil does the same or displays it just below each other. Strange, because the code used looks ok to me.
What I also find strange, is that if I remove the comment tags the layout is changed.

I will look futher, but if someone has an idea...

Ah, apparently nested tables are not supported...

frabjous
01-07-2011, 03:27 PM
Sorry I should have tested it on a Webkit browser.

It seems to work OK (at least in Chromium 10) if you use constant amounts for whole, half and quarter. For example:


table {
border-collapse: collapse;
}
td {
white-space: nowrap;
padding: 0px;
}
table.whole {
width: 480px;
margin: 0px;
}
table.half {
width: 240px;
display: inline-block;
}
table.quarter {
width: 120px;
display: inline-block;
}
td.fill {
width: 100%;
border-bottom: solid 2pt black;
}


Adjust to taste. Unfortunately, that does put some limits on what's possible with regard to font size changes, but I think it should cover all reasonable changes.

I don't have Sigil installed, so I can't test it there.

It would be good to avoid nested tables if possible (though they are quite common on the web). I'll try to think of an alternative, just in case this doesn't work.

(Edit: Oh, yeah, and the comments are there to avoid the line breaks being taken as while space if rendered as HTML rather than XHTML. There's probably an "official" workaround for that, but I'm just making things up as I go, y'know....)

Toxaris
01-07-2011, 06:20 PM
I can work with this! Much better than an image to use... Thanks!

frabjous
01-07-2011, 11:34 PM
It occurred to me that the inner tables seem to be doing all the work here, and that it would probable be fine to remove the outer table and replace its rows with divs. And that seems to work just fine, even with using percentage widths, rather than absolute widths, and it removes the need for nested tables. I tested in Firefox, Chromium and Opera. What do you think?

The CSS:
div.formrow {
width: 100%;
margin: 0px;
padding: 0px;
}
table {
border-collapse: collapse;
}
td {
white-space: nowrap;
padding: 0px;
}
table.whole {
width: 100%;
margin: 0px;
}
table.half {
width: 50%;
display: inline-block;
}
table.quarter {
width: 25%;
display: inline-block;
}
td.fill {
width: 100%;
border-bottom: solid 2pt black;
}


The (X)HTML:
<div class="formrow">
<table class="half"><tr>
<td>Naam</td>
<td class="fill"></td>
</tr></table><!--
--><table class="quarter"><tr>
<td>Geslacht</td>
<td class="fill"></td>
</tr></table><!--
--><table class="quarter"><tr>
<td>Leeftijd</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="whole"><tr>
<td>Verlangd soort werk</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="whole"><tr>
<td>Plaatselijk adres</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="whole"><tr>
<td>Geboorteplaats</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow"><td>&nbsp;</div>
<div class="formrow">Namen van de ouders:</div>
<div class="formrow">
<table class="half"><tr>
<td>Vader</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Adres</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="half"><tr>
<td>Moeder</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Adres</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="half"><tr>
<td>Beroep van vader</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Moeder</td>
<td class="fill"></td>
</tr></table>
</div>
<div class="formrow">
<table class="half"><tr>
<td>Geboorteplaats vader</td>
<td class="fill"></td>
</tr></table><!--
--><table class="half"><tr>
<td>Moeder</td>
<td class="fill"></td>
</tr></table>
</div>

Toxaris
01-08-2011, 08:25 AM
I will test it later today or tomorrow. It looks promising though!