I would like to get some feedback as to the look I'm working on. It's at www.dawninglight.net. Any ideas and criticisms are welcomed. It's my first go at using CSS. Thanks!

Comments

Steven’s picture

I like the picture at the top, but it's a pity that it's cut off left/right and not flush with the top edge of the page. You could try making it fade out left/right onto a horizontally repeated background image, on which the picture would be layered.

There's also a weird Mozilla issue on my side: when I hover or select certain parts, they move down-right 2 pixels. I've never seen this bug before though, so I have no idea what's triggering that.

As far as the layout goes, it's pretty nice, but a bit too cramped for my tastes, especially in the center: try to separate each post with a generous margin, as this helps visitors grasp the structure of what they're seeing more easily.

Color-wise it's quite nice, but I think the background for the center area is a bit too dark for comfortable reading. The site's name is "dawning light", but aside from the picture it's pretty gloomy. Consider brightening it, or even adding a soft 100-200px high vertical gradient at the top (as if the sun is shining down on the page). I'd also brighten the sidebars a bit, but less than the center area (so you get a simple, non-intrusive indication of what parts are more important that others).

And finally, I really don't like how you gave the form elements the same background color as their surroundings, as this makes them less visible. I'd make them at least somewhat different.

The 3D bevels of the page also seem a bit too heavy and a bit too gray. Some areas are ambiguous as far as in-or-out goes. If I look at the bottom-left corner, I get the impression that the left sidebar has a inset bevel rather than an outset one.

PS: I just took a look at your site in Internet Explorer and it looks quite different from in Mozilla. One thing to remember about CSS is that the different browsers often have different defaults for values (such as border-color) and that they sometimes interpret non-exact values (like "medium" or "groove") slightly differently.

--
If you have a problem, please search before posting a question.

davidblewett’s picture

Thanks for the feedback. I agree on the gloomy look. I had just re-used the code to make the top menu transparent. I'll try using higher opacity values for the content/block areas, or just use solid white. I like your idea about the gradient. I'm new to this kind of thing, and am trying to learn some neat tricks.

I'm not sure what you mean by form elements?

I noticed the cramped feeling too, and I think it was because I was trying to make the image move up the page. I must have turned off some padding settings somewhere.

I was just able to take a look at the site in IE as well, and there are some oddities. I can change the border styles, I'm not set on those. I was just playing with the different values last night. I would like to do the rounded corner stuff that drupal.org uses, and seperate the different block sections. I also want to do a drop-down menu, ala AListApart's Suckerfish example.

I'll post back after I've had time to clean it up a bit.

http://www.dawninglight.net

davidblewett’s picture

Oh bother, in IE the content entries are spaced out nicely but in Firefox, the titles of one entry are pushed up against the links of the previous. I've tried several combinations of margin/padding values but can't get them to seperate in Firefox. Each change moves things around in IE, though.

In IE, the menu at the top has an annoying space underneath it. Not there in Firefox of course... Trying to balance both on the image is getting annoying!

--
http://www.dawninglight.net

davidblewett’s picture

I uploaded a couple of screenshots, and would appreciate which you prefer. One has the photo as the header image, the other as the entire page background. I like both, but the one with it as the page background doesn't look as good at smaller resolutions. Maybe I should scale the picture down to 800x600 instead of 1024x768?

Here they are:
Photo as header background
Photo as page background

As for the form elements, I figured out that it's because of the container element being transparent. The version I'm using now uses PHPTemplate, so I might be able to single out the blocks that have form elements and make those opaque.