Jump to content
  • 0

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


Iron_Snake
 Share

Question

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

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

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

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

screenshot-1210038.jpg

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;
}

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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

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

Edited by Iron_Snake
Link to comment
Share on other sites

  • 0
  Iron_Snake said:
Ладно... Медленно и вдумчиво.

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy