More Items
The links to "More Items" is at the bottom of the page, when there are more articles for the front page than is shown. The example website is showing 3 articles (1 leading article and 2 intro articles). There are 5 articles for the front page. The 2 articles that are not directly visible are shown as links.
Print screen without any additonal CSS
Structure with classes and id's
div.items-more h3 ol li a li a etc.
CSS
/* -------------------------
More items
-------------------------- */
div.items-more {
clear: both;
text-align: center;
}
div.items-more ol {
list-style: none;
padding: 0;
margin: 10px 0 0 0;;
}
div.items-more ol li {
list-style: none;
padding: 0;
display: inline-block;
white-space:nowrap;
margin: 0 10px 15px 0;
}
div.items-more ol li a {
padding: 3px 10px 4px 10px;
color: #555;
font-style: italic;
background-color: #e5e5e5;
border: 1px #888 solid;
text-decoration: none;
}
div.items-more ol li a:hover {
padding: 3px 10px 4px 10px;
color: #000;
font-style: italic;
background-color: #ccc;
border: 1px #777 solid;
text-decoration: none;
}
Print screen after applying CSS
