ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подстройка слайдера под разрешение экрана
9 сообщений из 9, страница 1 из 1
Подстройка слайдера под разрешение экрана
    #38576598
BIS-10-2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
BIS-10-2
Гость
Привет всем! Помогите разобраться плз! В качестве фона сайта использую слайдер jquery. Когда открываешь сайт на экранах большого разрешения, размер слайдера не расширяется, хотя width и heigth стоят 100%. Объясните пожалуйста в чем дело!
Вот HTML-разметка слайдера
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
<ul id="my_slider">
      <li><img src="media/img/1.jpg" alt="" /><div><p>Galбpagos</p></div></li>  
      <li><img src="media/img/2.jpg" alt="" /><div><p>Hawai</p></div></li>  
      <li><img src="media/img/3.jpg" alt="" /><div><p>Sardinia</p></div></li> 
      <li><img src="media/img/11.jpg" alt="" /><div><p>Vaysheshika</p></div></li> 
      <li><img src="media/img/22.jpg" alt="" /><div><p>Saint Helena</p></div></li>  
      <li><img src="media/img/33.jpg" alt="" /><div><p>Rapa Nui</p></div></li>      
    </ul>


и его правила 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.
#my_slider {
    width:100%;
    height:100%;
    overflow: hidden;
    position:absolute;
    list-style: none outside none;
    padding:0;
    margin:0;
   
     
}
#my_slider li {
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;
}
#my_slider li:first-child {
    display:block;
    
}
#my_slider li div{-moz-border-radius: 10px;
               -webkit-border-radius: 10px;
               position: absolute;
               top: 580px;
               left: -35px;
               padding: 0;              
               background-color: black;
               width: 200px;
               opacity: 0.8;
               height: 60px;
               
               }
#my_slider li div p{color: white;
                font-size: 20px;
                font-family: 'Comic Sans MS', cursive;
                padding-left: 65px;
                }
...
Рейтинг: 0 / 0
03.03.2014, 11:01
| Ответить | Цитировать | Написать  
Подстройка слайдера под разрешение экрана
    #38576614
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
BIS-10-2размер слайдера не расширяется, хотя width и heigth стоят 100%. Объясните пожалуйста в чем дело!
При твоих настройках

BIS-10-2
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
#my_slider {
    width:100%;
    height:100%;
    overflow: hidden;
    position:absolute;
    list-style: none outside none;
    padding:0;
    margin:0;
}


Все упирается в размер материнского элемента...
...
Рейтинг: 0 / 0
03.03.2014, 11:21
| Ответить | Цитировать | Написать  
Подстройка слайдера под разрешение экрана
    #38576632
BIS-10-2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
BIS-10-2
Гость
krvsa, имеете ввиду body?
...
Рейтинг: 0 / 0
03.03.2014, 11:39
| Ответить | Цитировать | Написать  
Подстройка слайдера под разрешение экрана
    #38576634
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
BIS-10-2имеете ввиду body?
Почем мне знать кто там у тебя является "материнским элементом"...
body будет таковым в последнюю очередь.
...
Рейтинг: 0 / 0
03.03.2014, 11:41
| Ответить | Цитировать | Написать  
Подстройка слайдера под разрешение экрана
    #38576639
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
У меня вот все растягивается...

Код: html
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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}
#my_slider {
    width:100%;
    height:100%;
    overflow: hidden;
    position:absolute;
    list-style: none outside none;
    padding:0;
    margin:0;
	background-color: yellow;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ul id="my_slider">
	<li><div><p>Galбpagos</p></div></li>  
	<li><div><p>Hawai</p></div></li>  
	<li><div><p>Sardinia</p></div></li> 
	<li><div><p>Vaysheshika</p></div></li> 
	<li><div><p>Saint Helena</p></div></li>  
	<li><div><p>Rapa Nui</p></div></li>      
</ul>
</body>
</html>
...
Рейтинг: 0 / 0
03.03.2014, 11:45
| Ответить | Цитировать | Написать  
Подстройка слайдера под разрешение экрана
    #38576642
BIS-10-2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
BIS-10-2
Гость
krvsa, а что именно нужно менять в материнском элементе?(у меня Body получается)
Код: html
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.
<html>
    <head>
        <title>AlemTravel</title>
        <script type="text/javascript" src="media/js/jquery-1.8.2.min.js"></script>       
        <script type="text/javascript" src='media/js/main.js'></script> 
        <link rel="stylesheet" type="text/css" href="media/css/main.css" />
        <link href="http://fonts.googleapis.com/css?family=Cantarell" rel='stylesheet' type="text/css">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster">
    </head>
    <body>
         <ul id="my_slider">
      <li><img src="media/img/1.jpg" alt="" /><div><p>Gal&#225;pagos</p></div></li>  
      <li><img src="media/img/2.jpg" alt="" /><div><p>Hawai</p></div></li>  
      <li><img src="media/img/3.jpg" alt="" /><div><p>Sardinia</p></div></li> 
      <li><img src="media/img/11.jpg" alt="" /><div><p>Vaysheshika</p></div></li> 
      <li><img src="media/img/22.jpg" alt="" /><div><p>Saint Helena</p></div></li>  
      <li><img src="media/img/33.jpg" alt="" /><div><p>Rapa Nui</p></div></li>      
    </ul>
        <div id="header">
            <a href="/"><img src="media/img/AlemTravel_logo.png"/></a>
            <br/><span>Туристическая компания</span>
            <div><a href="/">Главная</a><a href="">О нас</a><a href="">Туры</a><a href="">Контакты</a></div>
            
        </div>
        
    </body>
</html>


у Body
Код: css
1.
body{background:#eee;margin:0;padding:0}
...
Рейтинг: 0 / 0
03.03.2014, 11:46
| Ответить | Цитировать | Написать  
Подстройка слайдера под разрешение экрана
    #38576671
BIS-10-2
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
BIS-10-2
Гость
а может ли быть дело в javascript-е?
...
Рейтинг: 0 / 0
03.03.2014, 12:17
| Ответить | Цитировать | Написать  
Подстройка слайдера под разрешение экрана
    #38576855
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
BIS-10-2а что именно нужно менять в материнском элементе?(у меня Body получается)
Да, у тебя body.

Ты в итоге куда тянуть его собрался? По ширине?
...
Рейтинг: 0 / 0
03.03.2014, 14:11
| Ответить | Цитировать | Написать  
Подстройка слайдера под разрешение экрана
    #38576859
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
BIS-10-2а может ли быть дело в javascript-е?
Это легко проверить!

Код: html
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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}
#my_slider {
    width:100%;
    height:100%;
    overflow: hidden;
    position:absolute;
    list-style: none outside none;
    padding:0;
    margin:0;
	background-color: yellow;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<ul id="my_slider">
	<li><img src="media/img/1.jpg" alt="" /><div><p>Gal&#225;pagos</p></div></li>  
	<li><img src="media/img/2.jpg" alt="" /><div><p>Hawai</p></div></li>  
	<li><img src="media/img/3.jpg" alt="" /><div><p>Sardinia</p></div></li> 
	<li><img src="media/img/11.jpg" alt="" /><div><p>Vaysheshika</p></div></li> 
	<li><img src="media/img/22.jpg" alt="" /><div><p>Saint Helena</p></div></li>  
	<li><img src="media/img/33.jpg" alt="" /><div><p>Rapa Nui</p></div></li>      
</ul>
<div id="header">
	<a href="/"><img src="media/img/AlemTravel_logo.png"/></a>
	<br/><span>Туристическая компания</span>
	<div><a href="/">Главная</a><a href="">О нас</a><a href="">Туры</a><a href="">Контакты</a></div>
</div>
</body>
</html>


Все еще тянется...
...
Рейтинг: 0 / 0
03.03.2014, 14:14
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подстройка слайдера под разрешение экрана
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38576598&tid=1447349]:
 0ms
get settings:
 8ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 53ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 55ms
get tp. blocked users:
 2ms
others: 203ms
total:  356ms
созд. / загр.: 356ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]