<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

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

Подписавшись по 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

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