Forums

wmwood

I have done some 50/50 stuff in the past but i decided to put my skills to the test and make a full CSS/XHTML site.
Here's an image of the PS Design.
http://img84.imageshack.us/img84/8792/markupimagell7.th.jpg

Here's a link to my final conversion. Link Removed

Comments? Suggestions?

Thanks!

chriscoyier

Looks pretty good William, nice work :D

I looks like you need to get a little more spacing to the left and right of the gray bar that separates the sidebar from the main content. Typography will be your next big step. The big yellow "W" is a great candidate for using the :first-letter pseudo-class!

NikeAirforce1s

Neat and congrats, the only thing I think you need to fix is that yellow gradient header, it seems you just placed it there for the hell of it, you need to do something with it, don't just leave it there looking plain, if you're not gonna do anything with it, you might want to take it out or reduce the height.

wmwood

I Have updated it to better match the photoshop design (use same link above)

Thanks chris and airforce for the comments!

VolkanGorgulu

Hi wmwood,

I want to make some suggestions,

First of all, I think you do not need this little line | between the items of your main navigation, it adds a noise to the navigation.

Secondly why do you duplicate you navigation below the header, maybe you can move it your footer.

Next one is I think you should really consider making your font-size a little bigger that can help you with white space management.

Finally I have looked at your source code @ page-top, if I were you I would write it as


<div id=\"page-top\">

<h1>William Wood Web Design - Building Dynamic, Professional Websites</h1>

<ul>

<li><a href=\"#\">Home</a></li>
<li><a href=\"#\">About</a></li>
<li><a href=\"#\">Products</a></li>
<li><a href=\"#\">Services</a></li>
<li class=\"contact top\"><a href=\"#\">Contact</a></li>

 </ul>

</div>

Instead of giving classes to those items, you can directly target them in your CSS like this,



#page-top h1 {}
#page-top ul {}
#page-top li {}

I just tried to help, best regards. :D

treehouse : what would you like to learn today?

Forums

My First PSD to 100% CSS/XHTML