“It” Happens!

Inline Styles for Posts at BgOnline

I have been trying to learn a bit more about CSS of late, so I thought I would try out some simple things at BgOnline. As Igor pointed out, there is very little to my layout. I want to keep it that way.

What I have done is collect the little bits of HTML and CSS that I occassionally use at BGO, and assemble them into a web page. With that page open in one browser tab, and BGO open in another, it is easy to copy boiler plate, and drop it into a message. The only extra time it takes to write a post is the time needed to copy and paste, which is to say, almost none.

Here is a list of what I have so far:

Text, Plain
Text and Background
Text, 2 columns
Board Diagram left, Text right
Text left, Board Diagram right
2 Board Diagrams
3 Board Diagrams

Anchor (Link)
Short Quote
Indented Block Quote
Indented Block

Bulleted List — Spacing: Single
Bulleted List — Spacing: 1.5
Numbered List — Spacing: Single
Numbered List — Spacing: 1.5

Simple Table
Table of All 21 Rolls
Table of Nacbracs
Nactation Key

When I get the bugs hammered out, I will happily share what I have with those who are interested.

Reflow for Small Screens

I intended, more or less, for the page to reflow as it does. On my Nook tablet, the board diagrams drop down below the text boxes that accompany them.

In portrait mode, the text boxes do not quite fit on the screen of my Nook tablet. You have to scroll to the right to see the full box my earlier post.
In landscape mode (turn your phone sideways), the text boxes display fully on my tablet. If anything, they could be zoomed up to make them larger.
The board diagrams flow nicely on the Nook. Each one displays on a row by itself.
On the wide screen of my laptop, the 3-across board display works nicely. When you zoom in (Ctrl +), first one board, and then the another drops down to a new row.

@Stick: What screen size required that you zoom out? At 100%, my laptop screen has room for 4 or 5 diagrams on one row. At 125%, there is room for 3.75 diagrams, so 3 fit comfortably. Have you viewed the post on a CRT with a 4:3 aspect ratio? I am worried that only two boards will fit on that.

@Igor: Is the reflow described above any different for you? Does the board or text completely break up?

I am going to see whether I can drop the distinction between the 2-column and 3-column layouts I have. It may be better to simply string a series of diagrams together on one row, be it 2 or 3 or more, and just let the browser/tablet/phone reflow them.

In other cases, it will be better to have a single board diagram precede the text. I already have some boiler plate for that.

This post uses 30em instead of 34.8em for text width. I am hoping to solve the portrait problems for small screens. I won’t know if it works, however, until I post this.

Please let me know how this views on your phone or tablet. Thanks for the feedback.

Mike

Post Response

Your Name:
Your E-Mail Address:
Subject:
Message:
If necessary, enter your password below:
Password:

Inline Styles for Posts at BgOnline

Font Size

Reflow for Small Screens