Бутстрап - проблема с меню

[Zverushka]

Вот пытаюсь реализовать меню.

Обычное меню. справа от него на той же строке есть блок с заказом звонка.

При уменьшении разрешения появляется название сайта и иконка для разворачивания меню.

 

Проблема в том. что в определенном узком разрешении развернутого меню не видно на экране вообще - оно куда-то вбок уходит. При этом в файрфоксе (в хроме вроде норм).

Что я делаю не так? Все ли правильно  в разметке навигации? http://zverushka.zz.mu/edu/

Edited December 7, 2013 by Zverushka

[swandev]

У меня вообще все поехало...

http://joxi.ru/lpCiUtg5CbBpCpcC8_g

 

Я бы по другому как-то реализовал.

<header role="banner">    <div class="container">        <div class="row">            <div class="col-md-8 col-sm-6">                <!--обычный navbar-default-->            </div>            <div class="col-md-4 col-sm-6">                <!--обратный звонок-->            </div>        </div>    </div></header>

Edited December 7, 2013 by ALEEX SWN

[Z1gnet]

Что я делаю не так? Все ли правильно в разметке навигации?

нет, разметка не правильная.

с сайта бутстрапа

    <div class="navbar">    <div class="navbar-inner">    <div class="container">         <!-- .btn-navbar is used as the toggle for collapsed navbar content -->    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">    <span class="icon-bar"></span>    <span class="icon-bar"></span>    <span class="icon-bar"></span>    </a>         <!-- Be sure to leave the brand out there if you want it shown -->    <a class="brand" href="#">Project name</a>         <!-- Everything you want hidden at 940px or less, place within here -->    <div class="nav-collapse">    <!-- .nav, .navbar-search, .navbar-form, etc -->    </div>         </div>    </div>    </div>

почитайте на их сайте, там все подробно расписано. http://bootstrap-ru.com/components.php#navs   вам нужен  Динамический Navbar

[swandev]

 

Что я делаю не так? Все ли правильно в разметке навигации?

нет, разметка не правильная.

с сайта бутстрапа

    <div class="navbar">    <div class="navbar-inner">    <div class="container">         <!-- .btn-navbar is used as the toggle for collapsed navbar content -->    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">    <span class="icon-bar"></span>    <span class="icon-bar"></span>    <span class="icon-bar"></span>    </a>         <!-- Be sure to leave the brand out there if you want it shown -->    <a class="brand" href="#">Project name</a>         <!-- Everything you want hidden at 940px or less, place within here -->    <div class="nav-collapse">    <!-- .nav, .navbar-search, .navbar-form, etc -->    </div>         </div>    </div>    </div>

почитайте на их сайте, там все подробно расписано. http://bootstrap-ru.com/components.php#navs   вам нужен  Динамический Navbar

 

 

На сайте старая инфа.

 

у бутстрапа уже 3 верия

[Z1gnet]

тоже верное. просто я с бутстрапом работаю в связке с Yii и программисты пока не хотят внедрять 3ю версию. на то у них есть свои причины))

а выпадающее меню уходит вбок потому что navbar-header флотнуто и .... и вообще опять же, структура не та. у бутстрапа есть своя навигация застайленая. зачем вы все ручками пишете? вам нужно использовать заготовки которые уже потом немного переделать (в соответствии с дизом). в том то и смысл использовать бутстрап, что по максимуму юзать их компоненты. да это не всегда удобно и бывает легче самому напедалить. но если просят бутстрап, то нужно по максимуму юзать бутстрап. я вначале сильно плевался на него, но потом когда разобрался с ним, понял что не так все плохо. 

навигацию посмотрите здесь http://getbootstrap.com/components пункт "Navbar" (да, я знаю что я Кэп)

Edited December 7, 2013 by Z1gnet

[Zverushka]

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

А я, не имея опыта, даже не могу ответить на такие запросы - "вы что сума сошли - это же невозможно, макет не создан для бутстрапа" - я без понятия, можно ли применять какие макеты под него. а какие нельзя.

По сути мне от него нужна только адаптивность для макета. Кстати вы не подскажете - насколько верстка под бустрап должна стоить дороже обычный верстки? (в процентах).

 

С контактами проблема - ширина кнопки должна быть равна ширине текста, поэтому ей подходит только чистый флоатный стиль.. В общем надо сделать чуть-чуть нестандартно и уже вылазит куча проблем, мммм... это меню меня доканывает...

Ну и я для тренировки беру уже сделанный сайт и переделываю его на бутстрап - это конечно немного неправильно - проще переделывать бустрап под дизайн, чем наоборот.

Пока что я выкрутилась вот так c меню  http://zverushka.zz.mu/edu3/ Блин, в хроме на новой строке ссылка, а в файрфокс нормально. РРррр.... блин, что я делаю не так? Просто уже сама бы 10 раз сверстала, а тут у меня все время что-то не получается, не создание сайта, а сплошное страдание.

Если честно меня веселит. Сколько раз я читала - что нужно избавляться от лишних оберток, что вертальщик - пихающий кучу блоков - это просто неудачник, который пытается делать табличную верстку. И тут же смотрю авторы не стесняются оборачивать все лишними блоками.

Edited December 7, 2013 by Zverushka

[swandev]

Если честно меня веселит. Сколько раз я читала - что нужно избавляться от лишних оберток, что вертальщик - пихающий кучу блоков - это просто неудачник, который пытается делать табличную верстку. И тут же смотрю авторы не стесняются оборачивать все лишними блоками.

А как-же БЭМ?

 

перенос последнего пункта в хроме решилось отключением вот этого свойства

http://joxi.ru/0DijUtg5CbBcbPyqIWM

[Zverushka]

А когда я сужаю окно браузера - по высоте меню становится больше - тогда оно налазит на основной контент (так как меню fixed для боди стоит padding-top ) в итоге меню переркывает основной контент. Как с этим бороться?

Получается мне надо форму со звонком разместить на одной линии с иконкой всплывающего меню.

Edited December 8, 2013 by Zverushka

[Zverushka]

Вот я смогла сделать только вот так.

Как сделать, чтобы при сужении окна - меню открывалось ниже, а не сверху?...  http://zverushka.zz.mu/edu4/

По идее бустрап должен при сужении ставить clear:both и все бы получилось, но он не ставит - может неправильная разметка?

Edited December 8, 2013 by Zverushka

[swandev]

тегу nav добавить класс col-xs-12

А в тот момент когда последний пункт перескакивает на вторую строку, с помощью media quaries поставить li  float:none, чтобы красиво смотрелось)

Edited December 8, 2013 by ALEEX SWN

[Zverushka]

Извини, уже сделала по-другому и работает (без медиа запросов - пришлось копать код и разбираться, что делают классы и как реагируют на разрешение экрана (вот блин - ну почему нельзя было сделать нормальную документацию? бесит страшно).

Вот так получилось http://zverushka.zz.mu/edu5/ И теперь опять в хроме проблема - шрифты почему-то криво выглядет и почему-т опять же контакты ужались по не содержимомму будто, а сильнее - текст переносится на новую строку. Блин, а я думала, что все решила - ну почему так?

В файрфоксе нормально все опять же..

Edited December 8, 2013 by Zverushka

[swandev]

Извини, уже сделала по-другому и работает (без медиа запросов - пришлось копать код и разбираться, что делают классы и как реагируют на разрешение экрана (вот блин - ну почему нельзя было сделать нормальную документацию? бесит страшно).

Вот так получилось http://zverushka.zz.mu/edu5/ И теперь опять в хроме проблема - шрифты почему-то криво выглядет и почему-т опять же контакты ужались по не содержимомму будто, а сильнее - текст переносится на новую строку. Блин, а я думала, что все решила - ну почему так?

 

У бутстрапа вроде отличная документация)

 

Вот из этого варианта  http://zverushka.zz.mu/edu4/ , сделай как я написал и не будет проблем

http://joxi.ru/n46kUtg5CbBKNwXTg88

Edited December 8, 2013 by ALEEX SWN

[Zverushka]

В твоем варианте не появляется горизонтальной полосы.

Получается edu5 по разметке более правильный - только непонятно, почему телефон на новую строку в хроме перескакивает - кто-нибудь может объяснить?

 

А в документации не написано, что например navbar-header изначально float: left, а при меньшем разрешении обтекание убирается и за счет этого - меню перескакивает на новую строку.

margin: 7px 1% 0 0; - если убрать, то нормально все - ну почему?

Все, я разобралась - родитель float: right  из-за этого, блин...

Edited December 8, 2013 by Zverushka

[swandev]

О какой полосе ты говоришь?

[Zverushka]

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

http://zverushka.zz.mu/edu6/

http://zverushka.zz.mu/pasport/

 

В обычной версии сайта шрифты ровные - в обоих случаях шрифты одинаковые. Если в обычной версии сайта кривые - попробуйте пообновлять окно и подвигать его (со 2го 3го обновления становятся нормальными - будто кривой кэш удаляется, если же изначально открывать этот сайт первым - то шрифты нормальные изначально).

О какой полосе ты говоришь?

а да, у тебя тоже она есть.

 

Вроде сейчас уже шрифты, как на 3 раза все обновила - стали нормальными. Пока не могу добиться повторения глюка со шрифтом.

Кстати .nav - просто дает оформление, похожее на кнопки или что-то еще? Я просто не пишу и вроде все нормально, а в пример .nav прописан.

Edited December 8, 2013 by Zverushka

[swandev]

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

http://zverushka.zz.mu/edu6/

http://zverushka.zz.mu/pasport/

 

В обычной версии сайта шрифты ровные - в обоих случаях шрифты одинаковые. Если в обычной версии сайта кривые - попробуйте пообновлять окно и подвигать его (со 2го 3го обновления становятся нормальными - будто кривой кэш удаляется, если же изначально открывать этот сайт первым - то шрифты нормальные изначально).

О какой полосе ты говоришь?

а да, у тебя тоже она есть.

 

Вроде сейчас уже шрифты, как на 3 раза все обновила - стали нормальными. Пока не могу добиться повторения глюка со шрифтом.

Кстати .nav - просто дает оформление, похожее на кнопки или что-то еще? Я просто не пишу и вроде все нормально, а в пример .nav прописан.

 

Отступы, маркеры у списков убирает, ссылкам display: block;

navbar-nav float для li делает, и т.д

 

Все что нужно

Edited December 8, 2013 by ALEEX SWN

[Zverushka]

http://zverushka.zz.mu/edu7/

Почему блок с формой не выравнивается по центру? и center-block стоит и при этом даже в родном стиле m: 0 auto а прижмается к левому краю почему-то

[swandev]

http://zverushka.zz.mu/edu7/

Почему блок с формой не выравнивается по центру? и center-block стоит и при этом даже в родном стиле m: 0 auto а прижмается к левому краю почему-то

Потому что col-*-8 везде, нужно offset поставить, в данном случае col-md-offset-2 (sm и xs для меньших размеров) выравняет по центру

Чтобы margin заработал, нужно float убрать

а у бутстрапа он всем колонкам как left ставится

Edited December 8, 2013 by ALEEX SWN

[Zverushka]

Достаточно прописать .col-sm-8 и не нужно прописывать .col-md, .col-lg?

[swandev]

Достаточно прописать .col-sm-8 и не нужно прописывать .col-md, .col-lg?

 

Вообще сейчас форме бесполезно давать эти классы, т.к у нее уже стоит  width 574

 

Эти классы лишь задает ширину, и в зависимости от размера экрана меняют ее

​

[Zverushka]

И вот я наверное дошла до самого животрепещущего вопроса. 

Вот у этого блока дизайнер нарисовал картинку - паспорта. Как ее сделать адаптивной?

http://zverushka.zz.mu/edu8/

 

При сильном сужении Заголовок оказывается на фоне паспортов и теряется - по хорошему нужно. чтобы заголовок оставался на темном фоне. Да и у картинки при растягивании появляются искажения...

[swandev]

класс img-responsive делает картинку адаптивной

[Zverushka]

Но это ведь не картинка - а background

[swandev]

Тогда 

background-size: 100% auto;

[Zverushka]

Я так и сделала, только наоборот auto 100% (потому что иначе тогда внизу картинка обрезается и видна резкая граница при переходе к обычному ровному фону.

Вот и получается, что заголовок при маленьком разрешении оказывается на фоне паспортов - и теряется на нем. По сути дизайн ломается как бы.

[swandev]

Ну с макетами которые не продумывались для адаптивности, приходится как-то выкручиваться, например убрать бекграунд

http://joxi.ru/KKakUtg5CbDnRvxsw9g  мне кажется, красиво выглядит