We're trying to wrap up the styling of the forums here. One of the major navigation mechanisms on the forums is the pagination. At the bottom of the page, you can move on to the next page or jump to a more distant page. It also serves to show the user how active and deep the forums are.

Our wireframes have a style mocked up for how pagination should look, and it's pretty simple and usable. Due to some weird structural things in the view, it's far easier to put the pagination within the main content module rather than outside and below it like in the wireframe.

Our first deviation from the wireframe is that we make the background of the pagination black instead of white. This is because there is so much sub navigation on the site that uses the "black bar" style. Pagination is definitely sub navigation, so might as well be consistent. The choices we make here though can also go the other direction (update other sub navigation to look more like this), which I suspect will happen since this is such a pure and simple example of sub nav.

We then, as usual, spend time fiddling with spacing and such. We use a lot of percentages to that things space out and shrink according to the screen width available. We position the next and previous links toward the edges. Then we use the triangle technique we learned to indicate which page is active, by adding a black triangle right above it pointing the content.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.