CSS / design help - Livre d'Or








Miscellaneous. Eclectic. Random. Perhaps markedly literate, or at least suffering from the compulsion to read any text that presents itself, including cereal boxes. * Blogroll * Strange words * More links * Bookies * Microblog * Recent comments * Humans only * Second degree * By topic * Cool posts * Writing * New post

Tags

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *



livredor
CSS / design help
Saturday, 12 March 2005 at 12:40 pm
Tags:

Previous Entry Next Entry


So I've created two styles for my journal, and I've been fiddling with them on and off for a while, but I've now got to the point where I'm relatively satisfied. However, I'm a complete beginner at this whole web design lark, so I would appreciate some feedback (and technical help if you're good with this sort of thing).

People using Mozilla family browsers People using IE People using Opera People using Macs People using obscure browsers not mentioned here Oh, and if you know stuff about CSS and feel like reading mine, you can see the code for the default Belle Epoque layout and the Purple Contemporary layout on my website. I've tried to comment the code a bit but I admit it could be clearer.

I don't think it validates and I have a feeling it's not terribly accessible, this stuff. But I don't really know where to start with those things. Well, that's not true, I know where to start with making standards-compliant CSS, but not how to do that without breaking everything. So if you have suggestions about those aspects they will also be welcome.
Addendum 12.3.05: I have played around with the Belle Epoque style to try and deal with some of the problems raised. So please could any helpful web design gurus compare the old version (Belle Epoque, the default), with the proposed new version (Under construction) and tell me what you think. It all fits together perfectly at low res, but I suspect I'm going to be left with a lot of white space at high res. I'm hoping it's better to have the white space in the middle than on the right. Thanks for all your lovely suggestions!


Moooood: creativecreative
Tuuuuune: Mechanical Blackbird (in my head)
Discussion: 14 contributions | Contribute something
Tags:

Previous Entry Next Entry




Contribute something
View all comments chronologically



wychwood: geek
From:wychwood
Date:March 12th, 2005 02:04 pm (UTC)
54 minutes after journal entry
(Link)
Looking at all this... [Mozilla family - Firefox 1.0, specifically with 1024x768 resolution]

The CSS for the first style, Belle Epoque, validates with only two errors -
a) in line 28 you have "background-repeat: y;" when it should be "background-repeat: repeat-y;"
b) in line 22 you have ".usericon_main {float: center; margin-left: 50%}" but "center" is not a valid value for float - only left, right and none are accepted.

The CSS for Purple Contemporary has only one error showing, in line 71:
div.usericon_entry_wrap a, div.usericon_entry_wrap a:link, div.usericon_entry_wrap a:visited, div.usericon_entry_wrap a:hover, div.usericon_entry_wrap a:active: {background-color: transparent} - it says there's a parse error with a colon? I can't see why, offhand... Perhaps someone with more CSS knowledge can help.

(I just used the validator at http://jigsaw.w3.org/css-validator/ which is pretty good at providing links to the relevant specification, when it finds an error)

I've no idea what, if any, difference that is making to the way things look.

Purely on appearance, I think I prefer the Purple one. The syndication buttons at the top look rather unbalanced, but it's better overall for me. The Belle Epoque one has more obvious "clutter" between the top of the page and the start of the journal, as well as a lot more whitespace. The panel with icon and so on fills in the non-post half of the page in the Purple one, whereas Belle has a bit of whitespace to the left and lots to the right, so the post looks... lopsided, once you get down the page a bit. Also, the background image is only visible at the very top and bottom and in the small gap between posts, which rather defeats the point of having it all down the page. If the picture was to the right, it might work better, in terms of filling up the space, and being visible. But it's your journal!

If you want screenshots of anything as seen on my system, just shout. Or comment, which may be a little more efficient... ;)
(Reply to this comment) (Thread)
livredor: teapot
From:livredor
Date:March 12th, 2005 04:10 pm (UTC)
2 hours after journal entry, 04:10 pm (livredor's time)
(Link)
Thanks, wychwood, this is incredibly helpful! I should have had the courage of my convictions and put the CSS through a validator myself; I didn't dare because I thought it was going to be a horrible mess! float:center doesn't validate but it seems to work. I will play with that a bit more. The rest is just typos so I can easily fix. Yay.

The syn buttons are in the wrong place in Purple Contemporary. Stupid me forgot to fix them since they only show up in the main view and I've been testing on the friends view (since there's a bigger variety of posts). Thanks for spotting that!

You're right that Belle Epoque is kind of lopsided. There's a quirky reason why it has to be slightly off-centre at low res, so at high res it's exaggerated and maybe I can't get away with it. The trouble is that the background image needs not to overlap the edges of the boxes, or it spoils the illusion of rounded corners. The way I've done the frame, I can't get away with transparent corners, they have to be white. And therefore the background behind them has to be white too or it looks a mess. So putting the background to the right won't work. Not unless I make it a lot skinnier so boxes + picture takes up less than 800px.

I'm considering losing the picture altogether, cos you're right that it doesn't really show up in the small gaps between the boxes. The problem is that without it, the whole screen is full of massive expanses of white space in high res. And also, you can see it really nicely with my calendar. (I didn't care about leaving the calendar transparent because there's not much text you need to be able to read, unlike with the entries!) There may be a way to have the picture either absent or on the right for the journal page and centred for the calendar, but I'm not entirely sure how to do that. Will fiddle with it, anyway. About the top of the page being cluttery, hm, when I first made the style I kind of liked it that way, but now I'm not so sure, maybe I should condense it a bit.
(Reply to this comment) (Up thread) (Parent) (Thread)
camomiletea: default
From:camomiletea
Date:March 12th, 2005 04:51 pm (UTC)
3 hours after journal entry, 11:51 am (camomiletea's time)
(Link)
If you want to center an icon, you should use 'text-align: center;' , not float.

As for that error message about a colon, you had an extra colon, in a:active:. This validates:

div.usericon_entry_wrap a, div.usericon_entry_wrap a:link, div.usericon_entry_wrap a:visited, div.usericon_entry_wrap a:hover, div.usericon_entry_wrap a:active {background-color: transparent;}

(Reply to this comment) (Up thread) (Parent) (Thread)
livredor: bunneh
From:livredor
Date:March 12th, 2005 08:47 pm (UTC)
7 hours after journal entry, 08:47 pm (livredor's time)
(Link)
If you want to center an icon, you should use 'text-align: center;'
Oooh, brilliant, why didn't I think of that? I suspect because I was being too literal and seeing text-align so I assumed it wouldn't work for images. Silly me.

The extra : I figured out from the validation error message, but thank you anyway.
(Reply to this comment) (Up thread) (Parent) (Thread)
pne: default
From:pne
Date:March 12th, 2005 04:52 pm (UTC)
3 hours after journal entry, 05:52 pm (pne's time)
(Link)
The way I know to centre an inline elements (such as an image) inside its parent box is text-align: center; did you try that?

For block elements (such as tables), you're supposed to use something else but I won't go into that unless you're curious.
(Reply to this comment) (Thread)
camomiletea: default
From:camomiletea
Date:March 12th, 2005 05:13 pm (UTC)
4 hours after journal entry, 12:13 pm (camomiletea's time)
(Link)
Setting left and right margins to the same amount? Except it doesn't work in IE.
(Reply to this comment) (Up thread) (Parent) (Thread)
pne: default
From:pne
Date:March 12th, 2005 08:24 pm (UTC)
7 hours after journal entry, 09:24 pm (pne's time)
(Link)
Setting left and right margins to the same amount?

Exactly. Such as using margin-left: auto; margin-right: auto.

Except it doesn't work in IE.

Yup. IE wants to use text-align: center for block elements as well.

So if you want things to work in IE and standards-conforming browsers, you'll have to use both the margin and text-align methods, then override text-align for the table contents so that the cell contents aren't centred as well.
(Reply to this comment) (Up thread) (Parent) (Thread)
livredor: bunneh
From:livredor
Date:March 12th, 2005 08:51 pm (UTC)
7 hours after journal entry, 08:51 pm (livredor's time)
(Link)
The way I know to centre an inline elements (such as an image) inside its parent box is text-align: center;
Yes, that does exactly what I was trying to do, thank you so much for that tip.

Most of my layout is divs rather than tables. Other than the calendar which is a whole other headache. But I'm not overly concerned about that.
(Reply to this comment) (Up thread) (Parent) (Thread)
camomiletea: default
From:camomiletea
Date:March 12th, 2005 05:11 pm (UTC)
4 hours after journal entry, 12:11 pm (camomiletea's time)
(Link)
I'm using Firefox 1.0 with the 1024x768 resolution. So the same as the previous commenter :) I like The Purple Contemporary better.

In Belle Epoque, I'm not really sure what to suggest. Why can't you make the corners transparent? Convert the picture to GIF, if it isn't and make that area transparent. I can try if you don't have necessary software for this.

In both styles the links are highlighted. Personally, I don't care for the effect... But if you like it, :)
(Reply to this comment) (Thread)
livredor: letters
From:livredor
Date:March 12th, 2005 09:04 pm (UTC)
7 hours after journal entry, 09:04 pm (livredor's time)
(Link)
Why can't you make the corners transparent?
It's not that I physically can't make the corners transparent; the image is a transparent .gif anyway. It's that if I do that, the right and left borders show up behind the corners and ruin the effect. The :before and :after pseudoclasses inherit from the parent in rather odd and not entirely predictable ways.

I've tried to make the Belle Epoque layout more balanced, with less clutter at the top and the image moved to a thin bar at the right-hand side. Does that make it any better from your perspective ("Under construction" style)?

I'm not sure about the highlighted links, I'm kind of back and forth about that one. That's why I've removed the highlights from the actual entry boxes in Purple Contemporary. Thanks for the comment though.
(Reply to this comment) (Up thread) (Parent) (Thread)
camomiletea: default
From:camomiletea
Date:March 12th, 2005 09:16 pm (UTC)
8 hours after journal entry, 04:16 pm (camomiletea's time)
(Link)
Oh, yes, I like the new version of Belle Epoque much better. :D
(Reply to this comment) (Up thread) (Parent) (Thread)
From:digby_tantrum
Date:March 13th, 2005 01:49 am (UTC)
12 hours after journal entry
(Link)
Speaking as a non tech monkey, I think your design is great: black text on a white background.

Admittedly, it's not as good as white text on a black background, but don't mind me.
(Reply to this comment) (Thread)
livredor: letters
From:livredor
Date:March 13th, 2005 02:37 pm (UTC)
1 days after journal entry, 02:37 pm (livredor's time)
(Link)
One of the things about this layout is that it has built-in stylesheets that allow you to override all the colour settings. Sadly this doesn't work in IE. But if you're using a decent browser, you can select the "white_text" stylesheet. There a couple of my CSS effects which look sort of strange if you take away the page colours, but I was pretty careful not to rely on anything graphical for readability.
(Reply to this comment) (Up thread) (Parent) (Thread)
emmavescence: beautiful
From:emmavescence
Date:March 13th, 2005 02:43 am (UTC)
13 hours after journal entry
(Link)
I use Opera, and therefore would be using style=mine to view your journal. But I thought I'd have a look with Firefox anyway. I prefer Purple, except it looks a little odd to me over on the left, as if too little content is taking up too much space. I also prefer the links to have no highlight until you hover them, instead of the reverse, which you have. There could do with being a little space between your subtitle (?) and the RSS buttons. The blue section at the top, with the text and the tabs, seems a little unfinished somehow. Maybe due to the lack of link effects, and the relatively plain font and deep colour background. Maybe the background from the date would look good along that section. I'm not entirely sure.

In Belle Epoque, it seems like there are too many boxes along the top, where they could be combined in some way. Sometimes the read comments link doesn't highly properly and the cursor doesn't change on hover, and I'm not sure what that's about.

They're both pretty nice though :) I'd have to do some tweaking to make them fit my tastes in journal style, but given that they're yours, that doesn't really matter a whole lot.
(Reply to this comment) (Thread)



Contribute something
View all comments chronologically