Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Программирование. Ступени успешной карьеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Небольшая задачка по css:)
 
 автор: red_komrad   (05.03.2011 в 01:58)   письмо автору
5.2 Кб
 
 

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

<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>
</ul></div>    


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

http://radikal.ua/data/upload/05615/05615/aedf80a7ba.png

  Ответить  
 
 автор: DJ Paltus   (05.03.2011 в 14:45)   письмо автору
 
   для: red_komrad   (05.03.2011 в 01:58)
 

На примере элемента псевдокласса hover:

  <style>
  .pager{display:block; list-style:none; border-bottom:3px solid #777; float:left; width:100%}
  .pager li{float:left;font-size:18px; font-family:arial; display:block; color:#444}
  .pager li a{font-size:18px; font-family:arial;  padding:3px 10px; color:#444; text-decoration:none}
  .pager li a:hover{background:#eee; border-bottom:3px solid red; padding-bottom:0;}
  </style>

Особое внимание на строку ".pager li a:hover{background:#eee; border-bottom:3px solid red; padding-bottom:0;}" - паддинг убираем, на его место встает бордер.

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования