Правильное отображение навигации через CSS

вопрос

Здравствуйте!
Есть такой вот код навигации по страницам css:

Не получается привести его к стандартному виду навигации дле

Проблема в том, что фоновые картинки сделаны резиновыми и у меня не получается объеденить начало и конец картинки.

P.S. Вот сайт

Ответил: BR0kEN

Вариант номер один - использовать селекторы :before и :after:

.navigation a {
    position:relative;
    display:block;
    float:left;
    height:34px;
    line-height:34px;
    margin:0 10px;
    padding:0 5px;
    font-size:12px;
    font-family:Arial;
    text-align:center;
    text-decoration:none;
    color:#666;
    background:url(btn-show-all-left-bg.png) -6px 0 no-repeat;
}
.navigation a:before,
.navigation a:after {
    content:"";
    position:absolute;
    top:0;
    width:6px;
    height:34px;
    background:url(btn-show-all-left-bg.png) no-repeat;
}
.navigation a:before {
    left:-6px;
}
.navigation a:after {
    right:-6px;
    background:url(btn-show-all-right-bg.png) no-repeat;
}
/* hover & disabled */
.navigation a.disabled,
.navigation a:hover {
    background-position:-6px -34px;
}
.navigation a.disabled:before,
.navigation a.disabled:after,
.navigation a:hover:before,
.navigation a:hover:after {
    background-position:0 -34px;
}
/* active */
.navigation a.active,
.navigation a:active {
    color:#fff;
    background-position:-6px -68px;
}
.navigation a.active:before,
.navigation a.active:after,
.navigation a:active:before,
.navigation a:active:after {
    background-position:0 -68px;
}

<div class="navigation">
    <a href="#">Назад</a>
    <a href="#">1</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#" class="disabled">...</a>
    <a href="#">10</a>
    <a href="#">Вперед</a>
</div>

Принцип, думаю, понятен. Изображения использованы ваши, так что просто разберитесь с классами.

Вариант номер два - использовать CSS3 border-radius и linear-gradient:

.pagination a {
    float:left;
    background:#000;
    height:34px;
    line-height:34px;
    margin:0 4px;
    padding:0 10px;
    font-size:12px;
    font-family:Arial;
    text-align:center;
    text-decoration:none;
    color:#666;
    border-width:1px;
    border-style:solid;
    border-color:#ddd #ddd #aaa #ddd;
    background:#fdfdfd;
    background:-moz-linear-gradient(top,#fdfdfd 0%, #fdfdfd 58%, #f5f5f5 68%, #f5f5f5 74%, #f1f1f1 77%, #f1f1f1 84%, #eeeeee 87%, #eeeeee 94%, #eaeaea 97%, #eaeaea 100%);
    background:-webkit-gradient(linear,left top,left bottom, color-stop(0%,#fdfdfd), color-stop(58%,#fdfdfd), color-stop(68%,#f5f5f5), color-stop(74%,#f5f5f5), color-stop(77%,#f1f1f1), color-stop(84%,#f1f1f1), color-stop(87%,#eeeeee), color-stop(94%,#eeeeee), color-stop(97%,#eaeaea), color-stop(100%,#eaeaea));
    background:-webkit-linear-gradient(top,#fdfdfd 0%,#fdfdfd 58%,#f5f5f5 68%,#f5f5f5 74%,#f1f1f1 77%,#f1f1f1 84%,#eeeeee 87%,#eeeeee 94%,#eaeaea 97%,#eaeaea 100%);
    background:-o-linear-gradient(top,#fdfdfd 0%,#fdfdfd 58%,#f5f5f5 68%,#f5f5f5 74%,#f1f1f1 77%,#f1f1f1 84%,#eeeeee 87%,#eeeeee 94%,#eaeaea 97%,#eaeaea 100%);
    background:-ms-linear-gradient(top,#fdfdfd 0%,#fdfdfd 58%,#f5f5f5 68%,#f5f5f5 74%,#f1f1f1 77%,#f1f1f1 84%,#eeeeee 87%,#eeeeee 94%,#eaeaea 97%,#eaeaea 100%);
    background:linear-gradient(to bottom,#fdfdfd 0%,#fdfdfd 58%,#f5f5f5 68%,#f5f5f5 74%,#f1f1f1 77%,#f1f1f1 84%,#eeeeee 87%,#eeeeee 94%,#eaeaea 97%,#eaeaea 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#eaeaea',GradientType=0 );
    -webkit-border-radius:4px;
    border-radius:4px;
}
.pagination a.disabled,
.pagination a:hover {
    background:#efefef;
    background:-moz-linear-gradient(top,#efefef 0%, #efefef 58%, #ebebeb 61%, #ebebeb 65%, #e8e8e8 68%, #e8e8e8 74%, #e4e4e4 77%, #e4e4e4 84%, #e0e0e0 87%, #e0e0e0 94%, #dcdcdc 97%, #dcdcdc 100%);
    background:-webkit-gradient(linear,left top, left bottom, color-stop(0%,#efefef), color-stop(58%,#efefef), color-stop(61%,#ebebeb), color-stop(65%,#ebebeb), color-stop(68%,#e8e8e8), color-stop(74%,#e8e8e8), color-stop(77%,#e4e4e4), color-stop(84%,#e4e4e4), color-stop(87%,#e0e0e0), color-stop(94%,#e0e0e0), color-stop(97%,#dcdcdc), color-stop(100%,#dcdcdc));
    background:-webkit-linear-gradient(top,#efefef 0%,#efefef 58%,#ebebeb 61%,#ebebeb 65%,#e8e8e8 68%,#e8e8e8 74%,#e4e4e4 77%,#e4e4e4 84%,#e0e0e0 87%,#e0e0e0 94%,#dcdcdc 97%,#dcdcdc 100%);
    background:-o-linear-gradient(top,#efefef 0%,#efefef 58%,#ebebeb 61%,#ebebeb 65%,#e8e8e8 68%,#e8e8e8 74%,#e4e4e4 77%,#e4e4e4 84%,#e0e0e0 87%,#e0e0e0 94%,#dcdcdc 97%,#dcdcdc 100%);
    background:-ms-linear-gradient(top,#efefef 0%,#efefef 58%,#ebebeb 61%,#ebebeb 65%,#e8e8e8 68%,#e8e8e8 74%,#e4e4e4 77%,#e4e4e4 84%,#e0e0e0 87%,#e0e0e0 94%,#dcdcdc 97%,#dcdcdc 100%);
    background:linear-gradient(to bottom,#efefef 0%,#efefef 58%,#ebebeb 61%,#ebebeb 65%,#e8e8e8 68%,#e8e8e8 74%,#e4e4e4 77%,#e4e4e4 84%,#e0e0e0 87%,#e0e0e0 94%,#dcdcdc 97%,#dcdcdc 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#dcdcdc',GradientType=0 );
    border-color:#d0d0d0 #d0d0d0 #a0a0a0 #d0d0d0;
}
.pagination a.active,
.pagination a:active {
    color:#fff;
    background:#da0400;
    background:-moz-linear-gradient(top,#da0400 0%,#c80200 45%, #ca0200 48%, #b70000 52%, #b70000 100%);
    background:-webkit-gradient(linear,left top, left bottom, color-stop(0%,#da0400), color-stop(45%,#c80200), color-stop(48%,#ca0200), color-stop(52%,#b70000), color-stop(100%,#b70000));
    background:-webkit-linear-gradient(top,#da0400 0%,#c80200 45%,#ca0200 48%,#b70000 52%,#b70000 100%);
    background:-o-linear-gradient(top,#da0400 0%,#c80200 45%,#ca0200 48%,#b70000 52%,#b70000 100%);
    background:-ms-linear-gradient(top,#da0400 0%,#c80200 45%,#ca0200 48%,#b70000 52%,#b70000 100%);
    background:linear-gradient(to bottom,#da0400 0%,#c80200 45%,#ca0200 48%,#b70000 52%,#b70000 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#da0400', endColorstr='#b70000',GradientType=0 );
    border-color:#ba0b00 #ba0b00 #5e0000 #ba0b00;
}

<div class="pagination">
    <a href="#">Назад</a>
    <a href="#">1</a>
    <a href="#" class="active">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#" class="disabled">...</a>
    <a href="#">10</a>
    <a href="#">Вперед</a>
</div>

[not-available=userinfo] <div class="nav-load" id="nav-load">[next-link]Загрузить еще[/next-link]</div> <nav class="navigation"[available=lastcomments] style="padding: 4% 8%;"[/available]> <div class="page_next-prev"> <span class="page_prev" title="Предыдущая страница"> [prev-link]<svg class="icon icon-left"><use xlink:href="#icon-left"></use></svg>[/prev-link] </span> <span class="page_next" title="Следующая страница"> [next-link]<svg class="icon icon-right"><use xlink:href="#icon-right"></use></svg>[/next-link] </span> </div> <ul class="pagination"> {pages} </ul> </nav> <script type="text/javascript"> $(document).ready(function(){ $('body').on('click','#nav-load a',function(){ var urlNext = $(this).attr('href'); var scrollNext = $(this).offset().top - 200; if (urlNext !== undefined) { $.ajax({ url: urlNext, beforeSend: function() { ShowLoading(''); }, success: function(data) { $('.navigation').remove(); $('#nav-load').remove(); $('#dle-content').append($('#dle-content', data).html()); $('#dle-content').after($('#bottom-nav')); window.history.pushState("", "", urlNext); $('html, body').animate({scrollTop:scrollNext}, 800); HideLoading(''); }, error: function() { HideLoading(''); alert('что-то пошло не так'); } }); }; return false; }); }); </script> [/not-available]

Правильное отображение навигации через CSS

Ответил: BR0kEN

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

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

Разные картинки на главной и остальных страницах DLE

Что надо добавить в код, чтобы было меню 3-го уровня

Отступ снизу в css

Выравнивание картинки в shortstory.tpl

Выдвигающиеся меню

Переключатель страниц новостей

Подчеркивание ссылок в верхнем меню

Модуль комментариев

Как настроить стандартный рейтинг DLE 10.4?