Попробовал сверстать слайдер с помощью css. Результат на данный момент:
http://exvion.ru/temp/slider.html
И сразу столкнулся с несколькими проблемами:
1. Как расположить надпись по центру слайдера при этом разместить под ней серый и белый индикаторы?
2. Как сделать отступы между слайдерами, padding вызывает перемещение слайдера вниз?
Код:
<style type="text/css">
html, body, div, span{
background:none repeat scroll 0 0 transparent;
border:0 none;
font-size:100%;
margin:0;
outline:0 none;
padding:0;
vertical-align:baseline;
}
.columns {
height:30px;
}
.columns>div {
float:left;
}
body {
overflow: hidden;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #727272;
font-size:11px;
}
#slider {
width:100%;
height:21px;
display:block;
}
.fill{
background: url("img/slider_fill.png") repeat-x scroll 0 0 transparent;
width:100%;
display:block;
float:left;
}
.gray {
background: url("img/gradient_gray_off.png") repeat-x scroll 0pt 0pt transparent;
position:relative;
width:60%;
margin-right:-50%;
height:21px;
float:left;
left:0;
margin-left:9px;
}
.white {
background: url("img/gradient_white_off.png") repeat-x scroll 0pt 0pt transparent;
height:18px;
position:relative;
width:50%;
margin-right:-50%;
float:left;
left:50%;
z-index:-1;
}
.phh{
margin:-5px 0;
padding:10px 0;
//background:#a67c56;
//background:rgba(166, 124, 86, 0.7);
position:relative;
left:0%;
margin-right:-100%;
text-align:center;
width:200%;
}
</style>
</head>
<body>
<div class="columns" style="">
<div style="width: 50%; padding: 0px 0px; margin: 0px;">
<div style="margin-right: 0px; padding: 1px 0px 0px; border: medium none; float: left; display: block; text-align: center; height: 21px; width: 100%; background: url("img/slider_fill.png") repeat-x scroll 0pt 0pt transparent;" class="fill" title="">
<div class="gray">
<div class="phh">Blend: 2.917</div>
</div>
<div class="white">
</div>
</div>
<img style="cursor: pointer; padding: 0px; margin: 0pt 0pt 0pt -100%; width: 10px; vertical-align: middle; float: left;" src="img/slider_left.png"/>
<img style="cursor: pointer; padding: 0px; margin: 0pt 0pt 0pt -9px; width: 9px; vertical-align: middle; float: left;" src="img/slider_right.png"/>
</div>
<div style="width: 50%; padding: 0px 0px; margin: 0px;">
</div>
</div>