01-06-2011, 01:46 PM | #1 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
A form-like layout
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? |
01-06-2011, 05:38 PM | #2 |
Wizard
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
|
The only thing that occurred to me would be to use tables within tables. This will give you a rough idea:
The CSS: Code:
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; } Code:
<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> </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> I haven't tested that in any ebook reader, and it's rather hack-ish all around. Perhaps someone will have a better idea. |
Advert | |
|
01-07-2011, 03:08 AM | #3 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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... Last edited by Toxaris; 01-07-2011 at 03:12 AM. |
01-07-2011, 02:27 PM | #4 |
Wizard
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
|
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: Code:
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; } 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....) Last edited by frabjous; 01-07-2011 at 03:03 PM. |
01-07-2011, 05:20 PM | #5 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
I can work with this! Much better than an image to use... Thanks!
|
Advert | |
|
01-07-2011, 10:34 PM | #6 |
Wizard
Posts: 1,213
Karma: 12890
Join Date: Feb 2009
Location: Amherst, Massachusetts, USA
Device: Sony PRS-505
|
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: Code:
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; } Code:
<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> </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> |
01-08-2011, 07:25 AM | #7 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
I will test it later today or tomorrow. It looks promising though!
|
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
layout questions | Morrile | Calibre | 5 | 12-21-2010 12:08 PM |
Restoring the old layout | Ross Smith | Calibre | 9 | 06-24-2010 02:01 PM |
Appalling layout | StanByk | 27 | 05-09-2009 02:46 PM | |
Layout format? | Seligman | Sony Reader Dev Corner | 9 | 06-19-2008 05:29 AM |