CSS layout: replace tables with lists.

  1. Example 1: use list to create navigation bar.
    #nav {
    margin: 0 auto;
    width: 100%;
    height: 60px;
    background-color:#a2d39c;
    }

    #nav ul {
    margin:0 auto;
    width: 1000px;
    overflow:hidden;

    }

    #nav li {
    float: left;
    display: block;
    list-style:none;
    }

    #nav a {
    text-decoration:none;
    }

  2. Example 1: use list to create columns and rows.
    #div_cols_rows {
    margin:0 auto;
    width: 1000px;
    }

    #div_cols_rows ul {
    width: 960px;
    overflow:hidden;

    }

    #div_cols_rows li {
    width: 200px;
    float:left;
    display: block;
    list-style:none;

    }

Advertisements
%d bloggers like this: