Navigator

Task: create a page navigator. Here is one:

1. Choose colors

Since the navigator is made for use in a particular site, the color is already known: #0aaafd. This color is used to indicate links. And we need it to create rounded squares-substrates (one to highlight the current page, the second to highlight with effect :hover). For the background of the current page, I use 80% color saturation, that is #3bbbfd. For the substrate that appears with the effect, :hoverI use 20% color saturation, that is #ceeeff.

2. Elements of the navigator

• Current Page Number
• The number of one of the previous-next pages
• Previous / Next Page
• First / last page

We take into account that the user must immediately understand what page is located on, that is, you need to somehow select it. I use as many as 3 ways of highlighting: white, bold, and contrasting, brighter than others, substrate.

3. We pass to imposition

HTML

First we need to create the html markup with which we will work. What is a navigator? A list with a specific numbering order. A numbered list ( ol) is suitable for this definition . Create markup:

1. 
2. 
3. 7
4. 8
5. 9
6. 10
7. 11
8. 
9. 

We assign the class to the list so that it is possible to manipulate this particular container and the elements inside it. The first and last 2 elements of the navigator (first page, previous page, next page, last page) I decided to make in the form of pictures, as they “replace” the content with themselves. Select the current page with strong (we just need bold).

Now we pass to the most interesting -

CSS

Let's take a closer look at our navigator:


The distance between the upper and lower horizontal stripes is 18 pixels.
The width of the translucent gray rectangle is 20 pixels.
The rest is visible thanks to a scale of 500%, kindly provided by Photoshop.

Rules for the tagol :

clear:both;
display:block;
width:181px;
margin:0 auto;


The first rule prohibits flow.
The second rule “says” that this container is a block element - since there will be block elements inside (you cannot put block elements inside lowercase elements).
We need the third rule to center the navigator. The fact is that without specifying the width, we will not be able to align this container in the center. The width value olfor our navigator is calculated by the formula:

[количество элементов списка ol] * ( [ширина контейнера li] + [отступ слева контейнера li] + [отступ справа контейнера li] )

That is 9 * ( 18 + 1 + 1 ), we get 180. However, 180 IE pixels are not enough, and the navigator floats:

Increase the width by 1 pixel, and everything returns to normal.

You can not bother, and choose the width approximately, but it is always more pleasant when there is order :)
Padding is not taken into account, I will explain why later.

Tag Rulesli:

list-style:none;
display:block;
float:left;
margin:0 1px;


The first rule prohibits the display of the serial number of a list item.
The second rule is needed, because inside will be a block element - a link.
The third rule is to ensure that the list items are not arranged vertically, but horizontally.
The fourth rule sets the left and right margins to 1 pixel. We need this, since the size of the background is 18px, and a small distance is needed so that the background of the current page does not “stick together” when hovering.

Rules for the taga :

display:block;
width:18px;
background:none;
text-align:center;
font:normal 14px/18px Arial, Helvetica, sans-serif;


The first rule is necessary for the second to work. That is, width does not work in inline elements.
The second rule is necessary, since we have a fixed width for the substrate. If you want an unfixed one, we use the sliding doors technique.
The third rule prohibits the use of a background (background) in the normal state of the link.

The fourth rule aligns the contents of the container horizontally in the center .
The fifth rule is a normal (not bold) font with a size of 14 pixels, vertical alignment of the text , and an indication of the font family used.

The rule for effecta:hover :

background:url("img/ps-bg.gif") no-repeat left bottom;


The rule "says" about using a background image. But everything is not as simple as it seems at first glance. If we simply create a picture for the effect :hoverwhen the page loads, the browser will not load it (since it does not appear when the page loads).
I also draw attention to the fact that in IE :hoverit only works with reference to links.
Going back to the substrates. Since we have 2 substrates (for the current page and on hover), I “glue” them into one picture (so that when you hover everything works immediately):


↑ this is ps-bg.gif, 18 pixels wide and (18 + 18) high. The bottom half is for the hover effect, the top half is for the current page.

So containers (list itemsli) 18x18 we are ready, you can fill them with content. It remains for us to issue 2 tags - strongand img. The design for the text links is ready.

Rules for the tagstrong :

display:block;
width:18px;
color:white;
background:url("img/ps-bg.gif") no-repeat left top;
text-align:center;
font:bold 14px/18px Arial, Helvetica, sans-serif;


Here, only the fourth rule is of interest - “cut out the upper part of ps-bg.gif and paste it with the background into the 18x18 container”.

Rules for the tagimg :

width:18px;


For pictures, one of the sides should be indicated explicitly (width, as a rule). The size of the second side, if not specified in CSS, is automatically calculated by the browser taking into account the proportions of the image.

All CSS:

.page-scroll {
clear:both;
display:block;
width:181px;
margin:0 auto;
}

.page-scroll li {
list-style:none;
display:block;
float:left;
margin:0 1px;
}

.page-scroll a {
display:block;
width:18px;
background:none;
text-align:center;
font:normal 14px/18px Arial, Helvetica, sans-serif;
}

.page-scroll a:hover {background:url("img/ps-bg.gif") no-repeat left bottom;}

.page-scroll strong {
display:block;
width:18px;
color:white;
background:url("img/ps-bg.gif") no-repeat left top;
text-align:center;
font:bold 14px/18px Arial, Helvetica, sans-serif;
}

.page-scroll img {width:18px;}


In general, everything is ready, but CSS can be slightly reduced:

.page-scroll {
clear:both;
display:block;
width:181px;
margin:0 auto;
}

.page-scroll li {
list-style:none;
display:block;
float:left;
margin:0 1px;
}

.page-scroll a {
background:none;
font:normal 14px/18px Arial, Helvetica, sans-serif;
}

.page-scroll a:hover {background:url("img/ps-bg.gif") no-repeat left bottom;}

.page-scroll strong {
color:white;
background:url("img/ps-bg.gif") no-repeat left top;
font:bold 14px/18px Arial, Helvetica, sans-serif;
}

.page-scroll strong, .page-scroll a, .page-scroll img {
display:block;
width:18px;
text-align:center;
}


Look at the working navigator