Редактирование стилей пейджера

red_komrad · March 5, 2011

Столкнулся с одной проблемой, и никак не могу ничего с ней сделать. Суть:

<div class="item-list">
<ul class="pager">
<li class="pager-numbers first">Page 2 of 3</li>
<li class="pager-previous"><a href="/node" title="Go to previou[img][/img]s page" class="active">‹ previous</a></li>
<li class="pager-item"><a href="/node" title="Go to page 1" class="active">1</a></li>
<li class="pager-current">2</li>
<li class="pager-item"><a href="/node?page=2" title="Go to page 3" class="active">3</a></li>
<li class="last"><a href="/node?page=2" class="active">Next ››</a></li>
</ul></div>

никак не могу сделать подчеркивание активного элемента так, как это показано на прилагающейся картинке, все время нижняя граница активного элемента оказывается ниже границы всего пейджера

Vlad · March 5, 2011

Мне кажется, надо каждому пункту меню сделать подчеркивание снизу и сдвинуть их через margin или top вниз на линию, которая добавлена к item-list. Для неактивных пунктов подчеркивание прозрачное должно быть.

red_komrad · March 5, 2011

А в чем отличие от создания нижней границы?

Vlad · March 5, 2011

Тем, что вы ловко накладываете одну линию поверх другой.

red_komrad · March 5, 2011

а с помощью чего создавать подчеркивание?

swetlana · March 5, 2011

http://htmlbook.ru/css/border-bottom

red_komrad · March 5, 2011

бордер я делал, в этом-то и суть проблемы - при его задании он оказывается ниже бордера пейджера

swetlana · March 5, 2011

если всё делать правильно, то всё будет на месте.

Vlad · March 5, 2011

Примерно так должно быть. К сожалению, overflow применять нельзя, пришлось добавить ещё один элемент для отмены обтекания. Вы можете не float использовать, а display: inline-block либо через :after обтекание убрать. В общем, вариантов много, основа для экспериментов есть.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pager</title>
<style type="text/css">
.pager { 
  margin: 0; padding: 0;
}
.item-list {
  border-bottom: 5px solid #f0f0f0;
}
li { 
  list-style: none;
  float: left;
  padding: 5px;
  border-bottom: 5px solid transparent;

  margin-bottom: -5px;
  /* или 
  position: relative;
  top: 5px;
  */
}
.pager-current {
  border-bottom: 5px solid #333;
}
</style>
</head>
<body>
<div class="item-list">
<ul class="pager">
<li class="pager-numbers first">Page 2 of 3</li>
<li class="pager-previous"><a href="/node" title="Go to previous page" class="active">‹ previous</a></li>
<li class="pager-item"><a href="/node" title="Go to page 1" class="active">1</a></li>
<li class="pager-current">2</li>
<li class="pager-item"><a href="/node?page=2" title="Go to page 3" class="active">3</a></li>
<li class="last"><a href="/node?page=2" class="active">Next ››</a></li>
<div style="clear: left"></div>
</ul>
</div>
</body>
</html>

Sign In

Редактирование стилей пейджера

Question

red_komrad

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

red_komrad

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

red_komrad

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

red_komrad

Link to comment

Share on other sites

swetlana

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information