Date Originally Written: 28 June, 2007
Author: Jason Gonzalez

Okay. So you might have heard that Tableless designs for web pages using Cascading Style Sheets is going to be the new standard. Although most web pages are still designed using tables, it is good to know how to put together a basic layout using CSS. A basic layout is fairly easy to create and is now guaranteed support from all of the stylesheet conscious browsers. Another good benefit from using CSS for layout is that the layout information is usually kept separate from the content, so instead of a search engine reading table layout code, it can focus on reading your content. So CSS layout is what we will do in today’s tutorial.

We will use a somewhat standard layout with:

  • A Title Bar along the top with links underneath
  • A left Navigational panel with more links
  • A Content area to the right of the navigational panel

Also, our layout will be fluid, which means it will resize as the browser window resizes. (I will show the basic html page for this and the finished CSS page in separate links).


So, we will first type in the html for our Title Bar.

  • Type the following (which will create an XML compatible XHTML file) into any text editor
    • <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
      
      <html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
      
      <head>
      <title>CSS layout tutorial 01</title>
      </head>
      
      <body>
      
      <h1>This is the Top Level Heading</h1>
      <p><a href="#">Link One</a>
      <a href="#">Link Two</a>
      <a href="#">Link Three</a>
      <a href="#">Link Four</a>
      <a href="#">Link Five</a>
      <a href="#">Link Six</a>
      </p>
      
      </body>
      </html>
  • Save As an ASCII text file

The above code created an </h1> heading and six horizontal links. We won’t make the links an unordered list (to be formatted into a horizontal list with CSS) to keep this lesson simple. Instead, we’ll put all of these links into a paragraph.

  • Type the following just below the last </p> tag in the previous html code:
    • <h3>Left Navigational Panel</h3>
      <ul>
      <li><a href="#">More Links Seven</a></li>
      <li><a href="#">More Links Eight</a></li>
      <li><a href="#">More Links Nine</a></li>
      <li><a href="#">More Links Ten</a></li>
      <li><a href="#">More Links Eleven</a></li>
      <li><a href="#">More Links Twelve</a></li>
      </ul>

And, finally we type in our content layer.

  • In this case, I just copied and pasted some text from this tutorial and repeated it. Type the following just after the last </ul> tag in our code:
    • <h3>This is the content</h3>
      <p>Our layout will be fluid, which means it will
      resize as the browser window resizes. Our layout will
      be fluid, which means it will resize as the browser
      window resizes. Our layout will be fluid, which means
      it will resize as the browser window resizes. Our
      layout will be fluid, which means it will resize
      as the browser window resizes.</p>
      
      <p>Our layout will be fluid, which means it will
      resize as the browser window resizes. Our layout will
      be fluid, which means it will resize as the browser
      window resizes. our layout will be fluid, which means
      it will resize as the browser window resizes. Our
      layout will be fluid, which means it will resize as
      the browser window resizes.</p>

Notice from our typed html that our content goes in a linear fashion from top to bottom.

Check out the look with the screenshot just below. And here is the link to the actual html page: http://www.jgpws.com/tutorials/css/htmlexample_css1.html

wp_screen05


Next, we are going to use <div> tags to divide each section into three parts and assign ids to them, which will be defined in our style sheet later.

  • Type the following around the first <h1> tag and horizontal links combination as shown below:
    • <div id="titlebar">
      <h>This is the Top Level Heading</h1>
      <p>
      <a href="#">Link One</a>
      <a href="#">Link Two</a>
      <a href="#">Link Three</a>
      <a href="#">Link Four</a>
      <a href="#">Link Five</a>
      <a href="#">Link Six</a>
      </p>
      </div>
  • Repeat this step for two other divisions as shown below:
    • <div id="leftnav">
      <h3>Left Navigational Panel</h3>
      <ul>
      <li><a href="#">More Links Seven</a></li>
      <li><a href="#">More Links Eight</a></li>
      <li><a href="#">More Links Nine</a></li>
      <li><a href="#">More Links Ten</a></li>
      <li><a href="#">More Links Eleven</a></li>
      <li><a href="#">More Links Twelve</a></li>
      </ul>
      </div>
      
      <div id="content">
      <h3>This is the content</h3>
      <p>Our layout will be fluid, which means it will
      resize as the browser window resizes. Our layout will
      be fluid, which means it will resize as the browser
      window resizes. Our layout will be fluid, which means
      it will resize as the browser window resizes. Our
      layout will be fluid, which means it will resize
      as the browser window resizes.</p>
      <p>Our layout will be fluid, which means it will
      resize as the browser window resizes. Our layout will
      be fluid, which means it will resize as the browser
      window resizes. our layout will be fluid, which means
      it will resize as the browser window resizes. Our
      layout will be fluid, which means it will resize as
      the browser window resizes.</p>
      </div>

The final and most important steps in our tutorial are to apply a style sheet with style rules to our html layout. Because this is a simple example, we will create an embedded style sheet inside of the <head> tags.

  • Place a <style> declaration within the <head> tag, as follows:
    • <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
      
      <html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
      
      <head>
      <title>CSS layout tutorial 01</title>
      <style type="text/css">
      <!--
      
      -->
      </style>
      </head>
      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
      
      <html xmlns="http://www.w3.org/TR/xhtml1" xml:lang="en" lang="en">
      
      <head>
      <title>CSS layout tutorial 01</title>
      <style type="text/css">
      <!--
      
      -->
      </style>
      </head>
  • Then we place the style rules for our “titlebar”:
    • <!--
      #titlebar {
      /* make this float to the left side */
      float : left;
      /* margin and padding on each div must be set to 0 to work as intended */
      margin : 0px;
      padding : 0px;
      /* and add some color */
      background-color : #6699FF;
      /* width of titlebar must be 100% */
      width : 100%;
      }
      
      #titlebar a {
      /* put padding around our links in a separate style rule */
      padding : 6px;
      }
      -->

If you preview the html file in a browser right now, it will look like a jumbled mess, with the titlebar floating left and everything else wrapping around it. We will continue by floating the left navigational panel left.

  • Use float property to float “leftnav”. Type this directly below the previous style rule but outside of the closing curly brace
    • #leftnav {
      float : left;
      margin : 0px;
      padding : 0px;
      background-color : #99CCCC;
      width : 25%;
      height : 400px;
      }
  • …And the “content” panel:
    • #content {
      float : left;
      margin : 0px;
      padding : 0px;
      background-color: #CCFFCC;
      width : 75%;
      height : 400px;
      }

Okay, now preview this in a browser. You may notice that the paragraph text and headings are pushed up against the left edges, but if we apply margins and padding to the <div> tags, we lose our layout. The trick is to apply margins to each paragraph and heading.

  • Put margins around the paragraphs and heading in our content and leftnav divs (type each below their style rules):
    • #leftnav h3 {
      margin-left : 3%;
      }
      
      #content p {
      margin-left : 5%;
      margin-right : 5%;
      }
      
      #content h3 {
      margin-left : 3%;
      }

Finally, preview the finished product in a browser (screenshot below). And that’s it. You have created a standards compliant layout!

wp_screen06

Advertisements