First CSS Site -- Please Critique

[Reed92]

Hello all.

I just finished laying out my index page and working out most of the bugs(I think).

I'm pretty satisfied with the layout itself, but it has no color. I have no idea what colors to pick or where to put them.

I'm a much better code monkey than a designer, so please help me!

Here it is:
Fire-Ex Website

Thanks in advance!

Edit: Also, please let me know if the css doesn't agree with your browser! It appears to work fine in IE7+, Firefox 5, and in Chrome

Anyone? Bueller?

 

[d a v e]

put logo on a black/dark background .

take colours from the logo and match with blacks and silvers. the yellow for nav is a good suggestion

EDIT: is the logo yours? the edges aren't antialiased properly

 

[Ennesus]

It doesn't work in Chrome for Mac.

reset your padding to the #nav and get rid of the negative margin.
Define overlow:hidden; on the nav and it will work just a little bit better.

 

[lucasbytegenius]

Also set text-decoration: none; in #nav a:hover.

 

[d a v e]

maybe a bit like this?

 

[Reed92]

It doesn't work in Chrome for Mac.

reset your padding to the #nav and get rid of the negative margin.
Define overlow:hidden; on the nav and it will work just a little bit better.

I'll try resetting the padding. As far as defining overflow:hidden, though, will it hide part of my menu? I remember having a problem with that, but it may have just been the 'top' div that was causing problems.


d a v e - Thanks a ton for that mock-up. You have a much better eye than I do! The edges weren't antialiased because, well, I couldn't figure out how in Paint.NET or Expression Design; i'll look into it, though.

Thanks everyone!

 

[Ennesus]

It wil hide a part of your menu when you define a height, but only when the menu is to big.In example when they're to many list items it pushes the last list item to a second row resulting the content to get moved to the right

see the following screenshot

 

[Phreaddee]

1. I think the underline on your h1 is confusing.
   either you use underlines for headers and no underlines for links (rather colour change) or vice versa, alternatively if you really wanted to keep the underline on the header than add a bottom border to the h1 rather than text-decoration. you can then style as you want, and a subtle difference will avoid confusion.
2. Give your paragraphs some line-height! very important.
3. font size in "x-large" etc? if you want to use a relative amount use em's, which is much easier to work with, or px if you want a fixed amount. I would make the font-size of the nav smaller so the issue shown by Ennesus doesn't rear its ugly head on the first sign of a cntrl+ (or cntrl- oddly enough), they need some room to move. I can read that from the other side of the room, yet i'm sitting right in front of it. smaller. please. (but not too small...)
4. I would choose a colour to add into the mix, and the red headers on daves mockup appeared to brighten the mix a lot, so I would go with something like that. Also the sepia image needs to be changed to a warmer tone or neutral. your grey background also could be matched better. try http://kuler.adobe.com/#create/fromacolor you can make some awesome colour palettes from that site.
5. change link colours from default. have a full font stack, etc etc although thats little nitpicking things.

 

[Reed92]

1. I think the underline on your h1 is confusing.
   either you use underlines for headers and no underlines for links (rather colour change) or vice versa, alternatively if you really wanted to keep the underline on the header than add a bottom border to the h1 rather than text-decoration. you can then style as you want, and a subtle difference will avoid confusion.
2. Give your paragraphs some line-height! very important.
3. font size in "x-large" etc? if you want to use a relative amount use em's, which is much easier to work with, or px if you want a fixed amount. I would make the font-size of the nav smaller so the issue shown by Ennesus doesn't rear its ugly head on the first sign of a cntrl+ (or cntrl- oddly enough), they need some room to move. I can read that from the other side of the room, yet i'm sitting right in front of it. smaller. please. (but not too small...)
4. I would choose a colour to add into the mix, and the red headers on daves mockup appeared to brighten the mix a lot, so I would go with something like that. Also the sepia image needs to be changed to a warmer tone or neutral. your grey background also could be matched better. try http://kuler.adobe.com/#create/fromacolor you can make some awesome colour palettes from that site.
5. change link colours from default. have a full font stack, etc etc although thats little nitpicking things.

Wow!! I completely forgot about em's . Like I mentioned, I'm working in Expression Web. Sometimes it tries to be helpful and suggests things...like font sizes in x-large...so far, it hasn't been much more helpful than Notepad.

I think it's looking pretty good now. I might dull that 'call to action' box a little; it draws the eye a little too much (as in, even I have a hard time holding my focus on the content itself).