afagorn

Ширина задается с помощью строчек(.row) бутстрапа, а паддинги облачка растягивают по высоте Тоже была идея сделать облачко отедельным, но проще когда с помощью параметра "cover" в атрибуте background фон уменьшается до границ родительского блока z-index в творческом порыве поставил зачем-то Хотелось бы более подробнее

Сайт http://burzhuy.org/deal/ Проблема с первым "блоком", где изображен мужчина по имени Гейб с облачком На родительский блок gabe фоном ставлю цельное изображение Гейба с облачком background: transparent url("/deal/img/gabe_big2.png") no-repeat scroll center center / cover;Потом идет меню, блок с текстом, который должен находиться и кнопка. Блок с текстом при разных разрешениях монитора будет скакать, поэтому я сделал такие правила для этого блока. Еще этот блок растягивает родительский блок так чтобы фон не был маленьким или очень большим @media (min-width: 768px) { .cloud { padding: 6% 58% 10% 8%; } .cloud p { font-size: 15px; } .cloud span { font-size: 20px; } .cloud2 { /*"Deal with it вот что по настоящем круто!"*/ padding-left: 10%; } .cloud2 h1 { font-size: 33px; } .cloud3 { /*"Круто!"*/ padding-right: 29%; } .cloud3 h2 { font-size: 27px; } }@media (min-width: 1000px) { /*ipod*/ .cloud { padding: 5% 54% 7% 8%; } .cloud p { font-size: 15px; } .cloud span { font-size: 19px; } .cloud2 { /*"Deal with it вот что по настоящем круто!"*/ padding-left: 20%; } .cloud2 h1 { font-size: 33px; } .cloud3 { /*"Круто!"*/ padding-right: 29%; } .cloud3 h2 { font-size: 27px; }} @media (min-width: 1120px) { .cloud { padding: 6% 58% 10% 8%; } .cloud p { font-size: 16px; } .cloud2 { /*"Deal with it вот что по настоящем круто!"*/ padding-left: 12%; } .cloud3 { /*"Круто!"*/ padding-right: 29%; } } @media (min-width: 1200px) { /*Me*/ .cloud { padding: 5% 57% 9% 14%; } .cloud p { font-size: 18px; } .cloud2 { /*"Deal with it вот что по настоящем круто!"*/ padding-left: 12%; } .cloud3 { /*"Круто!"*/ padding-right: 26%; } }Правильный ли это подход к такой задаче?

Самое лучшее решение оказалось этим. Спасибо большое за помощь

Вроде параллелепипед и есть объемный прямоугольник. Но это не важно. Мне просто нужно узнать как сделать такую же кнопку как и на картинке только с помощью css

Есть ли способ создать с помощью css параллелепипед как на картинке?

Проблема решилась переносом топ-меню в блок с Гейбом. Но если у кого-нибудь есть желание покритиковать мой подход и верстку, то я буду только "за"

Сайт http://burzhuy.org/deal/. Использую фреймворк bootstrap Имеется проблема с текстом в облачке "Мой собственный капитал...". На ipad текст отображается правильно, то есть не вылезает за границы облачка, но при таком же разрешении(1024х768) на компьютере текст отображается криво. В css я использую @media, а именно для разрешения 1024х768 этот код @media (min-width: 1000px) { .cloud { padding: 12% 54% 8% 8%; } .cloud p { font-size: 15px; } .cloud span { font-size: 19px; } .cloud2 { /*"Deal with it вот что по настоящем круто!"*/ padding-left: 20%; } .cloud2 h1 { font-size: 33px; } .cloud3 { /*"Круто!"*/ padding-right: 29%; } .cloud3 h2 { font-size: 27px; }}Код css родительского блока. З.Ы. Человека, который изображен на фоне, зовут Гейб .gabe { background-color: #e5f3db; z-index: 1; margin-top: -97px; background: transparent url(/deal/img/gabe_big2.png) no-repeat scroll center center / cover;}Что нужно сделать чтобы текст отображался правильно и на ipad и на компьютере? И вообще правильный ли я использую подход? Если нет, то в какую сторону копать?