Page list bottom bar : li « Tags « HTML / CSS






Page list bottom bar

    
<!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">


#content {
  width: 1003px;
  overflow: hidden;
  background: url(images/main_bg.gif) top left repeat-y;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

#wrapper {
  width: 1003px;
  overflow: hidden;
  background: url(images/end_bg.jpg) bottom left no-repeat;
}


#main {
  width: 670px;
  float: left;
}

#main h2 {
  display: block;
  padding: 55px 0 45px 124px;
  background: url(images/main_top.jpg) top left no-repeat;
  font-size: 24px;
  color: #84919E;
  font-weight: normal;
}

#posts {
  overflow: hidden;
}

.post {
  width: 582px;
  overflow: hidden;
  padding: 0 0 39px 38px;
  color: #97A7B7;
}

.post h1 {
  font-size: 28px;
  color: #ACCAE7;
  padding: 0 0 20px 0;
}

.post img {
  padding: 0 0 24px 0;
}

.post p {
  padding: 0 0 13px 0;
}

.post a,#sidebar .more {
  color: #19ACE3;
  text-decoration: underline
}

.post a:visited,#sidebar .more:visited {
  text-decoration: underline
}

.post a:hover,#sidebar .more:hover {
  text-decoration: none
}

.post .more,#sidebar .more {
  display: block;
  float: left;
  line-height: 16px;
  background: url(images/more.gif) top left no-repeat;
  padding: 0 0 0 22px;
  margin: 0 18px 0 0;
}

.post .comments {
  display: block;
  float: left;
  line-height: 16px;
  background: url(images/comments.gif) top left no-repeat;
  padding: 0 0 0 22px;
  margin: 0 18px 0 0;
}

#pager {
  width: 580px;
  height: 62px;
  margin: 0 0 0 38px;
  padding: 8px 0 0 0;
  border-top: 1px solid #242836;
  font-size: 12px;
  overflow: hidden;
}

#pager a {
  
}

#pager ul {
  display: block;
  overflow: hidden;
  float: left;
  padding: 0 125px;
}

#pager li {
  display: inline;
}

#pager ul a {
  color: #19ACE3;
  padding: 0 4px;
  text-decoration: underline;
}

#pager #active {
  text-decoration: none
}



</style>
</head>
<body>

    <div id="content">
      <div id="wrapper">
        <div id="main">
          <div id="posts">
            <h2>Heading</h2>
            <div class="post">
              <h1 class="title">Heading</h1>
              <a href="#"><img src="images/photo1.jpg" alt="" width="580" height="285" /></a>
              <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
              <a href="#" class="more">Continue reading</a>
              <a href="#" class="comments">17 Comments</a>
            </div>
            <div class="post">
              <h1 class="title">Heading</h1>
              <a href="#"><img src="images/photo2.jpg" alt="" width="580" height="285" /></a>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
              <a href="#" class="more">Continue reading</a>
              <a href="#" class="comments">5 Comments</a>
            </div>
            <div class="post">
              <h1 class="title">Heading</h1>
              <a href="#"><img src="images/photo3.jpg" alt="" width="580" height="285" /></a>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.</p>
              <a href="#" class="more">Continue reading</a>
              <a href="#" class="comments">42 Comments</a>
            </div>                                                            <div id="pager">
              <a href="#" class="previous">previous page</a>
              <ul>
                <li><a href="#" id="active">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">6</a></li>
                <li><a href="#">7</a></li>
                <li><a href="#">8</a></li>
                <li><a href="#">9</a></li>
              </ul>
              <a href="#" class="next">next page</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</body>

</html>

   
    
    
    
  








Related examples in the same category

1.'li' creates one item in a list
2.Nested LI tag
3.Add style to an anchor in a LI tag
4.Define class for
  • to set its font weight to bold
  • 5.LI width: 33%
    6.LI margin: 0 0 0.25em 0
    7.LI font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;
    8.Set display to inline to a LI under a UL in DIV
    9.Alignment of list items
    10.Alignment of list items with margin
    11.Three level list
    12.Inline centred list
    13.Right-aligned bullets
    14.Tab like list
    15.li list-style-type: lower-roman;
    16.li text-indent: -0.75em;
    17.UL LI bullet image
    18.LI display: inline;
    19.LI list-style-type: none;
    20.LI line-height: 44px;
    21.List with no margin
    22.Margin for list
    23.Without list type
    24.li { list-style-image: url("http://java2s.com/style/logo.png");}
    25.list-style-position:inside;list-style-position:outside;
    26.list-style: lower-roman inside;
    27.List order and start
    28.nested ordered and unordered lists
    29.HTML for a definition list
    30.HTML and CSS for vertical and horizontal lists
    31.Selecting elements in nested lists
    32.HTML and CSS for two lists with different list-style properties
    33.HTML and CSS for displaying ordered list style types
    34.HTML and CSS for mixed list-style-type values
    35.Using the display property to make a list display inline
    36.Definition List Example
    37.Unordered List Example
    38.Scrolled List Example
    39.Nested Lists
    40.List types
    41.Lists as navigation
    42.Here is a definition list
    43.a nested ordered list
    44.Dropdown List Example
    45.Link list inside a DIV
    46.ul li list-style-type: square;
    47.Image and text list
    48.Using Arrow Image for LI list
    49.For unordered lists, there are three: disc, square, and circle.
    50.For ordered lists, there are eleven different styles of marker:
    51.The marker can be removed from either ordered or unordered lists with the none keyword.
    52.Setting style for LI inside a DIV
    53.line-height: 44px; for li
    54.Using double arrow sign for UI LI
    55.Link styles