Information panel with columns of links : Section « CSS Controls « HTML / CSS






Information panel with columns of links

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
  xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style rel="stylesheet" type="text/css">

#info {
  background-image: url(images/bg2.gif);
  background-position: top left;
  background-repeat: repeat-x;
  width: 859px;
  float: left;
  overflow: hidden;
  padding: 30px 0 20px 0;
  background-color: #DBDBDB;
  color: #454545;
}

#info div {
  width: 160px;
  float: left;
  padding: 0 10px 0 38px;
}

#info ul {
  padding: 12px 0 0 4px
}

#info li {
  list-style-type: none;
  line-height: 18px;
}

#info a {
  color: #454545;
  text-decoration: none
}


</style>
</head>
<body>
    <div id="info">
      <div>
        <img src="images/title5.gif" alt="" width="160" height="26" />
        <ul>
          <li><a href="#">Maecenas hendrerit</a></li>
          <li><a href="#">Massa ac laoreet iaculipede</a></li>
          <li><a href="#">Convallis nonummy tellus</a></li>
          <li><a href="#">In tincidunt mauris</a></li>
          <li><a href="#">Maecenas hendrerit</a></li>
          <li><a href="#">Convallis nonummy tellus</a></li>
          <li><a href="#">In tincidunt mauris</a></li>
        </ul>
      </div>
      <div>
        <img src="images/title6.gif" alt="" width="160" height="26" />
        <ul>
          <li><a href="#">Maecenas hendrerit</a></li>
          <li><a href="#">Massa ac laoreet iaculipede</a></li>
          <li><a href="#">Convallis nonummy tellus</a></li>
          <li><a href="#">In tincidunt mauris</a></li>
          <li><a href="#">Maecenas hendrerit</a></li>
          <li><a href="#">Convallis nonummy tellus</a></li>
          <li><a href="#">In tincidunt mauris</a></li>
        </ul>
      </div>
      <div>
        <img src="images/title7.gif" alt="" width="160" height="26" />
        <ul>
          <li><a href="#">Maecenas hendrerit</a></li>
          <li><a href="#">Massa ac laoreet iaculipede</a></li>
          <li><a href="#">Convallis nonummy tellus</a></li>
          <li><a href="#">In tincidunt mauris</a></li>
          <li><a href="#">Maecenas hendrerit</a></li>
          <li><a href="#">Convallis nonummy tellus</a></li>
          <li><a href="#">In tincidunt mauris</a></li>
        </ul>
      </div>
      <div>
        <img src="images/title8.gif" alt="" width="160" height="26" />
        <ul>
          <li><a href="#">Maecenas hendrerit</a></li>
          <li><a href="#">Massa ac laoreet iaculipede</a></li>
          <li><a href="#">Convallis nonummy tellus</a></li>
          <li><a href="#">In tincidunt mauris</a></li>
          <li><a href="#">Maecenas hendrerit</a></li>
          <li><a href="#">Convallis nonummy tellus</a></li>
          <li><a href="#">In tincidunt mauris</a></li>
        </ul>
      </div>
    </div>
</body>

</html>

   
    
  








Related examples in the same category

1.3D section bar
2.Scrollable section
3.Section on the left
4.Red section title bar
5.Shading section bar
6.Line separated sections
7.Single column layout with two-level top section
8.Right section with boxes
9.Box section with dark background
10.Section title background image
11.Leaving space beteen section
12.Using Padding to add space beteen two sections
13.Even distributed section
14.Using border to highlight section title
15.Section with image title bar
16.Using border to highlight section title 2
17.Section with shading background image
18.White content area and gray outsider
19.Post by date
20.Date block
21.Read more for link set
22.Using Wider border for summary row