Модификация навигации

вопрос

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

а получаеся вот так

вот код CSS

Показать / Скрыть текст


/* Parinator */
.r-bg {
    position:relative;
    float:left;
}
.paginator{
    margin: -3px 0 10px 2px;
    background: url("../images/rarr_l.png") no-repeat scroll left 0 transparent;
    position:relative;
    height:36px;
}
    .paginator li{
        float: left;
        margin: 0px 0px 0px 0;
        background: url(../images/pagin-li.png) no-repeat right bottom;
    }
        .paginator li {
            display: block;
            font-size: 14px;            
            padding: 5px 13px 7px 9px;
            text-align: center;
            vertical-align: middle;
        }
        .paginator li a:hover, .paginator li:hover.larr , .paginator li:hover.rarr{
            text-decoration: none;
            background: url(../images/pagin-li-h.png) repeat-x 0 3px;            
        }
        .paginator li.act {
            padding: 5px 13px 7px 9px;
        }
        .paginator li.larr{
                background: url(../images/pagin-li.png) no-repeat right bottom;    
                padding:0 0px 0 1px;        
            }
        .paginator li.rarr {
             background: url("../images/rarr_r.png") no-repeat scroll right 0px transparent;
             margin:0 -20px 0 0;
             padding:0 13px 0 0;            
        }
          .paginator li.larr {
              width: auto;
              -webkit-border-radius:10px 0;
              -moz-border-radius:10px 0;
              border-radius:10px 0;
              padding: 8px 13px 4px 11px;
          }
          .paginator li.rarr {
              width: auto;
              -webkit-border-radius:4px 0;
              -moz-border-radius:5px 0;
              border-radius:5px 0;
              padding: 8px 11px 4px 10px;
          }

а вот сам файл navigation.tpl

Показать / Скрыть текст

 <div class="r-bg">   
    <ul class="paginator">
      [prev-link]<li class="larr"><img src="{THEME}/images/arrow-l.png" alt="" /></li>[/prev-link]
      <li class="navigation">{pages}</li>
     [next-link] <li class="rarr"><img src="{THEME}/images/arrow-r.png" alt="" /></li>[/next-link]
    </ul>  
  </div>

помогите пожалуйста а то я не знаю как сделать!

Ответил: ПафНутиЙ

Дело в том, что в DLE постраничная навигация имеет другую структуру html.

<span>1</span> <a href="http://dle-faq.ru/page/2/">2</a> <a href="http://dle-faq.ru/page/3/">3</a>

вот например структура тега { pages } на главной странице dle-faq.ru.
Соответственно при вашей структуре все ссылки на страницы получаются в "одной кнопке"
Погоняйте css под структуру DLE и сё будет хорошо.

Fancybox.bind("[data-highslide]", { groupAttr: 'data-highslide', idle:2000, Thumbs: false, caption: (fancybox, slide) => { if( slide.thumbEl && slide.thumbEl.alt ) { return slide.thumbEl.alt } } });

Модификация навигации

Ответил: ПафНутиЙ

Похожие вопросы

Модификация тега hr

как вывести текстовое окно поверх всех картинок

Скрыть ID но не сам блок

Не стабильно передвигается меню

Не выводятся комментарии и форма добавления

не работают подгруженные шрифты

Как ограничить параметр стиля?

Выпадающее меню в шаблоне, как срастить?

Как правильно прописать асоциативный массив + цикл в SCSS?

Как правильно сделать переключение категорий?