CSS for formatting pagination links_问答_开发者

Below is the generated HTML for some pagination links, and also the CSS that is applied to it. For Page 1, the links appear to be 940 px from the top of the screen, which is what I want. However, when I click on a page besides page 1, the links appear to be 1880 px below the top of the screen. I would like the links to always be 940 px from the top of the screen regardless of which pagination link the user is on. What should the CSS be to accomplish this?

Thanks in advance,

John

The generated HTML:

<div class='pages'>[<b>1</b>] </div> <div class='pages'><a href='/booksearch.php?currentpage=2&find=best book ever&searching=yes&search=search' class='linksp'>2</a></div>  <div class='pages'><a href='/booksearch.php?currentpage=3&find=best book ever&searching=yes&search=search' class='linksp'>3</a></div>  <div class='pages'><a href='/booksearch.php?开发者_如何学编程currentpage=4&find=best book ever&searching=yes&search=search' class='linksp'>4</a></div>  <div class='pages'><a href='/booksearch.php?currentpage=2&find=best book ever&searching=yes&search=search' class='linksp'>></a></div>  <div class='pages'><a href='/booksearch.php?currentpage=7&find=best book ever&searching=yes&search=search' class='linksp'>>></a></div>

The CSS:

.pages
    {
    overflow: hidden;
    display: block;
    float: left;
    margin: 4px;
    margin-top: 940px;
    margin-left: 10px;
    font-family: Arial, Helvetica, sans-serif ;
    }       

 a.linksp:link {
    color: #000000; text-decoration: none;
    text-align:center;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

 a.linksp:visited {
    color: #000000; text-decoration: none;
    text-align:center;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

 a.linksp:active {
    color: #000000; text-decoration: none; 
    text-align:center;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

 a.linksp:hover {
    color: #000000; text-decoration: none; 
    background-color: #FFFF00;
    text-align:center;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:0px;
    padding:2px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    }

If this was me and I was able to, I'd rewrite the generated html and arrange them in a list rather than using of div's; it's just more semantic that way. I've heres an example of what I would do based on a news page.

Heres the code:

<html>
<head>
<title></title>
<style type="text/css">
#wrapper{
 height:940px;
 position:relative;
 }
.pages{
 overflow:hidden;
 display:block;
 float:left;
 margin:4px;
 margin-left:10px;
 font-family:Arial, Helvetica, sans-serif;
 }
a.linksp:link{
 color:#000000;
 text-decoration:none;
 text-align:center;
 margin-left:10px;
 margin-right:10px;
 margin-bottom:0px;
 padding:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 }
a.linksp:visited{
 color:#000000;
 text-decoration:none;
 text-align:center;
 margin-left:10px;
 margin-right:10px;
 margin-bottom:0px;
 padding:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 }
a.linksp:active{
 color:#000000;
 text-decoration:none;
 text-align:center;
 margin-left:10px;
 margin-right:10px;
 margin-bottom:0px;
 padding:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 }
a.linksp:hover{
 color:#000000;
 text-decoration:none;
 background-color:#FFFF00;
 text-align:center;
 margin-left:10px;
 margin-right:10px;
 margin-bottom:0px;
 padding:2px;
 font-family:Arial, Helvetica, sans-serif;
 font-size:16px;
 }
.pagination{
 bottom:0;
 left:0;
 position:absolute;
 }
</style>
</head>
<body>
<div id="wrapper">
<div class="article">
<h2>News title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing venenatis lacus a adipiscing. Sed porta nibh a risus tempor id commodo mauris lobortis. Sed commodo rutrum quam at molestie. Sed dapibus orci non sem lobortis a tincidunt leo vulputate. Duis non risus sit amet erat pulvinar viverra tristique vel mi. In vulputate sapien nec ante faucibus rutrum. Mauris vitae dolor ac lacus suscipit vehicula nec id urna. In interdum, erat eget bibendum venenatis, libero ligula vestibulum enim, et tincidunt lectus tortor vel mauris. Morbi id vestibulum libero. Quisque nisl tellus, congue nec blandit et, feugiat ut metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fermentum dolor nec dolor fermentum luctus. Suspendisse accumsan turpis et nibh faucibus fermentum. Nulla sit amet lorem eu mi tempus condimentum vitae et turpis. Aenean lobortis, sem porttitor euismod consectetur, mi leo eleifend velit, et sagittis tortor mauris lacinia nulla. Maecenas porttitor diam at justo tincidunt ut varius lacus sodales. Suspendisse nec diam nunc.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis porttitor condimentum dolor nec porttitor. Fusce porttitor urna pharetra ante vehicula vel iaculis sem condimentum. Aliquam et sem lectus, ut semper neque. Vivamus justo magna, porta sed imperdiet in, vestibulum ut mi. Donec ultrices ullamcorper sem, eu mollis tellus vulputate non. Sed sagittis venenatis lacus fringilla varius. Etiam vestibulum dui et lorem egestas gravida. Cras cursus sodales mauris, sed suscipit tortor pharetra quis. Nulla facilisis varius commodo. Curabitur urna sem, vestibulum condimentum tincidunt eget, malesuada eu ipsum. Integer tristique, sapien sit amet sollicitudin volutpat, mauris velit sagittis urna, ut mollis purus urna quis dui. Donec neque arcu, auctor et blandit a, pretium sed leo. Ut ut elit enim. Sed eu lacus justo, nec sollicitudin erat. Nulla congue auctor nisl vel ultricies. Mauris ac luctus nisl. Phasellus sapien lectus, commodo ut interdum nec, sagittis vitae arcu. Praesent nibh eros, molestie ut condimentum eu, tristique vitae eros. </p>
</div>
<div class="article">
<h2>News title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing venenatis lacus a adipiscing. Sed porta nibh a risus tempor id commodo mauris lobortis. Sed commodo rutrum quam at molestie. Sed dapibus orci non sem lobortis a tincidunt leo vulputate. Duis non risus sit amet erat pulvinar viverra tristique vel mi. In vulputate sapien nec ante faucibus rutrum. Mauris vitae dolor ac lacus suscipit vehicula nec id urna. In interdum, erat eget bibendum venenatis, libero ligula vestibulum enim, et tincidunt lectus tortor vel mauris. Morbi id vestibulum libero. Quisque nisl tellus, congue nec blandit et, feugiat ut metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fermentum dolor nec dolor fermentum luctus. Suspendisse accumsan turpis et nibh faucibus fermentum. Nulla sit amet lorem eu mi tempus condimentum vitae et turpis. Aenean lobortis, sem porttitor euismod consectetur, mi leo eleifend velit, et sagittis tortor mauris lacinia nulla. Maecenas porttitor diam at justo tincidunt ut varius lacus sodales. Suspendisse nec diam nunc.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis porttitor condimentum dolor nec porttitor. Fusce porttitor urna pharetra ante vehicula vel iaculis sem condimentum. Aliquam et sem lectus, ut semper neque. Vivamus justo magna, porta sed imperdiet in, vestibulum ut mi. Donec ultrices ullamcorper sem, eu mollis tellus vulputate non. Sed sagittis venenatis lacus fringilla varius. Etiam vestibulum dui et lorem egestas gravida. Cras cursus sodales mauris, sed suscipit tortor pharetra quis. Nulla facilisis varius commodo. Curabitur urna sem, vestibulum condimentum tincidunt eget, malesuada eu ipsum. Integer tristique, sapien sit amet sollicitudin volutpat, mauris velit sagittis urna, ut mollis purus urna quis dui. Donec neque arcu, auctor et blandit a, pretium sed leo. Ut ut elit enim. Sed eu lacus justo, nec sollicitudin erat. Nulla congue auctor nisl vel ultricies. Mauris ac luctus nisl. Phasellus sapien lectus, commodo ut interdum nec, sagittis vitae arcu. Praesent nibh eros, molestie ut condimentum eu, tristique vitae eros. </p>
</div>
<div class="article">
<h2>News title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris adipiscing venenatis lacus a adipiscing. Sed porta nibh a risus tempor id commodo mauris lobortis. Sed commodo rutrum quam at molestie. Sed dapibus orci non sem lobortis a tincidunt leo vulputate. Duis non risus sit amet erat pulvinar viverra tristique vel mi. In vulputate sapien nec ante faucibus rutrum. Mauris vitae dolor ac lacus suscipit vehicula nec id urna. In interdum, erat eget bibendum venenatis, libero ligula vestibulum enim, et tincidunt lectus tortor vel mauris. Morbi id vestibulum libero. Quisque nisl tellus, congue nec blandit et, feugiat ut metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus fermentum dolor nec dolor fermentum luctus. Suspendisse accumsan turpis et nibh faucibus fermentum. Nulla sit amet lorem eu mi tempus condimentum vitae et turpis. Aenean lobortis, sem porttitor euismod consectetur, mi leo eleifend velit, et sagittis tortor mauris lacinia nulla. Maecenas porttitor diam at justo tincidunt ut varius lacus sodales. Suspendisse nec diam nunc.</p>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis porttitor condimentum dolor nec porttitor. Fusce porttitor urna pharetra ante vehicula vel iaculis sem condimentum. Aliquam et sem lectus, ut semper neque. Vivamus justo magna, porta sed imperdiet in, vestibulum ut mi. Donec ultrices ullamcorper sem, eu mollis tellus vulputate non. Sed sagittis venenatis lacus fringilla varius. Etiam vestibulum dui et lorem egestas gravida. Cras cursus sodales mauris, sed suscipit tortor pharetra quis. Nulla facilisis varius commodo. Curabitur urna sem, vestibulum condimentum tincidunt eget, malesuada eu ipsum. Integer tristique, sapien sit amet sollicitudin volutpat, mauris velit sagittis urna, ut mollis purus urna quis dui. Donec neque arcu, auctor et blandit a, pretium sed leo. Ut ut elit enim. Sed eu lacus justo, nec sollicitudin erat. Nulla congue auctor nisl vel ultricies. Mauris ac luctus nisl. Phasellus sapien lectus, commodo ut interdum nec, sagittis vitae arcu. Praesent nibh eros, molestie ut condimentum eu, tristique vitae eros. </p>
</div>

    <div class="pagination">
        <div class='pages'>
            [<b>1</b>] 
        </div> 

        <div class='pages'>
            <a href='#' class='linksp'>2</a>
        </div>  

        <div class='pages'>
            <a href='#' class='linksp'>3</a>
        </div>  

        <div class='pages'>
            <a href='#' class='linksp'>4</a>
        </div> 

        <div class='pages'>
            <a href='#' class='linksp'>></a>
        </div>  

        <div class='pages'>
            <a href='#' class='linksp'>>></a>
        </div>        
    </div>
</div>
</body>
</html>

First I'd create a wrapper div that will have a fixed height of 940px this will contain all of the my news articles and pagination controls. Inside the wrapper div I want to display my articles, so by adding a div around the h2 and p tag this acts as a container for each article and make it easy for me to add margins between my articles if needs be.

I've also created a pagination div that will house all of the pagination controls, to make this stick to the bottom of the wrapper div I will apply these styles to it: position:absolute; bottom:0; left:0; no matter what the size of the wrapper div, this will always sit at the bottom of it.

This will work better than applying a fixed position to the pagination element, because position:fixed isn't recognised by all browsers.

Sorry if this isn't what you're looking for but I hope it helps in some way or another!

Danny

I hope I understand your question correctly, but if you contain the pagination in an element, say a div with id="pagination". You could set the position to fixed and set the top property to 940px. Like so:

#pagination {
  position: fixed;
  top: 940px;
}

This would ensure the distance to be the same on every page, but the element will hover over the rest of your content. This method might not work similarly across browsers, especially Internet Explorer 6 has many positioning bugs.