CSS Layout Tips

Before you begin CSS layout, you really need to understand the box model. Check out the explanation here: http://reference.sitepoint.com/css/boxmodel.

Then understand how the position property works here: http://www.alistapart.com/articles/css-positioning-101/

After that, read up on how to use the float property with layout: http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

Good layouts will use a combination of positioning values and floats.

Now if you want to use a css framework to help speed up the layout process, I recommend 960.gs. I would only do this after you understand the things mentioned above. There are other alternatives out there too that fit different resolutions.

Also for hover effects to menu items, I strongly recommend using sprites for menus–here is a tutorial here: http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>