Search the Community
Showing results for tags 'резиновая верстка'.
Found 18 results
-
Всем привет! Занимаюсь версткой 3 месяца, без наставника, просто просматривая обучающие ролики и читая источники по этой теме. На данный момент сверстал 6 макетов: 2 фикс, 2 на бутстрап, 1 адаптивный без фреймворка и 1 резиновый-адаптивный без фреймфорка. Выкладываю последний. Всю сложность можно оценить путем изменения области просмотра браузера, как ведут себя элементы на разных брейкпоинтах. Все иконки svg-спрайты (с ними помучился). В этой верстке немного пытался реализовать именования классов по БЭМ. Немного парился с кроссбраузерностью. Не тестировал на ie9 и ниже, такой задачи не было. https://schamil74.github.io/Mishka/
-
Всем привет! Надо сверстать небольшой проект. По ссылке макеты, пока без подробного ТЗ. Скиньте, пожалуйста, ваши примеры работ на ok@telemark-it.ru и укажите ваши пожелания по бюджету. Резина, от 1024 до 1280. Подробности как ресайзить и как работают формы будут в ТЗ (в принципе, активные элементы форм прорисованы и уже понятно). https://cp.telemark-it.ru/workdir/task_files/058000/makety.txt Предполагаю что тут работы примерно на пару недель. Основная работа будет со стилями форм
-
Доброго времени суток. Очень надеюсь на вашу помощь! Сразу даю ссылку на код 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, а шапка обрезана. Все еще нуждаюсь в помощи!
-
Друзья, всем добрый день! Я полный новичок. Взял первый для себя макет и решил реализовать резиновую верстку. 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% всего экрана. Помогите пожалуйста понять, какая там логика?
-
Всем привет. Собственно по сабжу: Верстка GitHub верстки Верстка резиновая с 1000px до 1600px. Прошу оценить выбранные мною методы верстки(напр. я выбрал верстать на флоатах, хотя мог все через позиционирование сделать. Так как я выбрал флоаты при сужении окна так же были выбраны свои методы перестроения блоков и т.п.) и верстку в целом. P/S. При нажатии на изображение все ненужное уходит вниз.
-
Всем доброго времени суток! Собственно верстка. Немного о верстке: Верстка тянется от 580px до 960px; Немного вопросов по верстке: Стрёмно выглядят векторные иконки в фаерфоксе(птица твиттера похожа на орла, не ну солидно конешно, но мне обычная нужна ) P/S. Все файлы сайта можно скачать тут.
-
Всем привет. Наверное сотни тысяч раз верстальщики сталкивались с подобными задачами. Мне нужно следующее: Есть основной, центральный блок контента (block_content) шириной 1000 px. Но помещен этот блок в родительский блок (block, который будет содержать фоновое изображение) шириной 1920 px. .block {width:100%; max-width:1920px; min-width:1000px;overflow:hidden} .block_content {width:1000px; margin:0 auto;} На мониторе с разрешением 1920 пикс. все смотрится отлично. Центральный блок, находится по середине, на фоне внешнего блока с изображением. Но при уменьшении разрешения (при свойстве у внешнего блока overflow:hidden;), идет скрыти правой части изображения. Как сделать, что-бы при уменьшении экрана, скрывалось пропорционально и правая часть фонового изображения внешнего блока и левая?
-
Доброе время суток! Подскажи пжл ,где подробней можно прочитать об резиновой верстке и с чем её кушать?
-
Привет всем, попытался сверстать свой первый макет, в процессе возникло несколько вопросов: 1.Почему форма поиска "разьезжается" во всех браузерах кроме фаерфокса? 2.Проблема "резиновости", content-one, content-two, content-three, они сжимаются на разную ширину, а изображения по идее при уменьшении размера окна должны выстраиваться вертикально, но это происходит чере Ж....Как это исправить? http://lenivec.ho.com.ua/1/1/ спасибо
-
В общем есть такая проблема. дана табличка <title>Резиновая табличная верстка сайта</title><style type="text/css">.header {height:60px; background-color:#717dc9; padding:20px; text-align:center}.left_col {width:120px; height:460px; background-color:#dddddd; padding:15px; vertical-align:top}.center_col {background-color:#ffffff; padding:15px; vertical-align:top}.right_col {width:120px; background-color:#dddddd; padding:15px; vertical-align:top}.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px}</style></head><body><table cellpadding="0" cellspacing="0" width="100%" align="center"><tr><td colspan="3" class="header">Мой сайт</td></tr><tr><td class="left_col">Меню</td><td class="center_col">Ширинаячейквданномслучаезависитотвеличинымонитораилиразмераокнабраузера.</td><td class="right_col">Ссылки</td></tr><tr><td colspan="3" class="footer">© Все права защищены</td></tr></table></body> </html>внизу появляется полоса прокрутки, а нужно от него избавиться. Проблема в том, что, если в предложении существуют пробелы, то все ок, но если их нет - появляется этот жуткий скролбар. Кто имел опыт решения данной проблемы, подскажите)))
-
Верстаю сайт для мотоклуба. Там на заднем фоне сильнотекстурированное изображение. В виде полупрозрачных ячеек карбона поверх асфальта с трещинами и разметкой. Хочется сделать резиновую вёрстку, но есть одно но. Ячейки этого самого карбона на больших разрешениях ну уж очень сильно растягиваются и начинают портить дизайн. Всё остальное смотрится нормально. Долго ломал голову как это исправить. Родилась идея, но к сожалению, пока не придумал как её реализовать. Идея в том что бы при растяжении окна, асфальт растягивался. А полупрозрачные ячейки поверх него не тянулись а мостились. То есть увеличивались не качественно а колличественно.)) Подскажите возможно ли это реализовать, и если да - то как?
-
Здравствуйте! Потребовалось сверстать блок вот такого типа. 1 - плавающий блок с заголовком, неопределенной ширины, растягивается вправо и прижат к аватарке 3. Ширина не ограничена и зависит от того, что в нем написано. 2 - блок с кнопками управления своей учеткой, находится справа от блока 1, прижат к правому краю, НО если из-за длины блока 1 блок 2 не вмещается, он должен переместиться в место под аватаркой, отмеченное красным кругом. 3 - аватарка, у меня она с абсолютным позиционированием, положение блоков относительно ее регулируется пэддингом. Один из ключевых моментов - это резиновый макет, т.е. при увеличивании \ уменьшении окна браузера все должно работать корректно. Собственно, я не смог найти ничего более умного, кроме как определить через php длину заголовка 1 и проставить для блока 2 классы типа pull-left-768, pull-left-1199 и так далее, которые сдвигают при определенных ключевых точках этот блок в место, отмеченное кружочком. Поскольку макет сделан на бутстрапе, то это не сложно. Но решение получилось довольно костыльным и не без недостатков... поэтому у меня вопрос: как бы вы сделали подобный блок? На основании каких хаков \ приемов и т.п. И возможно ли вообще реализовать такое непростое поведение на чистом css? p.s. js я не применял, т.к. возможны артефакты при загрузке страницы. Буду благодарен за советы
-
Уважаемые мастера, прошу вас сориентировать и подсказать. Есть задача переделать один шаблон в две резиновые колонки со статичным контентом, для уменьшения большого количества строк кода. Решил попробовать левый столбик сделать на основе <nav></nav>, правый уже <div>. <!DOCTYPE html><html><head> <title></title> <meta name="description" content="free website template" /> <meta name="keywords" content="enter your keywords here" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="css/style.css" type="text/css"> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,300" type="text/css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head><body> <nav> <ul> <li class=""> <a href="index.html">1</a> </li> <li class=""> <a href="index.html">2</a> </li> <li class=""> <a href="index.html">3</a> </li> <li class=""> <a href="index.html">4</a> </li> </ul> </nav> <div class="ct-green"> <ul> <li class=""> <a href="index.html">0</a> </li> <li class=""> <a href="index.html">00</a> </li> <li class=""> <a href="index.html">000</a> </li> <li class=""> <a href="index.html">0000</a> </li> </ul> </div> </body></html>CSS: html { height:100%; }body { margin:0; background-color:#ce4718; font-family: 'AbelRegular'; position:relative; height:100%;}a { outline:none;}a img { border:0; display:block;}p { font-family:Arial, Helvetica, sans-serif;}nav { width:31%; height:90%; float:left; position:relative; }.ct-green { width:69%; height:100%; margin-left:31%; background:url(../img/bg-green.png); position:relative;}nav ul { width:122px; height:100%; position:absolute; top:0; right: 0;} Насколько такая конструкция будет "кошерна")?
-
Здравствуйте! Все чаще стали попадаться макеты с нестандартным фоном, который я не знаю как приспособить под резиновость. Пример макета ниже. Буду очень благодарен, если подскажете как верстать резиново такие фоны. https://st.fl.ru/projects/upload/201401/f_73452cd2e47e535f.jpg Спасибо!
-
Делаю верстку с резиновыми колонками и фиксированными отступами между ними. .col {margin-left: 10px;margin-right: 10px;}Через float колонки находятся в одном ряду. Если задать margin, при ресайзе окна колонки не обтекаются и переносятся. Подумал для этого использовать бордеры, вот так: border-left: solid 10px transparent;border-right: solid 10px transparent;Можно так?
-
Привет! В начале сам сабж Макет из данной темы. Задачи, которые ставились: Оцените, пожалуйста, насколько удалось (или не удалось?) выполнить требования к верстке. Спасибо!
-
Добрый вечер! Такой вопрос - при резиновой вёрстке можно ли задать единую высоту у двух блоков с разным контентом? (все блоки резиновые) В одной колонке картинка + заголовок + интро В другой - дата добавления и заголовок Проблема в том, что если изменять размер браузера, то блок, в котором контента больше, растягивается по высоте.
-
Добрый день. Никогда особо с версткой не сталкивался но тут попросили сделать сайт http://siruk-design.ru вот что в черновом варианте получается. Подскажите правильный ли вектор направления, есть косяки которые пока не понимаю как решить возможно из-за того что неправильный подход. В общем жду конструктивной критики и полезных советов. Заранее спасибо )
