Jump to content

afagorn

Newbie
  • Posts

    7
  • Joined

  • Last visited

Everything posted by afagorn

  1. Ширина задается с помощью строчек(.row) бутстрапа, а паддинги облачка растягивают по высоте Тоже была идея сделать облачко отедельным, но проще когда с помощью параметра "cover" в атрибуте background фон уменьшается до границ родительского блока z-index в творческом порыве поставил зачем-то Хотелось бы более подробнее
  2. Сайт 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%; } }Правильный ли это подход к такой задаче?
  3. Самое лучшее решение оказалось этим. Спасибо большое за помощь
  4. Вроде параллелепипед и есть объемный прямоугольник. Но это не важно. Мне просто нужно узнать как сделать такую же кнопку как и на картинке только с помощью css
  5. Есть ли способ создать с помощью css параллелепипед как на картинке?
  6. Проблема решилась переносом топ-меню в блок с Гейбом. Но если у кого-нибудь есть желание покритиковать мой подход и верстку, то я буду только "за"
  7. Сайт 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 и на компьютере? И вообще правильный ли я использую подход? Если нет, то в какую сторону копать?
×
×
  • 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