- 0
Высота блоков при резиновой вёрстке
-
Similar Content
-
By Schamil74
Всем привет!
Занимаюсь версткой 3 месяца, без наставника, просто просматривая обучающие ролики и читая источники по этой теме.
На данный момент сверстал 6 макетов: 2 фикс, 2 на бутстрап, 1 адаптивный без фреймворка и 1 резиновый-адаптивный без фреймфорка.
Выкладываю последний. Всю сложность можно оценить путем изменения области просмотра браузера, как ведут себя элементы на разных брейкпоинтах.
Все иконки svg-спрайты (с ними помучился).
В этой верстке немного пытался реализовать именования классов по БЭМ. Немного парился с кроссбраузерностью. Не тестировал на ie9 и ниже, такой задачи не было.
https://schamil74.github.io/Mishka/
-
By Zateya
Всем привет!
Надо сверстать небольшой проект.
По ссылке макеты, пока без подробного ТЗ. Скиньте, пожалуйста, ваши примеры работ на ok@telemark-it.ru и укажите ваши пожелания по бюджету.
Резина, от 1024 до 1280. Подробности как ресайзить и как работают формы будут в ТЗ (в принципе, активные элементы форм прорисованы и уже понятно).
https://cp.telemark-it.ru/workdir/task_files/058000/makety.txt
Предполагаю что тут работы примерно на пару недель. Основная работа будет со стилями форм
-
By lavrentyev
Доброго времени суток. Очень надеюсь на вашу помощь!
Сразу даю ссылку на код 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, а шапка обрезана.
Все еще нуждаюсь в помощи!
-
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% всего экрана.
Помогите пожалуйста понять, какая там логика?
-
By tarthur
Всем привет.
Собственно по сабжу:
Верстка
GitHub верстки
Верстка резиновая с 1000px до 1600px. Прошу оценить выбранные мною методы верстки(напр. я выбрал верстать на флоатах, хотя мог все через позиционирование сделать. Так как я выбрал флоаты при сужении окна так же были выбраны свои методы перестроения блоков и т.п.) и верстку в целом.
P/S.
При нажатии на изображение все ненужное уходит вниз.
-
Question
Kotik
Добрый вечер! Такой вопрос - при резиновой вёрстке можно ли задать единую высоту у двух блоков с разным контентом? (все блоки резиновые)
В одной колонке картинка + заголовок + интро
В другой - дата добавления и заголовок
Проблема в том, что если изменять размер браузера, то блок, в котором контента больше, растягивается по высоте.
Link to comment
Share on other sites
1 answer to this question
Recommended Posts
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.