Не понимаю, почему не работает overflow

Iron_Snake · November 15, 2009

Доброго времени суток.

Есть задача -- сделать контейнер, который визуально прятался бы за одну из сторон родителя.

На данный момент, не получается сделать его уезжающим вправо.

На скриншоте: верхний блок -- уезжает за левый край экрана, нижний -- пытается уехать за правый.

HTML:

<body>

<div style="margin: 0px; overflow: hidden; position: static; width: 1009px;">
	<div class="horizontal_slide" style="margin: 0px 0px 0px -400px;"> 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
		eiusmod tempor incididunt ut labore et dolore magna aliqua. 
		Ut enim ad minim veniam, quis nostrud exercitation ullamco 
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
		irure dolor in reprehenderit in voluptate velit esse cillum 
		dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
		cupidatat non proident, sunt in culpa qui officia deserunt 
		mollit anim id est laborum. 
	</div>
</div>

<br /><br />

<div style="margin: 0px 0px 0px 400px; overflow: hidden; position: static; width: 1009px;">
	<div class="horizontal_slide" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px;"> 
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
		eiusmod tempor incididunt ut labore et dolore magna aliqua. 
		Ut enim ad minim veniam, quis nostrud exercitation ullamco 
		laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
		irure dolor in reprehenderit in voluptate velit esse cillum 
		dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
		cupidatat non proident, sunt in culpa qui officia deserunt 
		mollit anim id est laborum. 
	</div>
</div>

</body>

CSS

		.horizontal_slide {
			background:#D0C8C8 none repeat scroll 0 0;
			border:5px solid #F3F1F1;
			color:#8A7575;
			font-weight:bold;
			padding:10px;
		}

psywalker · November 15, 2009

какуюто хрень понаписал, покажи скрин того, что хочешь получить, с подробным объяснением

Iron_Snake · November 15, 2009

Ладно... Медленно и вдумчиво.

Вот тут есть пример того, что нужно. НО: их готовый слайдер убирается только вверх и влево. Мне же нужно, чтобы он убирался еще и вниз и вправо. Поковырял исходники, понял, как оно работает. С убиранием вниз я разобрался, а вот вправо -- не могу, потому что если при сдвиге влево ширина вложенного дива остается постоянной и он целиком уезжает за пределы родительского элемента, то при сдвиге вправо меняется именно ширина вложенного дива, а не его позиция, как хотелось бы. А жестко задавать ширину вложенного дива мне бы не хотелось, потому что это приведет к хоть и небольшому, но все-же усложнению скрипта, что не есть хорошо. Ну а в посте, открывающем тему, был показан один из кадров анимации со всеми заданными параметрами. Надеюсь, теперь все понятно?

Edited November 15, 2009 by Iron_Snake

psywalker · November 15, 2009

Iron_Snake said:
Ладно... Медленно и вдумчиво.
Вот тут есть пример того, что нужно. НО: их готовый слайдер убирается только вверх и влево. Мне же нужно, чтобы он убирался еще и вниз и вправо. Поковырял исходники, понял, как оно работает. С убиранием вниз я разобрался, а вот вправо -- не могу, потому что если при сдвиге влево ширина вложенного дива остается постоянной и он целиком уезжает за пределы родительского элемента, то при сдвиге вправо меняется именно ширина вложенного дива, а не его позиция, как хотелось бы. А жестко задавать ширину вложенного дива мне бы не хотелось, потому что это приведет к хоть и небольшому, но все-же усложнению скрипта, что не есть хорошо. Ну а в посте, открывающем тему, был показан один из кадров анимации со всеми заданными параметрами. Надеюсь, теперь все понятно?

ааа, ну это уже JS, значит не ко мне :rolleyes:

Sign In

Не понимаю, почему не работает overflow

Question

Iron_Snake

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Iron_Snake

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information