[RESOLVED] An Opinion Needed on Basic Layout

**Bytes** · 03-21-2006 12:40 AM

First off, I like to thank the programmer/designer who’s posting I lifted (copied) from a thread whose title I have forgotten and more importantly whose name I have also forgotten.

This is the exact example I wanted to use as a training tool for myself to learn CSS. I’ve modified the design very little by only adding the “body” statement in the <HEAD> of the document and revising the “margins”.

What I’d like is anyone’s opinion on the following provided code, to see if this is the best of a classic example to begin with for this style of layout (Header, Footer, three columns).

A premature “Thanks” for your careful review and comments is much appreciated.

The <head>:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>

   <style type="text/css">
  <!--
body{text-align:center}

#container {
  width: 766px;
  margin: 0 auto;
  padding: 0;
}

#header-01 { 
width: 730px; 
height: 100px; 
margin: 0 0 0px 0;  					
border: 1px solid green; 
font-weight: normal;
background-color: #ffd;
padding: 5px; 						     
}

#navigation { 
float: left;
width: 150px; 
height: 400px; 
margin: 0px 0px 0px 0;  		     
border: 1px solid red; 
font-weight: normal;
background-color: #fdf;
padding: 5px; 						    
}

#content-01 { 
float: left;
width: 422px; 
height: 400px; 
margin: 0px;  						     
border: 1px solid blue; 
font-weight: normal;
background-color: #dff;
padding: 5px; 							
}

#content-02 { 
float: left;
width: 157px; 
height: 400px; 
margin: 0px 0 0px 0px; 			   
border: 1px solid gold; 
font-weight: normal;
background-color: #efe;
padding: 5px; 							
}

#footer { 
clear: both;
width: 730px; 
height: 100px; 
margin: 0 0 0px 0;   				 
border: 1px solid purple; 
font-weight: normal;
background-color: #eef;
padding: 5px; 							
}
  -->
  </style>

</head>

The <body>:

Code:

<body bgcolor="#808080">

  <div id="container">
  <div style="text-align:left">
    <div id="header-01"> 
      <h2>Header</h2>
</div>
    <div id="navigation">
      <ul> 
      <p>Navigation</p>
      </ul> 
    </div>
    <div id="content-01">
      <p>Content-01</p>
    </div> 
    <div id="content-02">
      <p>Content-02</p>
    </div> 
    <div id="footer">
	      <p>Footer</p>
    </div>
  </div>
  </div> <!-- container -->

</body>
</html>

**jogol** · 03-21-2006 07:05 AM

just some quick notes:

1. put the css in an external file
2. style the body in the external file aswell.
3. get rid of <div style="text-align:left"></div> and put "text-align:left" into #container
4. use <h1> for your first Header, not <h2>
5. <ul><p></p></ul> should be <ul><li></li></ul>
6. look at your site in firefox and you will get acquainted with your new mates called browser-differences

**ray326** · 03-21-2006 12:44 PM

Also you might check out this ALA article.

http://www.alistapart.com/articles/holygrail

**Bytes** · 03-21-2006 07:09 PM

Jogol & Ray - Thanks much for your review of my posting, constructive suggestions and the links of reference.

Your advice is well taken and appreciated,

Thread: [RESOLVED] An Opinion Needed on Basic Layout

Thread Tools

Display

[RESOLVED] An Opinion Needed on Basic Layout

Thanks Folks

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions