css questions

[ritaxis]

Here is the layout I would like to use for the index page for Bella and Chain. Nice and clean, right? To the left of the leftward bike chain will be the links to the chapters. To the right of the rightward chain will be a description of the project. Between, the current chapter.

As I understand things, to make the page readable by the most people possible, the three areas of the page should be set in percentages relative to the width of the browser area the reader is using. I almost understand how to do that using the css block things. I'm getting there.

But see what's happening at the top of the page? I want that wheel to overlap with the chain just like that. So far I think that the chain is a separate image from the wheel and title, so that the chain can repeat-y down the page. But I want the wheel to be in that position relative to the chain no matter what the width of the screen is. If I set the chain at 20% from the left, and I set the wheel at 5% from the left, and the screen gets wider, the wheel moves to the left relative to the chain: if the screen gets narrower, the wheel moves to the right relative to the chain. Can I anchor the wheel image to the chain instead of relating it to the box or the screen?

Alternately, if I set the side bits to absolute measures, and anchored the chains and the wheel to some number of pixels or ems from the left (and from the right for the rightward chain), would the center box with the current chapter still accomodate different sized browsers?

Comments

[brooksmoses]

So, meanwhile, some thoughts on the real problem. (Admittedly in theory, not practice, as my css skills are quite minimal.)

I'd be tempted to suggest setting at least the left-hand column to a fixed pixel width -- for one thing, it can't get much narrower than it is without having the wheel go off-screen, and much wider will be a bit excessively wide. So that will handle the wheel-positioning issue.

The issue with the center box accomodating different-sized is, I think, whether or not the fixed-width things will look too small on really wide windows, without being so wide as to leave no room for the middle on a really narrow window. At about 100-200 pixels for the left bar, you should be fine. A 640-pixel-wide window really isn't wide enough for both a right-side and a left-side bar, in my opinion, so it's fine to specify that the minimum page width [1] is 780 pixels (that leaves a little room for window-edge stuff on a 800-pixel-wide screen), and let people with smaller windows do horizontal scrolling -- in fact, on a page with long text in the middle and a small screen, I'd prefer something like that, so that I can set the horizontal scrollbar to the middle and then read with the text fairly wide across the screen without the sidebars taking up on-screen space.

[1] You can do minimum page widths in css, yes? Or, if not, minimum widths for a box that's specified proportionally? (If the latter, you can do minimum for the middle and fixed or minimum for the sides, and it adds up to a page minimum....)

[ritaxis.livejournal.com]

Maybe this is the way to go. As to the minimum page widths -- I don't know yet. I haven't seen a rule for it. What I've seen is a whole lot of fancy ass graphics intensive crap with everything specified to the pixel and the text is too small and the pages don't work right and it's all illegible. I've seen good things too. Simple is good.

I have to finish Afterwar before this project goes live, but I can't help messing around with it, and when I do start it, I want to be way ahead of myself so I won't fall behind until later.