Tag Archives: layout

Basic Layouts V2

Posted on by
Reply

Here are some more resources to get your websites off to a start with different layouts: http://kenwilles.com/files/html_templates.zip

Each folder contains bare basic HTML, CSS, and images to get started. These templates are in HTML5.

The following describes what is in each layout:

  1. Top banner image area with side bar on left, content in middle, footer at bottom and centered on page.
  2. Top banner image area with side bar on right, content in middle, footer at bottom and centered on page.
  3. Top banner image area with side bar on left, content in middle, side bar on right footer at bottom and centered on page.
  4. Top banner image area with navigation bar below, content in middle, footer at bottom and centered on page. Additional css code is available to create side bar on the left if the main content div is made smaller to accommodate a new div.

layout descriptions

CSS Layout Tips

Posted on by
Reply

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.

Getting started with different HTML layouts

Posted on by

Sometimes creating a website layout from the ground up can be a difficult thing. Of course there are nice layout frameworks like 960.gs but sometimes that just won’t work for what you may need.

So here is an ultra bare bones starter package to get going with: http://kenwilles.com/files/different-base-layouts.zip

  1. Absolute positioning layout–this layout allows for placing the content exactly where you want it.
  2. Centered page layout–sets the context in a “container” from which everything is centered in the browser view-port.
  3. Centered page with absolute positioning layout–this centers the page and also allows for absolute positioning items. Note that for this one, you’ll have to specify the height of the container because absolute positioned items are removed from document flow.