Светлана Г.

Принципиально использовать .container-fluid? У меня используется .container.

А можете структуру набросать? Резиновые колонки - это не проблема. Проблема разместить их так, как в макете.

Метод есть в jQuery называется .focus() надо найти откуда он приходит. Там минимизированный файл. Трудно разобраться. а можно просто своим скриптом его отменить?

Ну чтобы структура сохранялась. Мне надо кроссбраузерно везде. А причем здесь class="container-fluid" ? Он чем может помочь?

Здравствуйте! Есть такой блок: Сверстать нужно адаптивно. Данный вид для ширины 1340px. Обращаю внимание на то, что заголовок выровнен со средней колонкой по левому краю. На крайний случай, для выравнивания заголовка буду использовать это: #title:before{ content:'Наши услуги:'; display:inline-block; font-size:30px;}Я использую стили Bootstrap. Может быть, здесь подойдет что-то вроде .col-lg-offset-* . Я не очень с этим разобралась, поэтому не знаю, как это правильно применить - сколько выбрать колонок, например. Пробовала использовать flex, но он не кроссбраузерный. Помогите, пожалуйста.

Здравствуйте! Возникла такая проблема: при подключении jQuery UI в форме первое поля ввода автоматически устанавливается в автофокус. Как это можно убрать? Пробовала создавать скрытое поле и с display:none, но ничего не помогло.

Разобралась с Bootstrap, все оказалось совсем несложно. Теперь немного запуталась с медиа-запросами. Сверстала одну страницу на 1340px. Хотя понимаю, что основным CSS должен быть, все же под 960px, наверное ). У меня есть макеты на 1340px (для разрешений больше 1680px) и 960px. Bootstrap использует такие: @media (min-width: 1200px).container {width: 1170px;} @media (min-width: 992px).container {width: 970px;} @media (min-width: 768px).container {width: 750px;} Как мне грамотно прописать медиа-запросы под свои размеры? Размер .container должен быть на 30px больше, чем в макете, т.к. он указан с учетом свойства box-sizing:border-box.

Как же быть? Вообще не использовать Bootstrap?

А если у меня макет на 960px, шапка, да и все содержимое прижато к краям, т.е. нет отступов, то вот такая структура Bootstrap мне не подходит, потому что содержимое имеет ширину 930px и отступы по 15px с каждой стороны: <div class="container clearfix"> <div class="row"> <div class="col-md-6">... </div><!--/.col-md-6--> <div class="col-md-6">... </div><!--/.col-md-6--> </div></div>.container {width: 960px;margin: auto;padding: 0 15px;max-width: 1340px;}.row { ; margin-right: -15px;}.col-md-6 { width: 50%; float:left; padding: 0 15px;}Запуталась я совсем .

Я не закачиваю Bootstrap, я лишь хочу использовать его принципы. Интересная дискуссия развернулась! Данный макет не нагружен изображениями,он довольно простой, поэтому я решила верстать его от большего к меньшему. Это мой первый опыт адаптивной верстки , поэтому лучше пойду привычным путем , хотя я понимаю преимущества верстки от мобильного. На следующих проектах будем это уже учитывать.

Теперь возник еще один "подводный камень" в данном вопросе - какую верстку использовать в качестве базовой: для мобильных версий или для desktop? Bootstrap в качестве базовых стилей используется для маленьких разрешений. У меня есть 2 макета - на 960px и на мониторы более 1680px.- макет на 1340px. Привычнее для меня сначала верстать для desktop, тем более к мобильным версиям не такие жесткие требования у заказчика. А если еще и под IE8 - то ему надо отдельную таблицу стилей загружать.

del

Сейчас попробую. Должно получиться. Спасибо!

Нужно сверстать это: Это 3 колонки, в каждой будет текст. Я сверстала пока без кружочков, просто вертикальную черту в качестве border, но возникла проблема с разной высотой колонок. Может быть есть какие-то решения?

С обнулением отступов разобралась. Но первый и последний пункты все равно не выровнены по краям.

Спасибо всем! Кое-что уже прояснилось. Продолжаю работу ... Замечательно, что есть такой форум, куда можно обратиться и получить помощь!

Почему? А если у общего контейнера не будет padding, - то, что в .row будет шире и вылезет за пределы контейнера. Я хочу разобраться со всем этим на примере этого сайта: http://remtsoy.com/tf_templates/traveler/demo_v1_7/index-2.html Здесь есть .container с отступами слева и справа. И есть .row.

Да-да, я об этом и говорю: хочу это использовать. Тогда это нужно, чтобы контент не прилипал к краям? container{padding: 0 15px;} Насколько я поняла, .row полезно, например, в фотогалерее, когда у картинок есть отступы справа и слева, чтобы не обнулять, высчитывая кому надо, кому нет. Вот пример кода сетки где row просто не существует и ничего не распадается: main { float: left; width: span(4); margin-left: span(2) + gutter(); margin-right: gutter();}Даю вводную: 1 строка - 3 колонки, вторая строка - 4 колонки, 3 строка - 2 колонки. Как сделать без row? .row - это просто строка, обычный контейнер, так я понимаю? Хотя не обычный, если у нее есть отрицательные margin. Вот это я и хочу понять -когда нужно применять .row, а когда - нет.

Насколько я поняла, .row полезно, например, в фотогалерее, когда у картинок есть отступы справа и слева, чтобы не обнулять, высчитывая кому надо, кому нет.

А на этот вопрос ответьте,пожалуйста. Я просто хотел порекомендовать вот такую сетку. Но она не будет работать на Opera Mini, и для IE8 потребуется полифилл. Просто я считаю бутстраповскую сетку довольно архаичной, перегруженной и вообще неудобной. Полностью с вами согласен насчет бутстраповской сетки, я на susy сейчас пишу проект - красота, чистый html, но для susy нужен sass и еще желательно compass для вертикального ритма. А если на чистом css написать свои стили. чтобы блоки подстраивались под разрешения? Так же возможно? Я боюсь застрять на изучении новых методик. Этим займусь, когда будет свободное время.

Требований жестких нет. Просто стоит задача сделать адаптивным. А какие ньюансы могут быть? С бутстрапом насколько я знаю никаких ньюансов нету. Хороший фреймворк, можно полностью под себя переделать. Сейчас уже углубляться в Bootstrap нет времени. Я просто хочу использовать его основные принципы. Сайт довольно простой.

Требований жестких нет. Просто стоит задача сделать адаптивным. А какие ньюансы могут быть?

Под все современные браузеры +IE9 и выше. В IE8 - чтобы просто было все читабельно.

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

Похоже проблема была в обнулении паддингов: они неправильно применялись. <nav id="top"> <ul class="nav-menu"> <li class="sub-nav-menu"><a href="index.html" class="level_1">Услуги и цены</a> <ul> <li><a href="#">Хирургия</a></li> <li><a href="#">Терапия</a></li> <li><a href="#">Ортопедия</a></li> <li><a href="#">Пародонтология</a></li> <li><a href="#">Имплантология</a></li> </ul> </li> <li class="sub-nav-menu"><a href="about_us.html" class="level_1">Специалисты</a></li> <li class="sub-nav-menu"><a href="#" class="level_1">Новости</a></li> <li class="sub-nav-menu"><a href="#" class="level_1">Галерея</a></li> <li class="sub-nav-menu"><a href="#" class="level_1">О нас</a> <ul> <li><a href="#">Наши специалисты</a></li> <li><a href="#">Вакансии</a></li> <li><a href="#">Отзывы</a></li> <li><a href="#">Лицензия</a></li> </ul> </li> <li class="sub-nav-menu"><a href="contacts.html" class="level_1">Контакты</a></li> </ul> </nav>Как правильно обратиться к ссылке первого и последнего li верхнего уровня?Так: #top li.sub-nav-menu:first-child a.level_1{ padding-left:0; } #top li.sub-nav-menu:last-child a.level_1{ padding-right:0; }