<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

В рамках курса даётся большое количество практических заданий, благодаря которым Вы не просто посмотрите курс, а действительно выполните ряд важнейших шагов, о которых в нём говорится.

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Форум сайта MyRusakov.ru

сдвигается параллелограмм
01.09.2013 15:35:54 сдвигается параллелограмм Сообщение #1
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Здравствуйте!
Столкнулся с такой проблемой. Создал контейнер родитель, задал ему относительное позиционирование. В этом контейнере создал параллелограмм и задал ему абсолютное позиционирование относительно контейнера родителя. И возникает проблема - когда я через firebug увеличиваю высоту параллелограмма, то он почему-то начинает выезжать из контейнера родителя?
Может кто подскажет как увеличивать высоту параллелограмма, чтобы он не "выезжал" за контейнер?

<html>
<head>
<style type="text/css">
#wrapper {
position: relative;
border: 3px solid #080;
width: 500px;
padding-top: 50px;
}

#parallelogram {
position: absolute;
top: 0;
right: 0px;
border: 3px solid #800;
font: 20px arial, sans-serif;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background-color: #ff8;
min-height: 20px;
}

span {
display: inline-block;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
}
</style>
</head>
<body>
<div id="wrapper">
<div id="parallelogram">
<span>ТЕКСТ</span>
</div>
</div>
</body>
</html>
Профиль
01.09.2013 17:38:12 сдвигается параллелограмм Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Вылезает, раз не умещается в контейнер. Можно поставить overflow на родительский контейнер, чтобы это ограничить.
Профиль
01.09.2013 19:41:43 сдвигается параллелограмм Сообщение #3
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

А как он может не умещаться?
Контейнер родитель width: 500px, а параллелограмм width: 140рх.
К слову, если вместо параллелограмма сделать обычный прямоугольник, а потом увеличивать ширину прямоугольника, то все нормально увеличивается и ничего не вылезает за контейнер родитель.
Профиль
03.09.2013 22:27:32 сдвигается параллелограмм Сообщение #4
qlipoth

qlipoth

Новичок

Новичок

Дата регистрации:
23.08.2013 23:00:10

Сообщений: 12

например так http://jsfiddle.net/cYj5a/
Профиль
05.09.2013 03:18:11 сдвигается параллелограмм Сообщение #5
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Посмотрел пример. только не понял. как вы решили ситуацию, по-моему как было так и осталось. только при увеличении высоты параллелограмма, часть параллелограмма что выходит за рамку контейнера-родителя не видна - угол параллелограмма обрезается, т.к. вы задали свойство overflow: hidden Или я ошибаюсь?
Профиль
05.09.2013 13:54:08 сдвигается параллелограмм Сообщение #6
qlipoth

qlipoth

Новичок

Новичок

Дата регистрации:
23.08.2013 23:00:10

Сообщений: 12

Насколько я понял у вас была проблема с тем что вы не могли увеличить высоту параллелограмма из за того что он выходил за границы родительского блока. Я отменил абсолютное позиционирование и сдвинул параллелограмм в нужную позицию при помощи margin предварительно увеличив его высоту.
Профиль
05.09.2013 23:05:58 сдвигается параллелограмм Сообщение #7
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Спасибо за попытку помочь!
Но здесь ситуация другая - нужно чтобы при наполнении параллелограмма текстом его высота увеличивалась (т.е. высота динамически меняется) и при этом чтобы параллелограмм не сдвигался.
Профиль
10.09.2013 21:51:47 сдвигается параллелограмм Сообщение #8
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Нашел такое решение проблемы - пишу, если кому-то пригодится. Чтобы параллелограмм мог динамически изменять высоту, и при этом не сдвигался в сторону, контейнер родитель этого параллелограмма, нужно сделать таким же параллелограммом.
Профиль
10.09.2013 22:11:12 сдвигается параллелограмм Сообщение #9
qlipoth

qlipoth

Новичок

Новичок

Дата регистрации:
23.08.2013 23:00:10

Сообщений: 12

т.е. wrapper тоже свернуть? а если нам не нужно чтобы родитель был параллелограммом?
Профиль
13.09.2013 04:09:06 сдвигается параллелограмм Сообщение #10
Дмитрий184

Дмитрий184

Мастер

Мастер

Дата регистрации:
29.06.2012 08:48:56

Сообщений: 225

Контейнер-родитель параллелограмма должен быть параллелограммом. И этот Контейнер-родитель параллелограмма вы можете поместить в другой контейнер, который не будет параллелограммом. Контейнер-родитель параллелограмма вы никак не выделяйте (ни фоновый цвет, ни рамки) тогда он будет совершенно не видим на странице. т.е. Контейнер-родитель параллелограмма находится на странице, но его не видит посетитель сайта. Виден только сам параллелограмм, т.к. ему задается рамка. И при увеличении высоты, параллелограмм всегда остается на одном месте.
Профиль