Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Стили (CSS) » Правильное отображение навигации через CSS

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

     07.12.2012    навигация по страницам, навигация, css    Все вопросы » Стили (CSS)    2952

вопрос
Здравствуйте!
Есть такой вот код навигации по страницам 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>
Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

 20.08.2011 anton9408  Стили (CSS)
 31.08.2011 SlimYalta  Стили (CSS)
 12.11.2011 snpwild  Стили (CSS)
 24.02.2012 SlimYalta  Стили (CSS)
 04.03.2012 SlimYalta  Шаблоны (TPL), Стили (CSS)
 18.07.2013 Gal262  Шаблоны (TPL), Стили (CSS)
 09.08.2013 wolfi95  Общие вопросы, Стили (CSS), Ламерские вопросы
 03.11.2013 dim  Общие вопросы по вёрстке, Стили (CSS)
 26.09.2014 daiml  Стили (CSS), Модули
 14.03.2015 shevke  Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS)
  • lutskboy | Как в description вставить значение доп. ... 1
    Фото lutskboy
    lutskboy
    Как в description вставить значение доп.поля?
    Вчера, 21:51
    https://sandev.pro/web/159-fullstory-metatags-by-sander.html
  • derebas | Как реализовать кнопку "Поделиться" как ... 1
    Фото derebas
    derebas
    Как реализовать кнопку "Поделиться" как на Плей Маркете?
    Вчера, 09:39
    Ну если на скорую руку то примерно так
    <style>
.sociallinks {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.sociallinks-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.social-container {
    display: flex;
    align-items: center;
}
.social-container > div {
    margin-left: 10px;
}

h2, p {
    margin: 5px 0;
}
.social {
  padding-top: 20px;
}
.social img {
  margin: 10px;
}
.sharebtn {
  padding-top: 20px;
  width: 100%;
}
.sharebtn_area {
  border: 1px solid black;
  height: 40px;
}
.sharebtn input[type="text"] {
  width: 70%;
  border: none;
  height: 95%;
}
.sharebtn button {
  width: 25%;
  height: 95%;
  border: none;
  background-color: #fff;
}
</style>
<button id="opensociallinksBtn">Поделиться</button>

<div id="mysociallinks" class="sociallinks">
  <div class="sociallinks-content">
    <span class="close">×</span>
    <div class="social-container">
        <img src="{image-1}" alt="Icon" width="30" height="30">
        <div>
            <h2>{title}</h2> 
            <p>Поделиться</p> 
        </div>
    </div>
    <div class="social">
        <a href="https://api.whatsapp.com/send/?text={full-link}"><img src="whatsapp.png" alt="WhatsApp" width="30" height="30"></a>
        <a href="https://www.facebook.com/sharer/sharer.php?u={full-link}"><img src="facebook.png" alt="Facebook" width="30" height="30"></a>
        <a href="https://twitter.com/intent/post?url={full-link}"><img src="twitter.png" alt="Twitter" width="30" height="30"></a>
        <a href="https://www.instagram.com/share?url={full-link}"><img src="instagram.png" alt="Instagram" width="30" height="30"></a>
    </div>
    <div class="sharebtn">
      <div class="sharebtn_area">
        <input type="text" id="inputText" value="{full-link}" readonly="true">
        <button id="copyBtn">Поделиться <img src="share.png" width="10px" alt="Share Icon"></button>
      </div>
    </div>
  </div>
</div>

<script>
var sociallinks = document.getElementById("mysociallinks");
var opensociallinksBtn = document.getElementById("opensociallinksBtn");
var closeBtn = document.getElementsByClassName("close")[0];
var copyBtn = document.getElementById("copyBtn");
var inputText = document.getElementById("inputText");

opensociallinksBtn.onclick = function() {
  sociallinks.style.display = "block";
}

closeBtn.onclick = function() {
  sociallinks.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == sociallinks) {
    sociallinks.style.display = "none";
  }
}

copyBtn.onclick = function() {
  inputText.select();
  document.execCommand("copy");
}
</script>
  • doktorpull | GeoIP - показ информации в зависимости о ... 1
    Фото doktorpull
    doktorpull
    GeoIP - показ информации в зависимости от страны посетителя сайта
    17-04-2024, 21:53
    Отличный модуль, хорошо работает. Рекомендую этого автора, так как заказывал у него несколько собственных разработок. Человек знает свое дело.
  • Gordi | Telegram Sender 12
    Фото Gordi
    Gordi
    Telegram Sender
    16-04-2024, 15:47
    купил. Модуль классный! Автору большая признательность!
  • TeraMoune | Как вывести тайтл и дискрипшен по маске ... 1
    Фото TeraMoune
    TeraMoune
    Как вывести тайтл и дискрипшен по маске в категориях?
    14-04-2024, 00:36
    Ну например вот так: https://lazydev.pro/product/12-dle-seo.html
  • zawibis | Как настроить редирект на внешние сайты? 1
    Фото zawibis
    zawibis
    Как настроить редирект на внешние сайты?
    13-04-2024, 14:53
    Нашёлся ответ.
    Нужно в настройках группы отключить параметр

    Автоматическая замена ссылок [url] в тег [leech]
    При включении данной опции все ссылки, которые пользователь публикует в теге [url], будут автоматически заменены на защищенные ссылки тега [leech]
  • TeraMoune | Как решить проблему с /xfsearch/значение ... 5
    Фото TeraMoune
    TeraMoune
    Как решить проблему с /xfsearch/значение?
    12-04-2024, 11:53
    Это не прикол, просто dle позволяет искать новости как по значению так и с указанием конкретного поля для этого значения. И если у вас стоят метрики на сайте то достаточно любому человеку открыть ссылку и убрать в ней что-то, если сайт при новом url вернёт статус 200 то метрики захотят этот url запомнить.
  • komosa | Как решить проблему с /xfsearch/значение ... 5
    Фото komosa
    komosa
    Как решить проблему с /xfsearch/значение?
    11-04-2024, 22:34
    А вот прикол то в том, что это коснулось только author
  • lutskboy | Как решить проблему с /xfsearch/значение ... 5
    Фото lutskboy
    lutskboy
    Как решить проблему с /xfsearch/значение?
    11-04-2024, 22:31
    может быть не один только author. и другие поля. как знать куда перенаправлять
  • komosa | Как решить проблему с /xfsearch/значение ... 5
    Фото komosa
    komosa
    Как решить проблему с /xfsearch/значение?
    11-04-2024, 22:25
    Проблема заключается не в регистре, а в названии /author/ пропадает, и получается так, что ссылки дублируются. Как сделать редирект с дубля /xfsearch/Имя Фамилия на правильный адрес /xfsearch/author/имя фамилия ?
наверх