Si c'était moi et j'étais capable de, je réécrirais le html généré et les arrangeais dans une liste plutôt qu'utilisant de div; c'est juste plus sémantique de cette façon. J'ai heres un exemple de ce que je ferais basé sur une page de nouvelles.
Heres le 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>
D'abord, je créer un div wrapper qui aura une hauteur fixe de 940px cette contiendra tous les mes articles de presse et des contrôles de pagination. A l'intérieur de l'emballage div je veux afficher mes articles, donc en ajoutant un div autour de la balise h2 et p cela agit comme un conteneur pour chaque article et le rendre facile pour moi d'ajouter des marges entre mes articles si besoin est.
J'ai également créé un div de pagination qui abritera tous les contrôles de pagination, pour que ce soit collé au bas du div wrapper. J'appliquerai ces styles: position:absolute; bottom:0; left:0; quelle que soit la taille du div , cela restera toujours au fond de celui-ci.
Cela fonctionnera mieux que d'appliquer une position fixe à l'élément de pagination, car position:fixed n'est pas reconnu par tous les navigateurs.
Désolé si ce n'est pas ce que vous cherchez mais j'espère que cela aide d'une manière ou d'une autre!
Danny
Merci ... ceci m'a aidé à résoudre le problème. Une question: que faire pour que les liens de pagination commencent avec le plus à gauche 100 px de la marge de gauche? – John
Hey John Je suis content que cela vous ait aidé, si vous voulez déplacer toute la pagination sur 100px depuis la gauche puis ajouter à gauche: 100px à la div .pagination. Cela devrait aider! Danny – Danny