вопрос
Здравствуйте!
Есть такой вот код навигации по страницам css:
Не получается привести его к стандартному виду навигации дле
Проблема в том, что фоновые картинки сделаны резиновыми и у меня не получается объеденить начало и конец картинки.
P.S. Вот сайт
Есть такой вот код навигации по страницам css:
Не получается привести его к стандартному виду навигации дле
Проблема в том, что фоновые картинки сделаны резиновыми и у меня не получается объеденить начало и конец картинки.
P.S. Вот сайт
Вариант номер один - использовать селекторы :before и :after:
Принцип, думаю, понятен. Изображения использованы ваши, так что просто разберитесь с классами.
Вариант номер два - использовать CSS3 border-radius и linear-gradient:
.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>
