Я борюсь с изображением внутри ссылки. Я не знаю, как сделать первую ссылку (с изображением) такой же, как и в других ссылках в папках. Я также не знаю, как их выровнять?
.content .pagination a {
text-decoration: none;
color: #717171;
border: 1px solid #c0c0c0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 3px 8px;
margin: 0 1px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background-image: -webkit-linear-gradient(top, #fff, #ededed);
background-image: -moz-linear-gradient(top, #fff, #ededed);
background-image: -ms-linear-gradient(top, #fff, #ededed);
background-image: -o-linear-gradient(top, #fff, #ededed);
background-image: linear-gradient(top, #fff, #ededed);
}
.content .pagination a.prev {
padding: 11px;
position: relative;
vertical-align: middle;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAICAYAAADaxo44AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAB4SURBVHjaYvj//z8DDBcWFqYBcTuIzQgiQKCoqCgNSM1kgAArsASyYEhICIMVEDB/+vTJDMjfiCSYBWSuZ7KxsdGFamd49OjRMiA1HcQGGWV5DAjWrFkDk0/v6+ubBbM8Eyg3DUnSnAHJuSDJ/1u2bAEy/5sBBBgAv6VOHKw5pxYAAAAASUVORK5CYII=) 8px 7px no-repeat;
border: 1px solid #d9d9d9;
line-height: 0;
font-size: 0;
color: transparent;
}
Код HTML:
<div class="pagination">
<a href="#" class="prev">‹</a>
<a href="#" class="active">1</a></div>
Вы об этом говорите? :
<a href="#" class="prev"><img src="path"></a>
<a href="#" class="active"><img src="path"></a>
</div>
Может быть, проще всего использовать символ Unicode
CSS
.pagination a {
text-decoration: none;
color: #717171;
border: 1px solid #c0c0c0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 18px;
padding: 3px 8px;
margin: 0 1px;
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background-image: -webkit-linear-gradient(top, #fff, #ededed);
background-image: -moz-linear-gradient(top, #fff, #ededed);
background-image: -ms-linear-gradient(top, #fff, #ededed);
background-image: -o-linear-gradient(top, #fff, #ededed);
background-image: linear-gradient(top, #fff, #ededed);
}
.pagination a.prev:before {
content: "\03c";
}
Если вас интересует эта техника, shapecatcher может быть ценным ресурсом