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.