What is generally accept as a "good website layout"? A subject of debate, however, a good layout will have a clearly defined header area, sidebar (optional), content area, and footer area. It can look like the following:

layout

The sidebar can be neglected, on the left side, the right side, or on both sides. The fact still remains that there is a clear cut header, sidebar, content area, and footer, however.
Note: the widths and height of these elements will differ of course.

Tables or CSS?

Starting with CSS2.1 in table designed websites started to phase out rapidly. This is because rich content management systems like WordPress, Drupal, and Joomla were being born and refined. The developers of these fine CMSs did not use tables to do their bidding for their rich admin panels and client-side website interactivity. Today, tables are nearly deprecated when it comes to web layout. CSS is used to create tableless layouts. If you don't know CSS and you want to learn CSS you can click here to learn it!

How to Start?

When I start a website I will work on my external style sheet first and foremost. I will set all of the link colors, define by background, etc... Like the following example:

html, body {
     margin:0;
     padding:0;
}

body {
     margin:auto;
     width:1000px;
     background:#3b3b3b url (bg.png) repeat-x top center;
     font-family: Tahoma, Arial, sans serif;
     font-size:12px;
     color:#fff;
}

a, a:visited {
     text-decoration:underline;
     color:#ff9300;
     outline:none;
}

a:hover {
     text-decoration:none;
     color:#ff9300;
     outline:none;
}

img {border:none;}

Once I have my foundation elements all set and ready to go I will create my ID selectors that I will use for the website. If you are unfamiliar with ID selectors or just want a refresher click here for basics or click here for id v. class selectors. The main ID selectors we want are the following:

  • header
  • sidebar (optional)
  • content
  • footer

The CSS could look like the following:

#header {
     height: 75px;
     background: #4c4c4c url(images/header-bg.gif) repeat-x;
     border: 2px solid #fff;
}

#sidebar {
     float: left;
     width: 150px;
     background: #DBDBDB url(images/sidebar-bg.gif) repeat-x;
}

#content {
     float: right;
     width: 850px;
}

#footer {
     clear: both;
     height: 75px;
     background-color: #4c4c4c;
}

The HTML code to make this happen would be the following:

<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div id="header">
    <p>Add content here</p>
  </div>

  <div id="sidebar">
    <p>content here</p>
  </div>

  <div id="content">
    <p>content here</p>
  </div>

  <div id="footer">
    <p>content here</p>  
  </div>
</body>
</html>

We are using a div element that is a block level element so we can negate display:block; for the ID selector. It is common practice that we use div elements to call certain ID selectors since div, by default, does nothing.

Once we have the basic structure of the website we can add our custom styles, class selectors, additional class selectors, nested selectors, pseudo-classes, pseudo-elements, etc... Consider the following for the sidebar:

 #sidebar.container {
     background: #DBDBDB url(images/gradient.png) repeat-x top top;
     width: 125px;
     max-height: 250px;
     overflow: hidden;
}

This creates a class selector called container which can only be used for the ID called sidebar. This container will be called multiple times in the sidebar (hence, the class selector) and will reside inside the sidebar since it's a child element.

Want to see a working example and then some? Please download web-layout.zip where you can see multiple examples of web layouts each with a combined and their own individual style sheet so you can easily see what the CSS is doing to each layout.

web-layout.zip
web-layout.zip
Size: 14.43 KB

Be Sociable, Share!