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]

I'll first post the traditional "Ack! LJ friendspage screen for text, not for exceptionally wide images! Bad screen!" post. (The text, of course, gets widened to fit the image, and thus all the text below it runs off the side of the screen too. An <lj-cut> / </lj-cut> pair around it would fix that.)

Thoughts about the actual question to follow in a subsequent comment.

[brooksmoses]

Wait, now there's no picture at all! It went away!

I'm terribly confused.

[ritaxis.livejournal.com]

I've been struggling with it. First, there was this huge picture. You must have been reading while I was messing with it. Right at that moment. Then, I tried to link to the picture you get in the scrapbook between the thumbnail and the big picture, but that turned out to be a broken link. Right now, there should be a clickable link at that first "here" that you can follow. I could, of course, go back and make a shrunk picture to post, but it's midnight. And gee, a person can click.

[brooksmoses]

Oh, I see; you made it a link from the word "Here". In your journal style, links are sufficiently close in color to ordinary text that I completely couldn't see that that was a link, and so assumed that the picture had simply disappeared without a trace. I only noticed the link when I went back to my friendspage.

This is why I lament the loss of underlines under links in modern css-based styles, even though it does look typographically prettier without them.

[ritaxis.livejournal.com]

I think I can change the link color. I'll go look at that. Yes, I think underlining links is good. Or bolding them. But not, like some I've seen, all flashy and wiggly so that they twitch when you run the cursor over them, or fade, or jump up and down and change colors six ways from Sunday.

This posting in real time is funny.

[brooksmoses]

Indeed; that's much clearer. (And I share your opinion of links that seem to have gotten in the way of some "make alive" spell.)

What I find interesting about the back-and-forth in something like real time is the way that it changes my perceptions of the conversation; I suddenly have this mental image of you at your keyboard also typing, and I feel like I'm interacting with you personally, much more so than usual when the feeling is much more one of interacting with the words by themselves.

[ritaxis.livejournal.com]

Okay, I did that. Links are now much more visible than they were.

[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.

[dd-b.livejournal.com]

You can't do minimum widths that I know of; you can do *maximum* widths for text columns, though, which I find useful.

The whole space inside the box seems to be one link; which apart from anything else is interfering with my seeing which images are separate bits.

At a very general level, the way to control stacking of two blocks (images or whatever) is to put them inside the same container block. The container has to have non-default positioning (relative, with no offset, works without actually moving anything).

[ritaxis.livejournal.com]

I hope I understand you right. The link is to a sketch, not a working page. DOes that help? I haven't coded anything yet. I just know what I want it to look like and I have all these pieces of paper with bits of css and html code on them that I've culled from various tutorials and models.

If I understand you right, you're saying that I should probably have a container block that contains all that will be on the page. But does that solve the problem of the moving image? It sems to me that the problem remains the same.

[dd-b.livejournal.com]

The first part clarifies a couple of things, yes.

I see you're not actually stacking pictures, in the sense I meant, so that technique probably won't help much, you're right.

You can probably do it by positioning *outside the block* and relative to the right edge, though; if there's say a div leftnav with relative positioning, and then an img within that, positioning it at -30px, 0 should put it in a consistent position relative to the left boundary of leftnav.

Or you might find it made things work more easily for the left bar to be fixed-width; I've ended up with that solution on most of my sites. Then it's easy to position things on its border.

[ritaxis.livejournal.com]

Yes, I'm coming to the conclusion that not every element has to be flexible for the page to be legible. I think I will set the chains and the title image at fixed distances and -- then what? How do I set the middle block, then? So that it takes up "what's left over?" Because, with the side blocks being fixed, setting the middle block to a percentage won't work.