www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] An Opinion Needed on Basic Layout

  1. #1
    Join Date
    Feb 2006
    Location
    18.47N, 98.59E
    Posts
    126

    resolved [RESOLVED] An Opinion Needed on Basic Layout

    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>

  2. #2
    Join Date
    Feb 2005
    Posts
    345
    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
    Last edited by jogol; 03-21-2006 at 07:07 AM.
    free music: comatronic

  3. #3
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Also you might check out this ALA article.

    http://www.alistapart.com/articles/holygrail
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  4. #4
    Join Date
    Feb 2006
    Location
    18.47N, 98.59E
    Posts
    126

    Thanks Folks

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles