Home arrow Style Sheets arrow More CSS Pagination Link Templates
STYLE SHEETS

More CSS Pagination Link Templates


If you want to extend the functionality of your website with a neat pagination mechanism, but aren't sure of how to give the page links an appealing look, then keep reading this tutorial. In a step-by-step fashion, youíll learn how to create several ready-to-use pagination templates with only a few straightforward CSS properties. This is the conclusion to a two-part article.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
December 14, 2011
TABLE OF CONTENTS:
  1. · More CSS Pagination Link Templates
  2. · Adding Borders and Background Colors

print this article
SEARCH DEVARTICLES

More CSS Pagination Link Templates
(Page 1 of 2 )

If you've read the first part, you probably have a pretty good idea of how to provide your pagination links with an engaging appearance. In that article I developed a couple of clean templates, which made use of some background colors and borders to polish the link's visual presentation. Even though the properties involved in the styling process were old favorites, which youíve surely been using for years, they yields results that were more than acceptable.

As I said just a moment ago, my plan here is to put at your disposal a decent variety of pagination templates. This way, you can pick the one that best suits your needs and tastes. Therefore, in this final article Iíll be creating a few additional templates. They'll look a bit more sophisticated than the previous ones, as theyíll decorate the links with background images, rounded corners and even some native shadows.

Ready to continue this hopefully instructive journey in building pagination links with CSS? Then keep reading!

Defining the Pagination Linksí Base Structure

Before I start creating the new set of templates, itís necessary to define the markup upon which theyíll be seated. Working along the same lines as the examples developed in the preceding article, Iíll be using the same core structure, which was a plain, unordered list.

Having said that, hereís the web page containing the target list. Check it out:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Creating pagination links with CSS</title>
</head>
<body>
<div id="wrapper">
    <header>   
        <h1>Creating pagination links with CSS</h1>
        <h2>Header section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </header>
    <section>
        <h2>Content section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
    </section>   
    <footer>
        <h2>Footer section</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Quisque rhoncus sodales sapien ac blandit. Nam lacus urna, commodo eget tincidunt vitae, ullamcorper at nulla. Vivamus ac iaculis justo.</p>
        <ul id="pagelinks">
            <li><a href="#" class="previous">&laquo; Previous</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#" class="current">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>
            <li><a href="#" class="next">Next &raquo;</a></li>
        </ul>
    </footer>
</div>
</body>
</html>

As seen above, the structural markup that I plan to use for building the pagination templates is pretty standard; it's composed of a few links which have been placed inside a list. Since this base structure speaks for itself, Iím not going to bore you with irrelevant details. Instead, itís time to begin constructing the first of these brand new templates.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials