My first CSS coded site

[meenainc]

Not sure how "clean" the css and html are, but it took me 4 hours to code which is a helluvalot faster than it used to take me with tables, fonts, and iframes.

http://www.cleanandsell.com

My next move will be to convert pages to PHP with a header, index, and footer area for better performance, browser compatibility, and SEO. I have only tested it in FF.

HUGE thank you to CSS Tricks!

Chris

[Rob MacKay]

Hey congrats! :D Its lookin good too, well done :)

Here is my code critique :)

In ya body tag, remove all this leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" and just add margin:0; padding:0; to ya totalBG class. Try using CSS Sprites instead of preloading images in the body tag. Here are some sprite tuts:

https://css-tricks.com/css-sprites-what- … -use-them/

http://www.from-the-couch.com/post.cfm/ … ss-sprites

You managed to escape tables… then you use tables! lol come on dude :D the nav can go from what it is, to:

<ul id="navbar">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>

With some CSS it will work exactly the same – this is also where your sprites come in to remove that horrible image swapping malarkey.

your logo area – change it to a <h1></h1> and use image replacement in CSS to style the tag:

https://css-tricks.com/header-text-image-replacement/

It again, keeps your code nice and slick :)

You don’t really need that <br />, just style the P correctly

All these "row" divs… again you might be away from tables, but you cant stop thinking like them eh? :D DIVs work how you want to – they don’t follow the same rules as tables :) you really need to break freeeeeeeeeeeeeeeeeeeeeee :D

All in all it was a great start! you have done well! Just need to move away completly from tables and stop trying to emulate them with divs :D

For a great PSD to XHTML/CSS tut – have a look here:

http://nettuts.com/videos/screencasts/c … d-to-html/

and some more :)

http://net.tutsplus.com/videos/screenca … -to-xhtml/
http://blog.themeforest.net/resources/1 … tutorials/

Have fun! :)

[tomwalters5678]

Well done! I like the site because it isn’t too garish. Some improvements would be to change the menu items so that their blur and hover effects are different. To be honest the glow effect is kinda old fashioned and cheesy so that’s why I would change it. Also going from light green to white for the background is a bad idea, I would stick to going from green to green – merely different shades.

I’m glad a first timer has come up with such a nice design. Keep up the good work!

[Author]

Posts