Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подстройка слайдера под разрешение экрана / 9 сообщений из 9, страница 1 из 1
03.03.2014, 11:01
    #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:21
    #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:39
    #38576632
BIS-10-2
BIS-10-2
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подстройка слайдера под разрешение экрана
krvsa, имеете ввиду body?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.03.2014, 11:41
    #38576634
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подстройка слайдера под разрешение экрана
BIS-10-2имеете ввиду body?
Почем мне знать кто там у тебя является "материнским элементом"...
body будет таковым в последнюю очередь.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.03.2014, 11:45
    #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:46
    #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, 12:17
    #38576671
BIS-10-2
BIS-10-2
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подстройка слайдера под разрешение экрана
а может ли быть дело в javascript-е?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.03.2014, 14:11
    #38576855
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Подстройка слайдера под разрешение экрана
BIS-10-2а что именно нужно менять в материнском элементе?(у меня Body получается)
Да, у тебя body.

Ты в итоге куда тянуть его собрался? По ширине?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.03.2014, 14:14
    #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
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Подстройка слайдера под разрешение экрана / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 732ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1447349]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 404ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 40ms
get tp. blocked users:
 1ms
others: 244ms
total:  732ms
x
x
Закрыть


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