Jump to content

Search the Community

Showing results for tags 'Резиновая верстка'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Development
    • HTML Coding
    • JavaScript
    • PHP
    • CMS
    • Database
    • Web Server
    • Web-site Development
    • Internet Marketing, SEO
  • Library
    • Tricks and solutions
    • Books
  • Commercial services
    • Freelance
    • Job
    • Goods and Services
  • Our Forum
    • Flame
    • Contests
    • Feedback and Ideas

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


Telegram


Signal


Viber


Skype


From


Interests

Found 18 results

  1. Всем привет! Занимаюсь версткой 3 месяца, без наставника, просто просматривая обучающие ролики и читая источники по этой теме. На данный момент сверстал 6 макетов: 2 фикс, 2 на бутстрап, 1 адаптивный без фреймворка и 1 резиновый-адаптивный без фреймфорка. Выкладываю последний. Всю сложность можно оценить путем изменения области просмотра браузера, как ведут себя элементы на разных брейкпоинтах. Все иконки svg-спрайты (с ними помучился). В этой верстке немного пытался реализовать именования классов по БЭМ. Немного парился с кроссбраузерностью. Не тестировал на ie9 и ниже, такой задачи не было. https://schamil74.github.io/Mishka/
  2. Всем привет! Надо сверстать небольшой проект. По ссылке макеты, пока без подробного ТЗ. Скиньте, пожалуйста, ваши примеры работ на ok@telemark-it.ru и укажите ваши пожелания по бюджету. Резина, от 1024 до 1280. Подробности как ресайзить и как работают формы будут в ТЗ (в принципе, активные элементы форм прорисованы и уже понятно). https://cp.telemark-it.ru/workdir/task_files/058000/makety.txt Предполагаю что тут работы примерно на пару недель. Основная работа будет со стилями форм
  3. Доброго времени суток. Очень надеюсь на вашу помощь! Сразу даю ссылку на код 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, а шапка обрезана. Все еще нуждаюсь в помощи!
  4. Друзья, всем добрый день! Я полный новичок. Взял первый для себя макет и решил реализовать резиновую верстку. 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% всего экрана. Помогите пожалуйста понять, какая там логика?
  5. Всем привет. Собственно по сабжу: Верстка GitHub верстки Верстка резиновая с 1000px до 1600px. Прошу оценить выбранные мною методы верстки(напр. я выбрал верстать на флоатах, хотя мог все через позиционирование сделать. Так как я выбрал флоаты при сужении окна так же были выбраны свои методы перестроения блоков и т.п.) и верстку в целом. P/S. При нажатии на изображение все ненужное уходит вниз.
  6. Всем доброго времени суток! Собственно верстка. Немного о верстке: Верстка тянется от 580px до 960px; Немного вопросов по верстке: Стрёмно выглядят векторные иконки в фаерфоксе(птица твиттера похожа на орла, не ну солидно конешно, но мне обычная нужна ) P/S. Все файлы сайта можно скачать тут.
  7. Всем привет. Наверное сотни тысяч раз верстальщики сталкивались с подобными задачами. Мне нужно следующее: Есть основной, центральный блок контента (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;), идет скрыти правой части изображения. Как сделать, что-бы при уменьшении экрана, скрывалось пропорционально и правая часть фонового изображения внешнего блока и левая?
  8. Доброе время суток! Подскажи пжл ,где подробней можно прочитать об резиновой верстке и с чем её кушать?
  9. Привет всем, попытался сверстать свой первый макет, в процессе возникло несколько вопросов: 1.Почему форма поиска "разьезжается" во всех браузерах кроме фаерфокса? 2.Проблема "резиновости", content-one, content-two, content-three, они сжимаются на разную ширину, а изображения по идее при уменьшении размера окна должны выстраиваться вертикально, но это происходит чере Ж....Как это исправить? http://lenivec.ho.com.ua/1/1/ спасибо
  10. В общем есть такая проблема. дана табличка <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>внизу появляется полоса прокрутки, а нужно от него избавиться. Проблема в том, что, если в предложении существуют пробелы, то все ок, но если их нет - появляется этот жуткий скролбар. Кто имел опыт решения данной проблемы, подскажите)))
  11. Верстаю сайт для мотоклуба. Там на заднем фоне сильнотекстурированное изображение. В виде полупрозрачных ячеек карбона поверх асфальта с трещинами и разметкой. Хочется сделать резиновую вёрстку, но есть одно но. Ячейки этого самого карбона на больших разрешениях ну уж очень сильно растягиваются и начинают портить дизайн. Всё остальное смотрится нормально. Долго ломал голову как это исправить. Родилась идея, но к сожалению, пока не придумал как её реализовать. Идея в том что бы при растяжении окна, асфальт растягивался. А полупрозрачные ячейки поверх него не тянулись а мостились. То есть увеличивались не качественно а колличественно.)) Подскажите возможно ли это реализовать, и если да - то как?
  12. Здравствуйте! Потребовалось сверстать блок вот такого типа. 1 - плавающий блок с заголовком, неопределенной ширины, растягивается вправо и прижат к аватарке 3. Ширина не ограничена и зависит от того, что в нем написано. 2 - блок с кнопками управления своей учеткой, находится справа от блока 1, прижат к правому краю, НО если из-за длины блока 1 блок 2 не вмещается, он должен переместиться в место под аватаркой, отмеченное красным кругом. 3 - аватарка, у меня она с абсолютным позиционированием, положение блоков относительно ее регулируется пэддингом. Один из ключевых моментов - это резиновый макет, т.е. при увеличивании \ уменьшении окна браузера все должно работать корректно. Собственно, я не смог найти ничего более умного, кроме как определить через php длину заголовка 1 и проставить для блока 2 классы типа pull-left-768, pull-left-1199 и так далее, которые сдвигают при определенных ключевых точках этот блок в место, отмеченное кружочком. Поскольку макет сделан на бутстрапе, то это не сложно. Но решение получилось довольно костыльным и не без недостатков... поэтому у меня вопрос: как бы вы сделали подобный блок? На основании каких хаков \ приемов и т.п. И возможно ли вообще реализовать такое непростое поведение на чистом css? p.s. js я не применял, т.к. возможны артефакты при загрузке страницы. Буду благодарен за советы
  13. Уважаемые мастера, прошу вас сориентировать и подсказать. Есть задача переделать один шаблон в две резиновые колонки со статичным контентом, для уменьшения большого количества строк кода. Решил попробовать левый столбик сделать на основе <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;} Насколько такая конструкция будет "кошерна")?
  14. Здравствуйте! Все чаще стали попадаться макеты с нестандартным фоном, который я не знаю как приспособить под резиновость. Пример макета ниже. Буду очень благодарен, если подскажете как верстать резиново такие фоны. https://st.fl.ru/projects/upload/201401/f_73452cd2e47e535f.jpg Спасибо!
  15. Делаю верстку с резиновыми колонками и фиксированными отступами между ними. .col {margin-left: 10px;margin-right: 10px;}Через float колонки находятся в одном ряду. Если задать margin, при ресайзе окна колонки не обтекаются и переносятся. Подумал для этого использовать бордеры, вот так: border-left: solid 10px transparent;border-right: solid 10px transparent;Можно так?
  16. Привет! В начале сам сабж Макет из данной темы. Задачи, которые ставились: Оцените, пожалуйста, насколько удалось (или не удалось?) выполнить требования к верстке. Спасибо!
  17. Добрый вечер! Такой вопрос - при резиновой вёрстке можно ли задать единую высоту у двух блоков с разным контентом? (все блоки резиновые) В одной колонке картинка + заголовок + интро В другой - дата добавления и заголовок Проблема в том, что если изменять размер браузера, то блок, в котором контента больше, растягивается по высоте.
  18. Добрый день. Никогда особо с версткой не сталкивался но тут попросили сделать сайт http://siruk-design.ru вот что в черновом варианте получается. Подскажите правильный ли вектор направления, есть косяки которые пока не понимаю как решить возможно из-за того что неправильный подход. В общем жду конструктивной критики и полезных советов. Заранее спасибо )
×
×
  • 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