Jump to content

Светлана Г.

User
  • Posts

    463
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by Светлана Г.

  1. Принципиально использовать .container-fluid? У меня используется .container.
  2. А можете структуру набросать? Резиновые колонки - это не проблема. Проблема разместить их так, как в макете.
  3. Метод есть в jQuery называется .focus() надо найти откуда он приходит. Там минимизированный файл. Трудно разобраться. а можно просто своим скриптом его отменить?
  4. Ну чтобы структура сохранялась. Мне надо кроссбраузерно везде. А причем здесь class="container-fluid" ? Он чем может помочь?
  5. Здравствуйте! Есть такой блок: Сверстать нужно адаптивно. Данный вид для ширины 1340px. Обращаю внимание на то, что заголовок выровнен со средней колонкой по левому краю. На крайний случай, для выравнивания заголовка буду использовать это: #title:before{ content:'Наши услуги:'; display:inline-block; font-size:30px;}Я использую стили Bootstrap. Может быть, здесь подойдет что-то вроде .col-lg-offset-* . Я не очень с этим разобралась, поэтому не знаю, как это правильно применить - сколько выбрать колонок, например. Пробовала использовать flex, но он не кроссбраузерный. Помогите, пожалуйста.
  6. Здравствуйте! Возникла такая проблема: при подключении jQuery UI в форме первое поля ввода автоматически устанавливается в автофокус. Как это можно убрать? Пробовала создавать скрытое поле и с display:none, но ничего не помогло.
  7. Разобралась с 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.
  8. А если у меня макет на 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;}Запуталась я совсем .
  9. Я не закачиваю Bootstrap, я лишь хочу использовать его принципы. Интересная дискуссия развернулась! Данный макет не нагружен изображениями,он довольно простой, поэтому я решила верстать его от большего к меньшему. Это мой первый опыт адаптивной верстки , поэтому лучше пойду привычным путем , хотя я понимаю преимущества верстки от мобильного. На следующих проектах будем это уже учитывать.
  10. Теперь возник еще один "подводный камень" в данном вопросе - какую верстку использовать в качестве базовой: для мобильных версий или для desktop? Bootstrap в качестве базовых стилей используется для маленьких разрешений. У меня есть 2 макета - на 960px и на мониторы более 1680px.- макет на 1340px. Привычнее для меня сначала верстать для desktop, тем более к мобильным версиям не такие жесткие требования у заказчика. А если еще и под IE8 - то ему надо отдельную таблицу стилей загружать.
  11. Сейчас попробую. Должно получиться. Спасибо!
  12. Нужно сверстать это: Это 3 колонки, в каждой будет текст. Я сверстала пока без кружочков, просто вертикальную черту в качестве border, но возникла проблема с разной высотой колонок. Может быть есть какие-то решения?
  13. С обнулением отступов разобралась. Но первый и последний пункты все равно не выровнены по краям.
  14. Спасибо всем! Кое-что уже прояснилось. Продолжаю работу ... Замечательно, что есть такой форум, куда можно обратиться и получить помощь!
  15. Почему? А если у общего контейнера не будет padding, - то, что в .row будет шире и вылезет за пределы контейнера. Я хочу разобраться со всем этим на примере этого сайта: http://remtsoy.com/tf_templates/traveler/demo_v1_7/index-2.html Здесь есть .container с отступами слева и справа. И есть .row.
  16. Да-да, я об этом и говорю: хочу это использовать. Тогда это нужно, чтобы контент не прилипал к краям? 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, а когда - нет.
  17. Насколько я поняла, .row полезно, например, в фотогалерее, когда у картинок есть отступы справа и слева, чтобы не обнулять, высчитывая кому надо, кому нет.
  18. А на этот вопрос ответьте,пожалуйста. Я просто хотел порекомендовать вот такую сетку. Но она не будет работать на Opera Mini, и для IE8 потребуется полифилл. Просто я считаю бутстраповскую сетку довольно архаичной, перегруженной и вообще неудобной. Полностью с вами согласен насчет бутстраповской сетки, я на susy сейчас пишу проект - красота, чистый html, но для susy нужен sass и еще желательно compass для вертикального ритма. А если на чистом css написать свои стили. чтобы блоки подстраивались под разрешения? Так же возможно? Я боюсь застрять на изучении новых методик. Этим займусь, когда будет свободное время.
  19. Требований жестких нет. Просто стоит задача сделать адаптивным. А какие ньюансы могут быть? С бутстрапом насколько я знаю никаких ньюансов нету. Хороший фреймворк, можно полностью под себя переделать. Сейчас уже углубляться в Bootstrap нет времени. Я просто хочу использовать его основные принципы. Сайт довольно простой.
  20. Требований жестких нет. Просто стоит задача сделать адаптивным. А какие ньюансы могут быть?
  21. Под все современные браузеры +IE9 и выше. В IE8 - чтобы просто было все читабельно.
  22. Задача сверстать адаптивный сайт. Практического опыта верстки адаптивного дизайна у меня нет. Поэтому хотелось с вашей помощью разобраться и определиться, каким путем идти. Решила использовать принципы Bootstrap. Возникли принципиальные вопросы. .row {margin: 0 -15px;;} .container {padding: 0 15px;margin: 0 auto;}Объясните, пожалуйста, зачем сначала добавлять паддинги, а потом помещать содержимое в .row, у которой нивелируются эти отступы. Каково назначение .row вообще?
  23. Похоже проблема была в обнулении паддингов: они неправильно применялись. <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; }
×
×
  • 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