HTML Coding

29,542 questions in this forum

1. Адаптивная верстка (бутстрап) и мобильные девайсы с большим разрешением

   Бутстрап привязывается к разрешению девайса. А как отображается адаптивная верстка на девайсах с большим (full hd и более, например)?

   Asked by torsar, October 31, 2017

   0 votes
   3 answers
2. Адаптивная верстка блоков сайта

   Здравствуйте! Только начинаю делать сайты, прошу помощи в следующем вопросе. Сайт использует систему сеток bootstrap-4. На главной странице идет перечень товаров-блоков. Причем, необходимо сделать так, чтобы при размере экрана >1200 в один ряд было 4 блока, при размере 768<экрана<1200 было 3 блока в один ряд, при размере 576<экрана<768 было 2 блока в один ряд и при размере экрана<576 был один блок в один ряд. Конечно чтобы блоки занимали максимальную ширину. И самое главное! Надо сделать так, чтобы при изменении размера экрана и соответственно количества блоков в одном ряду переходящие вниз блоки занимали все пустые места, то ес…

   Asked by rafaello9, February 27, 2021

   0 votes
   1 answer
3. Адаптивная верстка группы кнопок

   Здравствуйте! Нужно сделать вёрстку группы кнопок - меню сайта. Идея такая - до 480 px показывать это меню в виде вертикального столбца по 1 кнопке в ряд, ширина каждой кнопки на всю страницу. От 480 до 768 показывать кнопки по 2 штуки в ряд. А от 780 показывать все кнопки в 1 ряд, без переноса. При этом менять размер шрифта и размер кнопок так чтобы они всегда вписывались в одну строку. Т.е. если кнопок много или ширина экрана маленькая, то пусть показываются хоть шрифтом 6 px. Если экран широкий или кнопок мало, то пусть кнопки будут крупные, а надписи внутри них будут хоть 20 px. Вроде бы всё реализуемо на CSS кроме показа в 1 строку. Не понятн…

   Asked by sdanilas, February 7, 2019

   0 votes
   0 answers
4. Адаптивная верстка и iphone.

   Здравствуйте, уважаемые форумчане. Проблема следующая. Есть сайт с адаптивной версткой: grimakva.ru При проверке сайта в эмуляторах моб устройств все отображается корректно (за исключением меню (оно в процессе). Но при просмотре сайта непосредственно через айфон (различных моделей и версий ios) фон сайта отображается некорректно, выравнивается по ширине, оставляя внизу большое пространство. При этом прописанные @media screen полностью игнорируются. В чем может быть ошибка? Буду рада любым советам и полезным ссылкам, сама к сожалению не нашла ничего.

   Asked by Toleri, November 27, 2015

   0 votes
   13 answers
5. Адаптивная вёрстка и как её постичь?

   Доброго всем времени суток. Дошёл я в изучении до адаптивной вёрстки. И тут я как-то заплутал) Как я понял есть несколько способов сделать сайт адаптивным. Я понимаю, что многие готовые макеты на CMS уже имеют адаптивную вёрстку. Но хотелось бы научиться адаптировать сайты самому. Но вот информации для новичков в интернете как-то маловато по этому вопросу. Могли бы вы посоветовать несколько источников, книг там или видеоуроков по адаптивной вёрстке? Так, чтобы сразу стало понятно, что это за зверь и как с ним обращаться.

   Asked by Arxont, July 4, 2016

   0 votes
   1 answer
6. адаптивная верстка и рассчет пикселей

   Добрый вечер Решил заполнить пробел в своих знаниях о адаптивной верстке - сверстал простенький макет под 1024/980/640/320 px ширины - на мониторе, что на работе, тестировал, уменьшая размер окна при открытом инспекторе, в Chrome - изменения происходят в тех точках, что и нужно - а вот дома решил протестировать - и изменения происходят, если верить инспектору, совсем не в тех точках ширины - то есть они происходят последовательно, при уменьшении/увеличении масштаба, но не так, как хотелось бы. К примеру, изменение вида при переходе на ширину 640px происходит где-то в точке 450px. Есть предположение, что это из-за разных мониторов и разрешений - но точно не знаю. На работе…

   Asked by orange_juice, August 13, 2015

   0 votes
   2 answers
7. Адаптивная верстка и рекламные блоки

   Добрый день) такой вопрос К примеру, необходимо сделать адаптивную верстку, а на сайте помимо прочего имеются рекламные блоки гугла, яндекса и тд итп. Допустим в шапке у нас баннер шириной 700пк...на десктопе все прекрасно, но вот настала очередь медиазапросов для экранов, шириной менее 700пк.... единственное что приходит в голову, так это задать баннеру display: none и при желание включить отображение баннера для мобильных устройств, меньшей ширины. Насколько такой подход верен?

   Asked by Frolov, October 30, 2012

   0 votes
   5 answers
8. Адаптивная верстка лендинга

   Здравствуйте, хочу научиться адаптивно верстать, взял для примера лендинг и возникла проблема, что делать с элементами которые не влазят на маленьких экранах? (скриншот проблемного момента) Серые черточки ни как не влезают на маленький экран и получается вот так: что с ними делать? у меня есть только 1 мысль, просто удалять их на маленьких разрешениях, а как правильно? И второй такой же момент с кнопкой "I want clients" и изображением мышки, на разрешении 320px они встают друг под друга и получается бред, а рядом при 320 их не поставить...

   Asked by cruel09, June 23, 2015

   0 votes
   1 answer
9. Адаптивная верстка на Бутстрапе

   Привет, уважаемые форумчане! Недавно решил освоить бутстрап, и начал верстать под него стандартный двухколоночный макет шириной 980px. Работаю на ноуте, с разрешением 1366*768, колонки создавал с помощью классов col-xs-*, в итоге все хорошо получилось для моего разрешения. Однако при изменении окна браузера до 1024 пикселей в ширину, макет немного деформируется - стандартное бутстраповкое горизонтальное меню не влазит, и один пункт переходит на новую строку, также в некоторых местах возникают искажения из-за слишком больших margin и padding, которые я указывал в абсолютных значениях - px. Часть проблем с паддингами вылечилась указанием размеров в %, для остальных проблем …

   Asked by Capz, March 23, 2015

   • bootrstrap
   • сетка адаптивная верстка
   0 votes
   0 answers
10. Адаптивная вёрстка под iPhone

    Знаю, что глупый вопрос, но как сделать, чтобы на айфоне\айпаде при масштабировании контента он изменялся по ширине, а не оставался фиксированной ширины. Структура представляет из себя блок с шириной 100%, в нём еще 1 блок с шириной 100%, и в нём еще много блоков с шириной 100%, я так понял, что 100% берётся от размера документа. А нужно от размеров области просмотра. <meta name=”viewport” content=”width=320"> не помогает. Заранее спасибо

    Asked by Briss, April 15, 2013

    • iPhone
    • Responsive
    • css
    • html
    0 votes
    6 answers
11. Адаптивная вёрстка под мобильные

    Здравствуйте Столкнулся с проблемой адаптивной вёрстки. Телефон имеет ширину экрана 640px, высоту 1100px Делаю в css такое условие: @media only screen and (max-device-width: 670px) { #navi-h {height:auto; width:500px; background:url(images/home-menu-bg.jpg) repeat; margin:0 auto;} } Подцепляется стиль, но отображается на экране намного меньше реальности, по ширине показывается меньше процентов на 30. В чём может быть причина? ну и дабы не быть голословным сайт f c d e c o r точка ru

    Asked by Hobu4ek, January 13, 2014

    0 votes
    5 answers
12. Адаптивная верстка, проблема с фоновыми рисунками

    Проблема с фоновыми рисунками на главной странице 1 рисунок bg1.png снизу-слева, 2 рисунок bg2.png снизу-справа На обычных мониторах все нормально. А на больших телевизорах и мониторах фоновые картинки улетают вверх. На iPhone вообще не показываються. На этой странице: http://habana-vieja.ru Прописаны в файле CSS: html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url('design/bg1.png') left bottom no-repeat, url('design/bg2.png') right bottom no-repeat, url('design/fon-jeans.gif');}

    Asked by egor2015, December 2, 2015

    • адаптивная верстка
    0 votes
    3 answers
13. Адаптивная верстка: использование принципов Bootstrap, но без него

    Задача сверстать адаптивный сайт. Практического опыта верстки адаптивного дизайна у меня нет. Поэтому хотелось с вашей помощью разобраться и определиться, каким путем идти. Решила использовать принципы Bootstrap. Возникли принципиальные вопросы. .row {margin: 0 -15px;;} .container {padding: 0 15px;margin: 0 auto;}Объясните, пожалуйста, зачем сначала добавлять паддинги, а потом помещать содержимое в .row, у которой нивелируются эти отступы. Каково назначение .row вообще?

    Asked by Светлана Г., November 13, 2014

    • адаптивная верстка
    0 votes
    46 answers
14. Адаптивная верстка: проблема при смене ориентации устройства

    Здравствуйте! Есть сайт. Проблема в том, что при смене ориентации с планшетной на портретную сайт не подстраивается сразу, а только после перезагрузки. Может кто-нибудь знает, как решить эту проблему?

    Asked by Светлана Г., March 23, 2015

    0 votes
    0 answers
15. Адаптивная вёрстка. Как правильно подойти?

    Приветствую всех! Вот хочу попытаться сверстать адаптивный сайт, но есть вопросы: 1.Под какие разрешения собственно верстать? 2. Как верстать под большие разрешения и нужно ли это вообще(большие разрешения это больше 1200 px)? 3. Как собственно ровно верстать под большие разрешения, если у самого монитор в 1200, а надо больше (если надо, смотрим вопрос 2). Очень неудобно будет то 4.О маленьких разрешениях. Нет при себе не мобильного, ни чего-то другого, а на сайте будут использоваться блоки с JS и многое другое "тяжелое". Вдруг всё тормозить начнет, как решить вопрос? 5. Есть ли нормальный и бесплатные хостинг с поддержкой динамики? Может своё дети…

    Asked by tigrus2014, June 12, 2017

    0 votes
    2 answers
16. Адаптивная вертикальная карусель

    Здравствуйте. Посоветуйте, пожалуйста, адаптивную вертикальную карусель.

    Asked by stan07, October 16, 2015

    0 votes
    2 answers
17. адаптивная высота контентного блока

    Доброго дня. Стоит задача реализовать, чтобы хедер был вверху, футер всегда прибит к низу (всегда виден), а контент растягивается на оставшееся между хедером и футером место. Чтобы это работало на разных разрешениях, т.е. если контента текста меньше чем блок контент по высоте, то блок все равно тянется до футера, а если текста больше, чем блок контент по высоте, то у него появляется прокрутка. В идеале, чтобы хедеру и футеру не задавать высоту, но можно и с сатичной высотой. Можно ли это реализовать без javascript? Вот здесь накидал верстку: http://jsfiddle.net/digitalmedia/jubjbaLL/

    Asked by vip, April 28, 2015

    0 votes
    4 answers
18. Адаптивная информативная фотогалерея

    <div class="imgPages col-es_12 clearfix"> <a href="assets/template/flexible/img/ballu/bravo.jpg"> <img src="assets/template/flexible/img/ballu/small/bravo.jpg" alt="Ballu Bravo внутренний блок"> </a> <a href="assets/template/flexible/img/ballu/bravo-outdoor.jpg"> <img src="assets/template/flexible/img/ballu/small/bravo-outdoor.jpg"> </a> <a href="assets/template/flexible/img/ballu/bravo-pult.jpg"> <img src="assets/template/flexible/img/ballu/small/bravo-pult.jpg" alt="Ballu Bravo ИК-пульт"> </a> </div> Есть вот такой блок с изображениями расположенными в …

    Asked by Delat, February 7, 2017

    0 votes
    1 answer
19. адаптивная карусель

    Здравствуйте уважаемые форумчане! Подскажите, пожалуйста, адаптивную карусель со всплывающей блоком при ховере

    Asked by stan07, January 6, 2016

    0 votes
    4 answers
20. Адаптивная карусель с миниатюрами с поддержкой видео

    Здравствуйте уважаемые форумчане! Подскажите, пожалуйста, адаптивную карусель с миниатюрами и с поддержкой видео (YouTube, Vimeo, и Funnyordie).

    Asked by stan07, December 14, 2015

    0 votes
    2 answers
21. Адаптивная навигация

    Посоветуйте js/jq плагины для создания адаптивной навигации. Нужно что бы изначально была обычная горизонтальная навигация, а на определенной ширине сворачивалась в тоглер. Хорошо бы с какой-то анимацией. Подскажите, что используете вы лично (если используете). Сейчас нашел jQuery-плагин, - Slidebars, но он изначально тоглер .. Как его настроить под мой пример? Спасибо!

    Asked by Hasiev, April 5, 2018

    0 votes
    2 answers
22. Адаптивная разметка html страницы

    Нужен шаблон с лучшей техникой адаптивной разметки. В итоге нужно получить страницу без ограничений по максимальной и по минимальной ширине. Включая проигрывание видео и аудио.

    Asked by bulqa, February 25, 2016

    • адаптивная раметка
    0 votes
    0 answers
23. Адаптивная таблица

    Здравствуйте, дорогие форумчане, в очередной раз вынужден просить у вас помощи. Есть ли какой-нибудь способ сделать простую таблицу адаптивной? В каком смысле простую? Да самую что ни на есть простую а именно <table> со всеми вытекающими из нее <tr> <td> <th> Я уверен, что это можно сделать посредством css, но моих знаний недостаточно. Как пример: вот моя страница на ошибки отступы и кривой дизайн, можете не смотреть) Интересует внизу страницы таблица с табами. Буду очень благодарен, если кто-то подскажет как ее сделать адаптивной.

    Asked by MadSandwich, July 8, 2016

    • table
    • html
    • css
    0 votes
    2 answers
24. Адаптивная шапка

    del

    Asked by Shaman14-21, December 8, 2014

    0 votes
    8 answers
25. Адаптивная шапка

    Здравствуйте, знаю, что уже много было таких тем, но я видимо уже даже переборщил со стилями и со всем чем можно, но честно уже не вижу причину, что я с ней сделал не так, и почему она не адаптивная. Укажите мне на мою ошибку и помогите сделать шапку адаптивной для любого разрешения экрана Да класс Headr, это не ошибка. Код самой шапки: <headr class="page-header"> <div class="logo"> <img src="/img/11111.png"> </div> <div class="nav-contact"> <ul class="contact-nav"> <li><a href="/catalog.php">Каталог</a></li> <li><a href…

    Asked by MadSandwich, July 4, 2016

    • шапка
    • адаптивность
    0 votes
    8 answers