New design

h0ly lag · 07-09-2008, 02:37 AM

Ok, so CSS or just design in general has never been my thing truly. Here's one of my latest attempts at a style.

CSS

Jim · 07-09-2008, 07:41 AM

Looks pretty nice mr Lag :)

Some little points though:
-In FF3 the navigation on the top dont seem to align quite right, they should be more left i would think.
-Also in FF3 the "posted by" text is so small it gets rather ugly.

Looks the same in FF as in IE 6 and 7 so thats good! :)

maZtah · 07-09-2008, 08:57 AM

I don't want to sound rude, but the layout looks quite boring.

Like Jim said, the menu doesn't align proper in FF3.

You might want to read some of the following tutorials:

CSS Beginner Tutorial | HTML Dog
Floatutorial: Step by step CSS float tutorial
A List Apart: Articles: How to Size Text in CSS
A List Apart: Articles: Faux Columns
A List Apart: Articles: Sliding Doors of CSS
A List Apart: Articles: Sliding Doors of CSS, Part II
mezzoblue Testing Grounds

ETbyrne · 07-09-2008, 03:13 PM

On a wide screen monitor like mine the top navigation runs off the right side.

See attachment.

Jim · 07-09-2008, 03:18 PM

Hehe ETBurne, read the two posts above you

h0ly lag · 07-09-2008, 04:55 PM

Thanks for the tutorial links maZtah. As for sounding rude, don't worry about it. The idea, at least when it was still an idea, was for it to be clean, simple (haven't we all heard that word too much), and easy to navigate.

But that could change as I go... Oh and I updated the page a bit.

delayedinsanity · 07-09-2008, 06:00 PM

Your navigation menu still floats around the top of the page at will. If you set it up with the same idea as your div#wrap, you can fix it pretty quickly.

Code:

.mattblacktabs{
    margin: 0 auto;
    width: 650px;
}

-m

h0ly lag · 07-10-2008, 05:32 AM

Ok, what now? I did the edit delayed insanity suggested and fixed the navbar. It's now centered on the top and added some green color to the scheme too. As well as just shifting things around.

delayedinsanity · 07-10-2008, 06:28 AM

Suggestions?

Add some flair. Give me a reason to remember it. I like how you used a bright colour with the dark theme to make it pop, but now maybe find a way to make it all flow too. Think of your design like a photograph. You have your frame, you have your primary focal point and you have something surrounding it - what you want to do is have the surroundings integrate in such a way as to complement the focal point, but without competing for attention. Then you need to find a way to connect it all in a way that leads the eye where you want it to go, not just wander aimlessly about.

Also, try to fill up your space. I'm on a 22" monitor, and I know a lot of other people aren't, but your site takes up a very small portion of my browser. Maybe a sidebar with some more navigation in it?

I did up a quick example of where I'd go with a dark blog style design, with yours in mind to illustrate a little of what I mean, you can check it out here.
-m

h0ly lag · 07-10-2008, 09:05 AM

Ok, I added .subnav and played with it a bit as a mock up. Thoughts...

CSS

Jim · 07-10-2008, 09:17 AM

Wow that looks pretty nice mr Lag! About the stuff with an 22" (WS) monitor, i also have one at home and i've seen the website on the screen. I think its avoidable, almost all websites that are 800px or lower look small on them :)

The only thing i think needs to ba changes, is that it lacks contrast. Especially the buttons, they are a bit difficult the see.

But you are deffinetally going the right way ! :)

delayedinsanity · 07-10-2008, 09:26 AM

I like that. I kind of miss your menu tabs turning green on mouseover, but it's looking really good.
-m

h0ly lag · 07-10-2008, 09:38 AM

@delayedinsanity:
The "active" button still highlights green on mouse over.

EDIT: Oh and I forgot that .subnav doesn't align properly in IE.

ETbyrne · 07-10-2008, 03:40 PM

Quote:

Originally Posted by Jim

Hehe ETBurne, read the two posts above you

You specifically stated that it didn't work right on FF3, I stated it didn't work at all for wide screens.

BTW: The design is looking good so far h0ly lag.