Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
Brother1
0 / 0 / 1
Регистрация: 23.01.2013
Сообщений: 11
1

Вставляю слайдер - футер съезжает

26.01.2013, 10:57. Просмотров 781. Ответов 2
Метки нет (Все метки)

А такой еще вопрос:
Почему когда я в блок вставляю вот этот слайдер
http://demo.webdeveloperplus.com/featured-content-slider/
то у меня у меня футер съезжает?
В принципе всегда, когда вставляю что-то подобное, то что-нибудь да съезжает
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
26.01.2013, 10:57
Ответы с готовыми решениями:

Почему когда вставляю h1 в div, он съезжает?
<!DOCTYPE html> <html> <head> <title>jquery</title> <meta...

Дизайн шаблона на дивах, съезжает футер
Не получается сделать футер наиже всех элементов на странице. Если контента...

Слайдер съезжает в разных браузерах
стоял флеш, делал в Macromedia Dreamweaver 8. работал прекрасно , но в...

Вставляю логотип, как ссылку - перекашивает сайт
Всем привет!!! Ребята хочу чтоб логотип на сайте был ссылкой, как это обычно...

Съезжает Страница
Я использую шаблон своего сайта как фон в программе Аdobe Dreamweaver Как...

2
Sergio Aguero
451 / 442 / 21
Регистрация: 11.04.2012
Сообщений: 2,074
26.01.2013, 15:58 2
я у вас футера не увидел)))) вам надо слайдер отцентрировать или че сделать-то???
0
Brother1
0 / 0 / 1
Регистрация: 23.01.2013
Сообщений: 11
26.01.2013, 18:01  [ТС] 3
Лучший ответ Сообщение было отмечено Brother1 как решение

Решение

Я хочу чтобы слайдер нормально отображался и ничего не съезжало
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
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
<html>
<head>
<title> Johnyboy.ru | Главная </title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
 
<script type="text/javascript">
 
/*** 
    Simple jQuery Slideshow Script
    Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc.  Please link out to me if you like it :)
***/
 
function slideSwitch() {
    var $active = $('#slideshow IMG.active');
 
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
 
    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
 
    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );
 
 
    $active.addClass('last-active');
 
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
 
$(function() {
    setInterval( "slideSwitch()", 5000 );
});
 
</script>
    </head>
 
<body>
<div id="body">
    <div id="header">
    <div id="menu">
        <ul class="menu">
        <li> <a href="#"> Главная </a></li>
        <li> <a href="#"> Новости </a></li>
        <li> <a href="#"> Об Артисте </a></li>
        <li> <a href="#"> Афиша </a></li>
        <li> <a href="#"> Клипы </a></li>
        <li> <a href="#"> Аудио </a></li>
        <li> <a href="#"> Контакты </a></li>
        </ul>
    </div>
    
    <div id="slide">
    <div id="slideshow">
    <img src="img/johny.jpg" alt="Slideshow Image 1" class="active" />
    <img src="img/johny2.jpg" alt="Slideshow Image 2" />
    <img src="img/johny3.jpg" alt="Slideshow Image 3" />
</div>
    </div>
    </div>
    
    <div id="wrapper">
    <div id="content_left">
    <div class="block_left">
    &nbsp;
    </div>
    <div class="block_left">
        [B]Сюда вставляю слайдер[/B]
    </div>
    </div>
    <div id="content_right">
    <div class="block_right">
    &nbsp;
    </div>
    </div>
    <div class="blockboth">
    &nbsp;
    </div>
    </div>
    
    <div id="footer">
    <hr>
    <p> Артем Мелегов &copy; 2013 </p>
    </div>
</div>
</body>
</html>

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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
body
{
background:url("img/back/dark_wall.png");
clear:both;
}
 
#body
{
width:1000px;
background:url("img/back/subtle_grunge.png");
margin:0 auto;
padding:10px;
-webkit-border-radius: 10px;
clear:both;
}
 
#header
{
width:1000px;
height:400px;
margin-bottom:10px;
clear:both;
}
#menu 
{
width:100%;
height:45px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#669999), color-stop(100%,#336666));
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
margin:0;
padding:0;
}
.menu 
{
list-style:none;
margin:0;
padding:0;
}
.menu li
{
padding:10px;
padding-left:3px;
display:block;
float:left;
}
.menu li a
{
font-size:17px;
padding:10px;
color:white;
font-family: Comic Sans MS, cursive;
font-weight:bold;
text-transform: uppercase;
text-decoration:none;
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);
}
.menu li a:hover
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#A7CCCC), color-stop(100%,#336666));
}
 
#slide
{
width:100%;
height:351px;
background:gray;
margin:0;
padding:0;
}
#slideshow {
    position:relative;
    height:240px;
}
 
#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}
 
#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}
 
#slideshow IMG.last-active {
    z-index:9;
}
 
#wrapper
{
width:1000px;
clear:both;
}
#content_left
{
float:left;
width:660px;
}
#content_right
{
float:right;
width:320px;
}
.block_left
{
float:left;
width:auto;
height:auto;
}
.block_right
{
float:right;
width:auto;
height:auto;
}
.blockboth
{clear:both;width:0;height:0;}
.info_block
{
width:200px;
height:330px;
background:url("img/back/light_toast.png");
margin-right:10px;
float:left;
border:5px solid #ececec;
}
.info_block:hover
{
border:5px solid #81B3B3;
background:rgba(255, 255, 255, 0.5)
}
.info_block h3
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#669999), color-stop(100%,#336666));
color:white;
margin:0;
text-align:center;
font-family: Comic Sans MS, cursive;
padding:5px;
}
.info_block ul
{
list-style:none;
padding-left:0;
}
.info_block li
{
font-size:12px;
color:white;
margin:0;
text-align:justify;
font-family: Comic Sans MS, cursive;
padding:10px;
padding-top:1px;
}
.info_block a
{
color:black;
}
.info_block a:hover
{
text-decoration:none;
}
.info_block_meta
{
color:gray;
font-size:9px;
padding:0;
margin:0;
margin-top:5px;
}
.info_box
{
width:310px;
height:Auto;
border:5px solid #ececec;
background:url("img/back/light_toast.png");
margin-bottom:10px;
}
.info_box:hover
{
border:5px solid #81B3B3;
background:rgba(255, 255, 255, 0.6)
}
.info_box h3
{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#669999), color-stop(100%,#336666));
color:white;
margin:0;
text-align:center;
font-family: Comic Sans MS, cursive;
padding:5px;
}
.info_box p
{
color:black;
margin:0;
font-size:11px;
font-family: Comic Sans MS, cursive;
padding:5px;
}
 
 
#footer
{
width:1000px;
margin-top:25px;
clear:both;
}
#footer p
{
font-size:11px;
font-family: Comic Sans MS, cursive;
}
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.01.2013, 18:01

Съезжает меню
Здравствуйте. На сайте с ай-пи 37точка143точка10точка133 при масштабировании...

Съезжает картинка
Подскажите почему в OUR PORTFOLIO съезжает картинка в IE и Opera, а в Mozilla...

Съезжает Верстка
Доброго времени суток. Я начинающий вебкодер и возникла следующая проблема....


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

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

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