Topic: Site Check Please

Hello All
I lurk here from time to time and was wondering if anyone would offer some feedback on my first all.css layout website http://testing.digitalfiredesign.net

The site is still in the design phase and I need to a good bit of tweaking yet



[This message has been edited by Vegetta (edited 03-25-2004).]

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

Looks good, very good work to be your first all css page. Tested in both Opera7.5 and Firefox on Linux.

First thing that struck me as not so good was the link (background-)color. It doesn't really fit in with the rest of the design and creates to big contrast with the rest of the text. I think I would use a simple underlined link style with a yellowish color instead, and then make the color more yellow when it is hovered over. If not I would at least add some more padding to the current link style, the background color is to thight to the text almost making it hard to read.

I also find the text a little bit hard to read. I replace the background behind "maincontent" with an identical, but darker background. The css style for creat ing something something like that would be:

body {

    background: #aaa url(image.jpg) 0 0 no-repeat fixed

    ....

}



#maincontent {

    background: #aaa url(image-darker.jpg) 0 0 no-repeat fixed

    ....

}

-Example at css/edge-
That way the background behind the text would be darker, and the contrast with the text would be bigger and therefore make the text easier to read.

The menu could also need some more work. I like the style of it, but it seems lacking compared to how good the rest of the page looks. First off I would add a greater margin between the elements and some more padding on each link. It feels kind of cramped now. Next is the hover effect that doesn't really fit in. I think it would look better if you only underlined and changed the text color on hover. Have you tried having the menu left-aligned in the white box, instead of centered? Not sure, but that might look better since it feels out of sync where it is now. It isn't aligned to any of the browser borders, but it isn't aligned to any other major elements on the page either. So having it left aligned might work better.

And remove the "best viewed 1024x768", the page looks good at 1280x1024 as well.

Code wise there are a few things that could be improved. You should have the menu as a list. A list is the sematicly correct way of coding a menu and it makes for cleaner code as well. For ideas on how to manipulate lists to look how you want check outListamatic.

You've got a couple of empty <p></p> tags in your code. Those should be removed.

I'm not absolutely sure about this, but I think that you should only have one <h1> element on your page. At the moment you've got two, change the second one to <h2> and you'll be fine.

I would also remove the scrollbar styles, but there is not real harm in having them there. But anyway you should convert them to lower case.

To have the page validate you need to add 'type="text/css"' to the style tags surrounding the scrollbar styles. You should also 'upgrade' your doctype to XHTML1.0 or XHTML1.1, I think your page would validate as that as well.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

WOW!!
what awesome feedback guys I really appreciate it! I will be sure to implemet all of your advice. I must say I really have the .css bug now ( Thanks to my bro Ramasax! )

Veneficuz: I really llike your idea about a darker image for the main content area and I agree it would make the text much more legible...I was not settled on a menu yet I will check out the information at listmatic.

I may ditch the scrollbars...after I refine the content the page probably wont scroll anymore. (I doubt if I will have that much text....)

I was unaware about the 1 <h1> rule i will change one to a <h2>

Thanks again guys

When did I say I disliked CSS page layouts? If I did it would have been back in early 2000 when I first came here and ran into twitch's home page whilst using NN4.

Anyways, I think it looks good. Although I do have a couple of concerns:

> Lack of margins, epically when the text wraps around that image (compare the left margin under the image to the left/right margins next to the image, symmetry is your friend).

> Background image the content text is on can make things a little difficult to read.

> Link styles look more like highlighted Google search terms than links.

> Defiantly use a list for the menu as you current mark-up doesn't render any spaces between the links in plain text browsers.

> Don't set the main content text to be fully justified. It creates some ugly arse "rivers of white" through the text as the resolution decreases. Browsers can't hyphenate words on the fly like professional typesetting applications can so it's not a good idea to use full text justification in web browsers period.

> Use different <hx> heading tags for the "Digital Fire Design" and "Digital Fire Design" sections, and try to use ones that roughly corrospong to the weihting and size you apply to them through CSS.

> If you going for a CSS layout, aim for the XHTML 1.0 Strict DTD instead of using HTML 4.01 Transitional. Just remember to mark-up the single tag elements with an engin / like <br /> or <link rel="stylesheet" type="text/css" ... />

> I'll assume the use of the blank <p></p> under the "Digital Fire Design" heading was actually going to be a paragraph of text you haven't filled in yet. If not, be sure to remove it.


Yup, appart form those handfull of minor issues I like it a lot. Well done.

Thanks for the advice Cameron.

Im still sturggling with a background image for my content area...I think perhaps a but more subdued and it`ll be there....

as for the Nav....Ive tried a few different things...still not found one I am pleased with....I may just make some mouse over images.....

Have a flip through the old www.alistapart.com articles on "Taming Lists" and CSS rollovers. Hopefully that'll give you some ideas as to just how flexable using lists can really be. I'd also recommend testing your website in a browser that can disable CSS, just to see how well your markup holds up without it.

Yeah I love the listapart site I`ve been messing with several of the designs they have ..trying to see if something gives me a spark...

I uploaded a version of the page without an attached style sheet and it displayed fine in IE 6 and Firefox ( tho the 2 <h1> tags were overpowering )