I wanted these sections to be "liquid," so the content would fill the width of whatever browser you use it on. I also wanted the pages to print with some decency. I gave up on making pages that worked in Internet Explorer or Chrome or the Android browsers. I just want things to look good in Firefox.
The first problem is that Firefox will cut both <div> and <table> elements in half when it renders printed pages. What it will not cut in half is images. So I made a table with two cells. The left cell has an image one pixel wide and 450 pixels long. The other cell holds the picture and the caption. The picture sets the width of the table. So each picture in the Repair proceure is in its own little table that Firefox will not cut in half when it prints. Then I float all the tables "left" in the style-sheet. Lets say there are 12 pictures in the article. If you have some giant browser window 4000 pixels wide, or zoom way out in Firefox, all 12 of them will fit in a single row. As you narrow the window, the rightmost tables will pop under the top row. When you narrow the browser window like on a phone, it will arrange the tables 1 wide by 12 rows. They hop around for sizes in between. I already made the header section of the pages liquid, so this schemes dovetails with that nicely.
I wanted the page to have a clear start, so I made a new table for the very top that would hold the title, the deck (subtitle) and a key picture. I made it twice as wide as the picture tables, but liquid so it will narrow down to one narrow column if need be. Lots of fiddling with the Movable Type templates, the page entry HTML (using Komposer pasted into the Entry post) and the style sheets (using the fantastic Stylizer). One key thing was having a second stylesheet for print. That way I can suppress the search bar and contents and the pdf link in the printed page. To make the pdf file, I just do a print out of Firefox to a pdf writer, Cute Writer in this case.
A lot more suffering to get the category pages and top-level index page right-- and I gave up on those printing right, but it can be done. I prefer to get more content up. This scheme requires that the written parts don't force the table to blow out longer than the 450 pixels set by that 1-pixel image in the left cell. Another example of why you can't separate "content" from "presentation" like all the web idiots like to profess.
You can grab the HTML and CSS from the pages, so now I will just outline my personal procedure for making a page. No need to read the following, it is just to jog my memory in a year.
- FileZilla-- make local work folder-- get Primary Gasket
HTML file & change name, 400px.jpeg, 450px.jpeg, all in
local work folder.
- Windows Explorer-- get all pictures for article into
work folder.
- IrFanview-- Make pictures right size and filename,
create xxxx_tt.jpeg for top table.
- Komposer 7-- Change title of page, search and replace
to put current picture names in source, write new captions
to fit.
- HTML Tidy-- cut and paste Komposer source and
tidy.
- Movable Type-- Change footer if new year, new entry
& paste top table from Tidy into "Body" and content
tables to "Extended", set category. Publish.
- FileZilla-- upload pictures to whatever folder Movable
Type created for the post. Also hi-res pictures to
subdirectory.
- Movable Type-- upload asset xxxxx_tt.jpeg on top of
itself, so thumbnail shows in category pages. Publish
category and index templates, maybe "Contents" section of
site.
- Firefox-- print to pdf file, give same basename as
pictures.
- FileZilla-- copy pdf file to post folder, same for HTML
Komposer file.
- Windows Explorer-- delete work folder
