Navigator

Task: create a page navigator. Here is this:

1. We select colors

Since the navigator is made for use in a particular site, we already know the color: #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 the effect :hover ). For the substrate of the current page, I use 80% color saturation, i.e. #3bbbfd . For the substrate appearing with the :hover effect :hover I use 20% color saturation, i.e. #ceeeff .

2. Navigator elements

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

We take into account that the user must immediately understand which page he is on, that is, it must somehow be highlighted. I use as many as 3 methods of selection: white, bold, and contrast, brighter than others, the substrate.
')

3. Go to the layout

HTML

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

1. 
2. 
3. 7
4. eight
5. 9
6. ten
7. eleven
8. 
9. 

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

Now we come to the most interesting -

CSS

Consider our navigator closer:


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

Rules for the ol tag :

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


The first rule prohibits wrapping.
The second rule "says" that this container is a block element - since there will be block elements inside (you cannot put block elements inside the lowercase ones).
The third rule we need to align the navigator in the center. The fact is that without specifying the width, we will not be able to align the container with the center. The width of ol for our navigator is calculated by the formula:

[ ol] * ( [ li] + [ li] + [ li] )

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

We 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 an order :)
Padding does not take into account, later I will explain why.

Rules for the li tag :

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


The first rule prohibits the display of the sequence number of a list item.
The second rule is necessary because inside there will be a block element - a link.
The third rule is to ensure that the elements of the list are located not vertically, but horizontally.
The fourth rule sets left and right indents to 1 pixel. We need this, since the size of the substrate is 18px, and a small distance is needed so that the substrates of the current page and “hover” do not “stick together”.

Rules for the a tag :

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 of the substrate. If you want unfixed, we use the technique of "sliding doors".
The third rule prohibits the use of the substrate (background) in the normal state of the link.

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

Rule for a:hover effect :

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 just create a picture for the :hover effect, when the page loads, the browser will not load it (since it is not displayed when the page loads).
Also note that in IE :hover only works for links.
Returning to the substrate. Since we have 2 substrates (for the current page and when hovering), I “glue” them into one picture (so that when hovering everything at once works):


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

So, containers (elements of the list li ) 18x18 are ready for us, you can fill them with contents. It remains for us to issue 2 tags - strong and img . Design for the text of the links we are ready.

Rules for the strong tag :

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 - “we cut out the upper part of ps-bg.gif and insert it into the 1818 container”.

Rules for the img tag :

width:18px;


For pictures, one of the sides must be clearly indicated (as a rule, width). The size of the second side, if not specified in CSS, is calculated automatically by the browser based on 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 the 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