Gratuitous layout post

[liv]

I'm in the mood where I find fiddling with CSS the most satisfying thing to do. I'm also a big fan of _sommeil's designs, so I have been working on an adaptation of her Sail layout from her community spiralbound_lj. It had to be adapted because she wrote it for Generator, with an image map for the navigation, and my layout is div-based and needs pure CSS navigation.

You can see what I did if you have a browser that allows alternate stylesheets, and you choose the "Sail" stylesheet. The faked image map I was so proud of doesn't work in Opera or at high resolution, but I think the main content of the journal is readable. If anyone has any suggestions to fix that I'd love to hear them! (Old versions of Opera won't display my journal properly at all, but that's not my fault.)

Other than that, well, it's a nice clean design that doesn't over-rely on graphics. I have a feeling the pale blue colour of the links may be just too light to read, which is a pain. What do people think? Any bugs or aesthetic issues I haven't thought of? You're welcome to take a look at the stylesheet if you're interested.

If it seems generally popular I shall undertake the mammoth task of making it not break in IE so that I can use it as default.

Comments

[wychwood]

I rather like that - although the central column is still very narrow. It works fine for me (Firefox), though I agree, the links are a little difficult to read.

[liv]

Thank you! The central column is narrow for my tastes too, but I'm not clever enough with graphics to make the header image wider. Also, I think the layout is nicely balanced as it is. I'm toying with the idea of adding a sidebar (eg taglist or some of the other information that's hidden at the moment), but I'm concerned that would make the layout look cluttered, especially at low res.

[pseudomonas.livejournal.com]

The text hovers to the left of the space presumably intended for it, and the buttons don't work, under Firefox 1.0.7/WinXP.

[liv]

Thank you; can you be a bit more specific about which text? The whole main column, or some particular bit of text? It does shift if people post large images, that doesn't seem to be avoidable though I've tried to minimize it.

And when you say the buttons, you mean the navigation tabs?

[pseudomonas.livejournal.com]

The whole main column, but not the headers, just from below "Previous 20 entries", and yes, the navigation tabs. You'll be fascinated (obviously) to know that Firefox/1.0.4 (Debian package 1.0.4-2sarge3) renders both correctly.

[liv]

I'm tempted to assume it's just an image or something breaking the alignment. Firefox doesn't vary that much between OSs (not being IE, after all), and the page looks and works fine in Firefox for me using Win98 and for you using Firefox with Linux. It's possible that you've looked at the page at different times in the different browsers, or logged in versus not logged in, so there's some breaking post that you're seeing in one version but not the other.

[lyssiae.livejournal.com]

I like it, it's very fresh, if that makes any sense.

There's one thing I've wondered about for a while and which is semi-related to your post, and so I'm going to ask you about it - tables etc. usually display with me as only taking up a relatively small proportion of my browser screen, leaving lots of blank space around the edges. Is this because of people specifying width in terms of pixels instead of percentages, do you think?

[liv]

Thank you! Credit for the basic design goes to _sommeil, I just reimplemented her idea.

Yeah, tables taking up a small proportion of the screen means that they're specified with pixels rather than percentages. I have to do that for both my default layout and Sail, because I need the entry boxes to be the same size as the graphics, if you see what I mean. There is theoretically a way to make the Art Deco corners work at variable widths but I've not found a way to make that happen.

The Purple layout has percentage widths, so it should look ok in high res. But rysmiel told me it displays with the entries as a tiny narrow column in some configurations, so it hasn't worked quite the way I was hoping.

[emma]

It's very nice :) It would be cool if you could get the image mappy things to work in Opera, but it's useable as is.

[liv]

Yay, this is my first layout I've ever got even approximately working in Opera. Thanks for the feedback.