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.

__________________
Enigma Computer Community - A unique technology forum.

d a v e

maybe a bit like this?

Reed92

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.

__________________
if (headhurts == "possibly") {
alert ("keep going!");
}
else if (headhurts == "yes") {
alert ("go to sleep");
}
else if (headhurts == "damn !@#$ mofo scripts...") {
alert ("give up and have a beer!");
}
else {
alert ("watch TV");
}

Reed92

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