Z1gnet

а может вы ссылку на сайт дадите? так вам быстрее подскажут

отклеевающегося меню

это что?

ну именно в вашем случае нужно задать .ImgField{position:relative;} и все будет норм.

чего вы боитесь медиа запросов?

что правила применяются "сверху вниз", а не наоборот.

вместо max-width используйте min-width в запросах. и еще совет, забудьте про табличную верстку

display: inline-block; float: left;

бессмысленно задавать эти 2 свойства, либо одно, либо другое.

ну вам тут нужны медиа запросы. с помощью них вы сможете задать необходимые стили при ширине выше 1400рх

пропустили.

спасибо за внимательность. правда я этот код не набирал, взял код @Chupachups, и подправил стили

не совсем понятно у кого не срабатывает марджин/паддинг. если речь идет о ссылке, отступ не работает потому что для инлайновых элементов верхние и нижние отступы не отрабатывают. элемент нужно либо флотнуть, либо дисплей блок задать, либо дисплай инлайн-блок. можно еще дисплей тейбл заюзать. в вашем случае лучше все подойдет инлайн-блок.  http://prntscr.com/29vi4o

я так понял что не про текст в текстарии (тавтология блин)

http://codepen.io/anon/pen/gkznq вот решение

легко через overflow:htdden http://codepen.io/anon/pen/BhFDL

а не задавать float зеленому блоку пробовали?

а если не задавать, бордер подлезет под левый блок

Попробуйте не width:510px , а min-width:510px; Думаю эта проблема будет решена.

и толку? блок растянется на 100% так как он блочный.

ну естественно что желтая кнопка поднимается вверх. и дело тут не в отмене обтекания, а в том что кнопка видит свободное пространство сверху и туда становиться (как если бы красный блок был инлайн-блочный). просто оберните красный блок в див  и дайте ему overflow:hidden.  Либо желтую кнопочку оберните в див и дайте ей clear:both, ну или либо как вы написали про див clear.

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

Для этого я указал 510px ширины и задал блоку margin:0 auto;

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

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

навигацию, к примеру, можно было сделать так - http://codepen.io/anon/pen/vrhuq

хех) пока делал чаёк посетила мысля. Оказывается всё намного проще, чем я думал) Нужно было сделать обвертку с нужной шириной ( в моём случае это 940 px) и задать ей padding-left:50%; width:370px; (что в сумме составило 940px), а после указать .footer .contact ; и убрать значение width

воу воу воу... палехче... что то тут у вас все слишком сложно. на самом деле все гораздо проще!

/* это все стили которые вам нужны для .footer .contact остальные можно смело удалить, он не нужны*/.footer .contact {    color: #FFFFFF;    text-align: center; /* центрируем содержимое */}.footer .contact div {    display: inline-block; /* делаем не float, а инлайн-блок и тогда центрирование родителя будет работать */    vertical-align: middle;}

итог: блоки отцентрированы, структура предельно простая, работает в ие8+ (ие7 не понимает, для него нужно через развилку задать display:inline;) и ничего не падает когда крутим колесико )))

А последняя строка не перебьёт собой первую во всех случаях, независимо от поддержки rgba? Такая штука, насколько я помню, срабатывает только с префиксными записями.

"да ты успокойся! я так сто раз делал" (с)

а если серьезно то не перебьет, потому как ие8 попросту не поймет строки с rgba. так что полностью солидарен со @Zverushka

и кстати, когда градиент прописываете что первой строкой идет? правильно обычный background формата background:#f00; а уж потом развилки для всевозможных браузеров.

Сейчас главное, чтобы список второго столбца автоматически переходил вправо, если пункты не влазят в заданную высоту

еще раз говорю, вы тут не правы. не так у вас должно работать, вы все слишком пытаетесь усложнить! @Radiocity, все правильно написал, сделайте по типу как он выложил тут

http://jsfiddle.net/fyT7z/

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

конечно скрывать. ну вас есть значек твиттера, но текста же не предусмотрено дизом, значит его и не должно быть видно. но для сео это важно. я скрываю через text-indent: -9999px; overflow:hidden;

что то я не понял что вы хотите получить. можно скрин?

Проблема в том, что пункты меню должны работать по приницпу, "что не влезло по высоте, то переходит направо"

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

nouislider

плюсую. отличная вещь

Одно дело вставить картинку с твиттера и написать "подписывайтесь на наш твиттер". Другое дело скрыть текст и оставить логотип твиттера. Здесь пользователь видит логотип твиттера, но не видит надписи. Является ли это обманом? С точки зрения робота

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

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

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

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

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

ну тут же написано "с целью повлиять на рейтинг сайта в результатах поиска Google". на сколько мне известно имеется ввиду, то что вы натулите ЛЕВОГО текста для раскрутки сайта, тем самым введете поисковик и пользователя в заблуждение. но предположим что у вас есть навигация где мудрений шрифт и вы решили вставить его картинками. то в этом случае если на картинке написано "about" то вы ссылку вставляете слово "about" и скрываете его через цсс, тем самым вы никого не обманули, а наоборот, внесли ясности (гугл же вряд ли будет считывать что же за текст нарисован на картинке). + если отключить цсс то будет видна нормальная навигация, + это к web accessibility. в вашем случае если на лого есть некий текст, то вы смело можете его писать в ссылке и прятать. вот если бы вы туда всунули что то типа "скачать бесплатно фильмы ...." (не знаю как там нехорошие люди пишут), то это было бы обманом и нарушением рекомендаций гугла.

если в чем ошибся или мои данные уже устарели буду рад если кто поправит)))

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

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

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

    <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