Вернуться к уроку

Постраничная навигация (CSS)

важность: 5

Оформите навигацию, центрированную внутри DIV'а:

Требования:

  • Левая стрелка – слева, правая – справа, список страниц – по центру.
  • Список страниц центрирован вертикально.
  • Текст сверху и снизу ни на что не наползает.
  • Курсор при наведении на стрелку или элемент списка становится стрелкой pointer.

P.S. Без использования таблиц.

Открыть песочницу для задачи.

HTML-структура:

<div class="nav">
  <img src="arrow-left.jpg" class="left" width="40" height="40">
  <img src="arrow-right.jpg" class="right" width="40" height="40">
  <ul class="pages">
    <li>...</li>
  </ul>
</div>

Стили:

.nav {
  height: 40px;
  width: 80%;
  margin: auto;
}

.nav .left {
  float: left;
  cursor: pointer;
}

.nav .right {
  float: right;
  cursor: pointer;
}

.nav .pages {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}

.nav .pages li {
  display: inline;
  margin: 0 3px;
  line-height: 40px;
  cursor: pointer;
}

Основные моменты:

  • Сначала идёт левая кнопка, затем правая, а лишь затем – текст. Почему так, а не лево – центр – право?

    Дело в том, что float смещает элемент вправо относительно обычного места. А какое обычное место будет у правого IMG без float?

    Оно будет под списком, так как список – блочный элемент, а IMG – инлайн-элемент. При добавлении float:right элемент IMG сдвинется вправо, оставшись под списком.

    Код в порядке лево-центр-право (неправильный):

    <div...>
      <img src="arrow-left.jpg" class="left" width="40" height="40">
      <ul class="pages"> (li) 1 2 3 4 5 6 7 8 9</ul>
      <img src="arrow-right.jpg" class="right" width="40" height="40">
    </div>

    Его демо:

    Правильный порядок: лево-право-центр, тогда float останется на верхней строке.

    Код, который даёт правильное отображение:

    <div ...>
      <img src="arrow-left.jpg" class="left" width="40" height="40">
      <img src="arrow-right.jpg" class="right" width="40" height="40">
      <ul class="pages"> .. список .. </ul>
    </div>

    Также можно расположить стрелки при помощи position: absolute. Тогда, чтобы текст при уменьшении размеров окна не налез на стрелки – нужно добавить в контейнер левый и правый padding:

    Выглядеть будет примерно так:

    <div style="position:relative; padding: 0 40px;">
      <img style="position:absolute;left:0" src="..left.." width="40" height="40">
      <ul> (li) 1 2 3 4 5 6 7 8 9 </ul>
      <img style="position:absolute;right:0" srr="..right.." width="40" height="40">
    </div>
  • Центрирование одной строки по вертикали осуществляется указанием line-height, равной высоте.

    Это красиво лишь для одной строки: если окно становится слишком узким, и строка вдруг разбивается на две – получается некрасиво, хотя и читаемо.

    Если хочется сделать красивее для двух строк, то можно использовать другой способ центрирования.

Открыть решение в песочнице.