So I've been designing sites in photoshop for a while now, and am now only starting to get the hang of the coding side of things... this is a site done for a friend whom i owed a favour... I set myself the challenge of using NO TABLES and using NO JAVASCRIPT... I think things turned out well. http://www.tdd-designs.com/daniel/ http://www.tdd-designs.com/daniel/style.css How do you guys think I went? I did most of it by myself, but i needed a bit of help getting the rollovers working properly and the unordered list to display correctly... i'd say i did about 95% of the work without help I know the design itself isn't much to look at but it's what he wanted, I'm just too proud of the coding aspect to toss it away xD . please tell me things i could improve on, and stuff. It's been two days of work, and one night/day of no sleep because of the unordered list problems... so much coffee/coca cola... so little time >_<
Its nice enough, but I'd suggest: http://validator.w3.org - I got 26 errors. You could also try to format your code better - from the layout of the code, I assume you made this in Dreamweaver. Just fix thse 26 errors, and make sure it works in: IE6/7, Firefox 2, Opera 9, and Safari for Windows, BP
the overall aspect is cool, and for a first fully coded page, it's quite a nice outcome. Keep it up... PHP-ing it will be harder, but I think that's a different story
If this is an early coding attempt it's pretty good... But I would suggest the following: Lose the splash screen, it's an annyoing waste of bandwidth. You've got upper case attributes on your stylesheet link - that's invalid XHTML You've got headers, MAYBE those should be... uhm... header tags? Some formatting might help make sure you actually have all your DIV's closed properly. Excess DIV aroun the menu for no reason. unclosed paragraph tags in a XHTML doctype. 'header' and 'footer' DIV's for what should likely be MARGINS on the tag(s) inside them. mild case of classitus on the menu as well - there is NO reason for that 'navi' class to be there. Lack of image replacement = lack of graceful degredation when images are off, and gives search engines nothing to look at. </li><br /><li> - do we SEE a problem here? You can't put ANYTHING between a </li> and a <li> for markup - NOTHING. The only thing that can come after a </li> is whitespace, <li> or </ul>. Fixed width, no centering - no need for that #container either. Given your content there is NO reason for this to even BE fixed width - I'd at least make it semi-fluid up to 1280 and down to 800. (maybe even down to 640 given how narrow the sidebar is) Even WITH all of the above you seem to have some good habits already formed - I see very little in the way of presentational markup and only a handful of presentational elements. Gimme a couple minutes, I'll post up a rewrite for you on my server that's a bit cleaner.
This is how I'd approach that layout: http://battletech.hopto.org/for_others/martinoli/template.html the directory: http://battletech.hopto.org/for_others/martinoli is unlocked so you can grab the gooey bits. a LOT of the shading in your images is so... unnoticable, that I wouldn't be wasting images on them. Literally I didn't even SEE the shading until I zoomed in 500% and went at it with the color extractor... so I axed the shading and went with background and borders saving a TON of images that really weren't doing anything for you. I recombined ALL the mouseovers to a single image, which with the color reduced background gives us a much smaller file there. Image replacements were done for all those 'text as images' you had using the 'glider-levin' technique. You put the background image on the span, then position the span over the text to 'hide it'. I also 'unfixed' the design's width and made it fully fluid. Validates XHTML 1.0 strict, tested working in IE 5.5, 6 & 7, Opera, FF and Safari.
well it looks hot but maybe use text for image overs its a bit nooby the way you did you nav.. soz but good job for first time