Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.80/10: Рейтинг темы: голосов - 10, средняя оценка - 4.80
1 / 1 / 0
Регистрация: 05.12.2012
Сообщений: 23
1

Переделать в резиновый слайдер

11.12.2012, 09:32. Просмотров 2049. Ответов 3
Метки нет (Все метки)

Всем доброго времени суток!
Не могу корректно адаптировать слайдер под шаблон, требуется для слайдера создать резину, т.к. при увеличении боковые колонки съезжают и шаблон смотрится некрасиво.

Код слайдера в шаблоне:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<head>
    <link rel="stylesheet" type="text/css" href="{THEME}/css/style.css" media="screen" />
    <style type="text/css">a#vlb{display:none}</style>
    <script type="text/javascript" src="{THEME}/js/jquery.js"></script>
</head>
<body>
<!--Slider начало-->
    <div id="wowslider-container1">
            <div class="ws_images">
                <a href="#"><img src="{THEME}/images/slide/images/1.jpg" alt="1" title="1" id="wows0"/></a>
                <a href="#"><img src="{THEME}/images/slide/images/2.jpg" alt="2" title="2" id="wows1"/></a>
                <a href="#"><img src="{THEME}/images/slide/images/3.jpg" alt="3" title="3" id="wows2"/></a>
                <a href="#"><img src="{THEME}/images/slide/images/4.jpg" alt="4" title="4" id="wows3"/></a>
                <a href="#"><img src="{THEME}/images/slide/images/5.jpg" alt="5" title="5" id="wows4"/></a>
            </div>
        <div class="ws_bullets"><div>
            <a href="#wows0" title="1"><img src="{THEME}/images/slide/tooltips/1.jpg" alt="1"/>1</a>
            <a href="#wows1" title="2"><img src="{THEME}/images/slide/tooltips/2.jpg" alt="2"/>2</a>
            <a href="#wows2" title="3"><img src="{THEME}/images/slide/tooltips/3.jpg" alt="3"/>3</a>
            <a href="#wows3" title="4"><img src="{THEME}/images/slide/tooltips/4.jpg" alt="4"/>4</a>
            <a href="#wows4" title="5"><img src="{THEME}/images/slide/tooltips/5.jpg" alt="5"/>5</a>
        </div></div>
 
    </div>
    <script type="text/javascript" src="{THEME}/js/script.js"></script>
<!--Slider конец-->
<body/>


Содержимое файла CSS:
Кликните здесь для просмотра всего текста
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
/* bottom center */
#wowslider-container1  .ws_bullets {
    bottom:0;
    left:50%;
}
#wowslider-container1  .ws_bullets div{
    left:-50%;
}
#wowslider-container1  .ws_bullets .ws_bulframe{
    bottom:29px;
}#wowslider-container1 { 
/*  overflow: hidden; */
    zoom: 1; 
    position: relative; 
    width:800px;
    height:363px;
    margin:0 auto;
    z-index:100;
    background-image: url("../images/bg.png");
}
* html #wowslider-container1{
    background-image: none;
}
#wowslider-container1 .ws_images{
    position: absolute;
    left:25px;
    top:25px;
    width:750px;
    height:313px;
    overflow:hidden;
}
#wowslider-container1 .ws_images a{
    color:transparent;
}
 
#wowslider-container1 .ws_images img{
    top:0;
    left:0;
    border:none 0;
}
#wowslider-container1 a{ 
    text-decoration: none; 
    outline: none; 
    border: none; 
}
 
#wowslider-container1  .ws_bullets { 
    font-size: 0px; 
    padding: 0px; 
    float: left;
    position:absolute;
    z-index:70;
}
#wowslider-container1  .ws_bullets div{
    position:relative;
    float:left;
}
#wowslider-container1 .ws_bullets a { 
    margin-left: 0; 
    width:20px;
    height:20px;
    background: url("../images/bullet.png") right top;
    float: left; 
    text-indent: -1000px; 
    position:relative;
}
* html #wowslider-container1 .ws_bullets a {
    background-image: url("../images/bullet.gif");
}
#wowslider-container1 .ws_bullets a.ws_selbull{
    background-position: left top;
}
#wowslider-container1 .ws_bullets a:hover{
    background-position: left top;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
    position:absolute;
    display:none;
    top:50%;
    margin-top:-37px;
    opacity:0.7;
    z-index:60;
    height: 75px;
    width: 60px;
    background-image: url("../images/arrows.png");
}
* html #wowslider-container1 a.ws_next, * html #wowslider-container1 a.ws_prev{
    background-image: url("../images/arrows.gif");
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
#wowslider-container1 a.ws_next{
    background-position: 100% 0; 
    right:25px;
}
#wowslider-container1 a.ws_prev {
    left:25px;
    background-position: 0 0; 
}
* html #wowslider-container1 a.ws_next,* html #wowslider-container1 a.ws_prev{display:block}
#wowslider-container1:hover a.ws_next, #wowslider-container1:hover a.ws_prev {display:block}
 
 
#wowslider-container1 .ws-title{
    position: absolute;
    bottom:55px;
    left: 25px;
    margin-right:30px;
    z-index: 50;
    padding:10px;
    color: #000000;
    background:#FFF;
    font-family: Tahoma,Arial,Helvetica;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 18px;
    text-align: left;
    text-shadow: 0 0 2px #FFFFFF;   
    -moz-border-radius:0 8px 8px 0;
    -webkit-border-radius:0 8px 8px 0;
    border-radius:0 8px 8px 0;
    font-size: 14px;
    opacity:0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 
}
#wowslider-container1 .ws-title div{
    padding-top:5px;
    font-size: 12px;
}#wowslider-container1 .ws_bullets  a img{
    text-indent:0;
    display:block;
    bottom:20px;
    left:-108px;
    visibility:hidden;
    position:absolute;
    -moz-box-shadow: 0 0 5px #d6d6d6;
    box-shadow: 0 0 5px #d6d6d6;
    border: 3px solid #d6d6d6;
}
#wowslider-container1 .ws_bullets a:hover img{
    visibility:visible;
}
 
#wowslider-container1 .ws_bulframe div div{
    height:90px;
    overflow:visible;
    position:relative;
}
#wowslider-container1 .ws_bulframe div {
    left:0;
    overflow:hidden;
    position:relative;
    width:215px;
}
#wowslider-container1  .ws_bullets .ws_bulframe{
    display:none;
    overflow:visible;
    position:absolute;
    cursor:pointer;
    -moz-box-shadow: 0 0 5px #d6d6d6;
    box-shadow: 0 0 5px #d6d6d6;
    border: 3px solid #d6d6d6;
}
#wowslider-container1 .ws_bulframe span{
    display:block;
    position:absolute;
    bottom:-7px;
    margin-left:-1px;
    left:108px;
    background:url("../images/triangle.png");
    width:15px;
    height:6px;
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.12.2012, 09:32
Ответы с готовыми решениями:

Сайт фиксированный, возможно ли его переделать на резиновый?
Подскажите, пожалуйста, если изначально сайт делаешь фиксированый, возможно ли его переделать на...

Переделать слайдер
Здравствуйте, прощу помощи по переделке слайдера. Проблема заключается в том, что хочется чтобы с...

Как переделать сайт с фиксированными размерами в сайт резиновый?
Хочу переделать сайт с фиксированными размерами в сайт резиновый. А именно меня интересует...

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?

3
20 / 5 / 0
Регистрация: 11.07.2011
Сообщений: 51
11.12.2012, 17:36 2
просто все размеры надо ставить в % пропорциональных странице, типа:
CSS
1
2
3
.class {
          width: 50%;
}
1
1 / 1 / 0
Регистрация: 05.12.2012
Сообщений: 23
12.12.2012, 07:43  [ТС] 3
Спасибо, но такое не прокатывает, съезжает слайдер вправо

В CSS прописал:

CSS
1
2
max-width:800px;
min-width:500px;
И все норм, шаблон не съезжает, а слайдер при увеличении аккуратно закатывается за правый сайдбар.

Можно еще так, такой же результат:

CSS
1
2
max-width:800px;
min-width:50%;
0
20 / 5 / 0
Регистрация: 11.07.2011
Сообщений: 51
12.12.2012, 18:33 4
Ну ход мысли у тебя верный.... осталось поплясать с бубном
Можно еще на маргинах все решить.... но тут фантазии нет конца... индийский код ник-то не отменял
ТОлько помни о IE6-8
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
12.12.2012, 18:33

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Резиновый слайдер
Нужно сделать слайдер как здесь http://luxeo.com.ua/, чтобы как бы не уменьшал браузер изображение...

Резиновый слайдер
Подскажите пожалуйста как сделать резиновый слайдер без плагинов. Такого типа как на картинке. ...

Резиновый слайдер ! Как растянуть ?
Всем привет. Есть слайдер, растягивается на всю ширину экрана. Нужно что-бы так же растягивался на...

переделать слайдер для dle
Добрый день.Я недавно прошел курс css html попова.и решил адаптировать wordpress сайт под дле.у...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.