Jump to content

Адаптивный шаблон с плавающей колонкой


sadko007
 Share

Recommended Posts

Всем привет.

Собрал шаблон jsfiddle но знаю что сделал криво, прошу посоветовать как правильно такое реализовать, сейчас поведение блоков именно такое как нужно, просто думаю что реализовано неверно.
На экранах компьютеров должно быть две колонки, левая с картинкой во всю высоту и примерно в половину ширины. В правой колонке текст. На мобильных устройствах, левая колонка поднимается в самый верх на всю ширину экрана, а ниже уже идет текстовый блок который был справа. Пытался сделать кросбраузерно но не получилось, у меня используется свойство background-size: cover которое ниже ие 9 не поддерживается. 

Пробовал картинку делать не бекграундом, а как обычное img с помощью этого скрипта jsfiddle.net но что то у меня не получилось, на больших разрешениях img фиксируется но при этом растягивается на весь экран.
В общем буду признателен за любые дельные советы подсказки или критику

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
Reply to this topic...

×   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

  • Similar Content

    • By dupre
      Увидел здесь http://htmlbook.ru/samhtml5/formy/shablon-vvoda-dannykh шаблон ввода данных для текстовых полей формы обратной связи. Насколько я знал, подобное делается на js и php. Верное ли это решение для сегодняшнего дня и стоит ли это примеять? Ведь дата публикации достаточно стара — 10.09.2011. 
    • By Schamil74
      Всем привет!
      Занимаюсь версткой чуть больше 2ух месяцев, без наставника, просто просматривая обучающие ролики и читая источники по этой теме.
      На данный момент сверстал 2 фикс макета и один адаптив, ссылку на который сейчас и выкладываю. Так же адаптирован под ретина дисплеи.
      https://schamil74.github.io/Sedona2017/
      Заходите с телефонов, планшетов. А вот касательно кроссбраузерности, обнаружил такой баг:
      На IE11 иконки выпадают из инпута. 
      Пока не могу загрузить скрин - ошибка!!!
    • By Дмитрий12
      Нарооооод
      я В общем освоил html+css на начальном уровне и вот сварганил первый сайт на дивной верстке 
      вот демка сайта которую копировал 
      http://www.woweb.ru/td1/048/
       
      а вот собственно мои файлы 
      жду так сказать критику что нуб и тд хех
      ну вродь выглядит неплохо на всех браузерах
      завтра буду делать что посложнее
      index.html
      style.css

    • By djforce
      Друзья, помогите пожалуйста сделать для сайта шапку, у меня есть вот такая разбивка:

      Могли бы подсказать как сделать такую форму, вот divы
      <div class="allh div1"> <div class="allh div2"> <div class="allh dostavka div3"> </div> <div class="allh search div4"> </div> </div> <div class="allh div5"> </div> <div class="allh logo div6"> </div> <div class="allh div7"> <div class="allh tel div10"> <div class="allh div8"> </div> </div> <div class="allh call div11"> <div class="allh div9"> </div> </div> <div class="allh occall div12"> </div> </div> <div class="allh cart div13"> </div> </div> Я не силен в позиционировании дивов, подскажите как тут лучше сделать?
      Может тупо таблицей?
    • By VIVA
      Люди, посоветуйте как лучше поступить.

      Скрин проблемы http://prntscr.com/a58l7i

      Пояснение: Есть кастомизированный горизонтальный скрол с которым хорошо работать на компьютере. Нужно его адаптировать под планшеты и смартфоны. Изначально я использовал JQuery плагин custom-scrollbar-master, но в нем есть очень большой косяк, он не поддерживает флик (движение пальцем по телефону) вправо на телефоне.
       
      Я пытался найти другие плагины, но все которые мне попадались не поддерживают флик вправо.

      Ребят, посоветуйте как можно решить такую проблему или может кто посоветует другой плагин?
×
×
  • 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