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

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