Jump to content
  • 0

Проблема с резиновой вёрсткой!!!

lavrentyev

Asked by lavrentyev,

 Share

Question

lavrentyev Explorer

lavrentyev

Posted
Posted (edited)

Доброго времени суток. Очень надеюсь на вашу помощь!

Сразу даю ссылку на код https://jsfiddle.net/Lavrentyev/f5ygLoxp/5/#&togetherjs=L9Tx3aRbGa

Проблема в том, что мне нужна резиновая шапка. Чтобы блок с выбором языка и кнопка входа при уменьшении экрана ехали влево, но при этом сама шапка не обрезалась. Когда я ставлю шапке min-width: 1280px то шапка не обрезается но и блок с выбором языка и кнопка входа остаются на месте (http://joxi.ru/52ayglEIdaYQ20), а если ставлю шапке width: 100% блоки едут как надо, но шапка понятно обрезается по ширине экрана. (http://joxi.ru/5mdogq5HZOd5r1)

Не могу разобраться с этим. Помогите, пожалуйста. 

Немного разобрался, но не до конца. Получается если ставлю шапке width: 100% то при уменьшении экрана его размер остается 1280px но шапка уменьшается вместе с экраном. Я применил к body overflow-x: hidden и это сработало, убралась горизонтальная полоса прокрутки. Но при сильном уменьшении экрана должна появляться. Я это сделал с помощью медиа запроса. Полоса появляется, но опять же горизонтально прокручивается до 1280px, а шапка обрезана. 

Все еще нуждаюсь в помощи!

Edited by lavrentyev
Изменение в связи с дальнейшей работой
Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

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
Answer this question...

×   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
Go to question listing

  • Similar Content

    • Schamil74
      Оцените верстку: резиновая, адаптивная + retina
      By Schamil74
      Всем привет!
      Занимаюсь версткой 3 месяца, без наставника, просто просматривая обучающие ролики и читая источники по этой теме.
      На данный момент сверстал 6 макетов: 2 фикс, 2 на бутстрап, 1 адаптивный без фреймворка и 1 резиновый-адаптивный без фреймфорка. 
      Выкладываю последний. Всю сложность можно оценить путем изменения области просмотра браузера, как ведут себя элементы на разных брейкпоинтах.  
      Все иконки svg-спрайты (с ними помучился).
      В этой верстке немного пытался реализовать именования классов по БЭМ. Немного парился с кроссбраузерностью. Не тестировал на ie9 и ниже, такой задачи не было.
       
      https://schamil74.github.io/Mishka/
    • Zateya
      Верстка проекта
      By Zateya
      Всем привет!
      Надо сверстать небольшой проект.
      По ссылке макеты, пока без подробного ТЗ. Скиньте, пожалуйста, ваши примеры работ на ok@telemark-it.ru и укажите ваши пожелания по бюджету.
      Резина, от 1024 до 1280. Подробности как ресайзить и как работают формы будут в ТЗ (в принципе, активные элементы форм прорисованы и уже понятно). 
      https://cp.telemark-it.ru/workdir/task_files/058000/makety.txt
       
      Предполагаю что тут работы примерно на пару недель. Основная работа будет со стилями форм
    • Ota
      Резиновая верстка работает, но почему?
      By Ota
      Друзья, всем добрый день!
       
      Я полный новичок. Взял первый для себя макет и решил реализовать резиновую верстку. 3 колонки: левая фиксированная (width: 300px), центральная и правая резиновая. При этом центральная и правая делит пространство оставшееся от левой колонки между собой в отношении 70% (центр) на 30% (правый).
       
      Вчера бился полдня, облазил весь гугл, нашел несколько решений, но они у меня почему-то не работали. Сегодня с утра потыкал самостоятельно и получилось реализовать. Вот код html:
      <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <div class="left-sidebar"> Left sidebar </div> <div class="inside-wrapper"> <div class="main"> Central column </div> <div class="right-sidebar"> Right sidebar </div> </div> </div> </body></html>  а это css:
      .wrapper { width: 100%; height: 500px;}.left-sidebar { width: 300px; height: 500px; background-color: red; float:left;}.inside-wrapper { margin-left: 300px;}.main { width: 70%; height: 500px; background-color: green; float: left;}.right-sidebar { width: 30%; height: 500px; background-color: yellow; float: right;}Собственно мне хотелось бы разобраться, почему в inside-wrapper нужен margin-left шириною в фиксированную колонку? Разве не должен inside wrapper так и так обтекать левую колонку справа и занимать все оставшееся место, а внутренние дивы делить в соотношении 70 на 30 это пространство. 
       
      Но если убрать margin-left, то центральная колонка внутри inside wrapper занимает 70% от всего экрана, и сталкивает правую колонку вниз. А правая колонка тоже занимает 30% всего экрана.
       
      Помогите пожалуйста понять, какая там логика?
    • tarthur
      Оцените резиновую верстку
      By tarthur
      Всем привет.
      Собственно по сабжу:
      Верстка
      GitHub верстки
       
      Верстка резиновая с 1000px до 1600px. Прошу оценить выбранные мною методы верстки(напр. я выбрал верстать на флоатах, хотя мог все через позиционирование сделать. Так как я выбрал флоаты при сужении окна так же были выбраны свои методы перестроения блоков и т.п.) и верстку в целом.
       
      P/S.
      При нажатии на изображение все ненужное уходит вниз.
    • Flexible Curd
      Оцените резиновую верстку
      By Flexible Curd
      Всем доброго времени суток!
      Собственно верстка.
       
      Немного о верстке:
      Верстка тянется от 580px до 960px; 
      Немного вопросов по верстке:
      Стрёмно выглядят векторные иконки в фаерфоксе(птица твиттера похожа на орла, не ну солидно конешно, но мне обычная нужна )
       
      P/S.
      Все файлы сайта можно скачать тут.
×
×
  • 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

  I accept