Monday, 3 May 2010

how to apply divs

The first
we're going to create within the of this page will contain the entire content area. This allows us to position our layout within the display area wherever we want. We'll give this, and all containers, a unique identity using the "id" attribute of the

Now, within our "page_container", we'll add containers for the specific content areas that we mentioned before. Again, we'll identify each uniquely.

  • At this point, if we were to render this document, we would not be able to see anything. Let's add some dummy content so that we can see what's happening. We'll use a typical scheme for structuring information including titles, sub-titles, paragraphs and a menu.

    1. ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus id turpis. Sed purus. Integer eget ligula elementum felis aliquet rhoncus. Morbi augue.

  • Sidebar

  • Vivamus non urna eget nisi placerat vehicula. Vivamus semper molestie lacus. Proin a tellus et massa placerat ultricies. Curabitur viverra convallis felis.

  • Copyright Information

  • adding styles

    Let's create a basic set of selectors and definitions in our CSS file for the intrinsic HTML elements and for each of the containers. We want to remove the inherent margining and padding from all elements, remove the bullets from the
      that we're using for our menu, and allow for some simple background colors in our content areas for visual clarity.

      1. /* Intrinsic HTML Elements */
      2. body{margin:0;padding:0;}
      3. div{margin:0;padding:0;}
      4. h1{margin:0;padding:0;}
      5. h2{margin:0;padding:0;}
      6. h3{margin:0;padding:0;}
      7. p{margin:0;padding:0;}
      8. ul{margin:0;padding:0;}
      9. li{list-style-type:none;}

      1. /* Uniquely Identified Containers */
      2. #page_container{}
      3. #header{background:#999;}
      4. #left_column{background:#CCC;}
      5. #center_column{background:#ECECEC;}
      6. #right_column{background:#CCC;}
      7. #footer{background:#999;}

      Adding More Styles - Widths, Floats, and Clear

      First, let's define a width and position for our layout by adding definitions to our #page_container selector in our CSS file. Again, nesting all the content in this overall container allows us a great deal of flexibility.

      #page_container{width:760px;margin:0 auto;}

    1 comment:

    James said...

    Tables are completely evil. I recently had to re-design an online store that was previously using tables. Had to re-code pretty much the whole thing rather than a simple re-style.