Evkaky

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

Премного благодарен! Хотя, я так и не понял, почему это не работает, если контент-блоку тоже задать флоат, и почему это не работает на флексбоксах.

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

У вас там overflow: hidden; на контентном блоке (.main) А у меня, как я писал, в качестве контента будет широкая таблица (т.е непереносимый "символ", в отличии от текста) Таблица будет срезана: http://jsfiddle.net/uqw94/3/

Можно и без фиксированной высоты. Вам нужно, что бы все карточки товаров (.product) в одном ряде были одиннаковой высоты (а именно, высоты равной самой высокой карточке в текущем ряду). При этом, фиксированную высоту мы нигде не задаем! Например так: http://jsfiddle.net/W5BBu/ А хотя, в багнутом фаерфоксе мой вариант не работает. Если он вам нужен, то тогда, наверное, задание всем карточкам товаров фиксированной ширины намного оправданее.

Задача: Хеадер на всю ширину, сайдбар фиксированный 200px, контент-область (.main), котороя в ширину тянеться по контенту. Ну и футер, тоже на всю ширину. Никак не получается добиться того, что бы контейнер .cont в ширину тянулся строго по своему контенту (который определяется шириной .main) http://jsfiddle.net/uqw94/ В дальнейшем в контент-области (.main) у меня будет широкая таблица, и нужно что бы весь лейаут тянулся в ширь по этой таблице, как-то так (по каким-то причинам .main не хочет тянуться в ширь по своему контенту): http://jsfiddle.net/jTMU5/4/ P.S. на флоатах у меня это реализовать вообще не получается.

Как известно, ширина блока расчитывается внешним фактором - шириной родителя. А мне нужно, что бы ширна блока .outer тянулась по ширине дочернего блока .inner Добиться этого можно назначив блоку-родителю (т.е .outer) что-то одно из этого: 1) display: inline-block; 2) display: inline-flex; 3) float любой //не подходит, т.к. создаст лишний геморой. Мне нужно, что бы outer оставался в нормальном потоке 4) position: absolute; // тоже не подходит, т.к. вырывает из нормальнного потока. Все эти варианты заставляют блок-родитель тянуться вширь по своему контенту. Но они все какие-то не торт, особенно последние два. Может есть еще какие-нибудь решения, которыми вы хотите поделиться со мной?

Я боялся из-за того, что, контент на всех страницах будет подгружаться исключительно аяксом...

Хочется сделать всю навигацю на сайте без перезагрузок страницы но и так, что бы урлы в строке запроса менялись на соответствующие (аналогично на гитхабе, вконтакте, сайте ангулара). Ну вы поняли: при клике на любую ссылку из навигации делаю джаваскриптом (или dart'ом, если вы хипстер) как-то так: $("a").on('click', function(e) { e.preventDefault(); var pageName = $(this).attr("href"); window.history.pushState(null, "", pageName); navigateToPage(); // эта функция аяксом забирает контент страницы с урлом pageName});Так вот, что-то я не нашел в интернете ничего о сеошности таких страниц. Смогут их проиндексировать поисковики? По идее должны, т.к. эти страницы попадут в кэш истории, но фиг его знает.

Т.е. позиционировать свг можно только через центральную точку? Похоже, для более гибкого позиционирования свг, нужно позиционировать простые дивы, а уже внутри них рисовать свг, т.к. набор работающих стилей для свг-элементов (кроме корневого svg) очень ограничен. Хотя, странно это очень. Как-то же позиционируют люди элементы в том же иллюстраторе, значит должен быть способ позиционирования через свг. Ага, похоже оно там всё спец. атрибутами двигается/позиционируется, а цсс только для заливок.

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

Хочу сделать кнопку со скошенными сторонами. Казалось бы, .knopa { ​transform: skew(15deg);}идеально подходит для этого. Но...вместе со сторонами скашивается и сам текст кнопки, что, в общем-то, логично, но это не то, что мне нужно. Единственное, что приходит в голову - это сделать элемент-обертку для текста внутри кнопки и ему задать противположный skew, т.е. на -15deg, что бы уравновесить скос для текста. Но мне не нравится идея создавать лишний элемент каждый раз, когда нужно сделать скошеный элемент с нескошеным контентом. Что можете посоветовать? SVG? Или может в спецификации css уже есть модуль, для создания элементов любых (хотя бы, остроконечных) форм?

Так уж принято в интернете, что большинство источников передирают контент друг у друга, и как правило, не дополняя и не изменяя его. Вот я по запросу "как добавить фавикон" во многих источниках нашел одно и тоже: добавить вот это в хеад и всё: <link rel="icon" href="/favicon.ico" type="image/x-icon"><link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">Вопросы: 1) на кой их (тегов link) 2 штуки? (подозреваю, что вторая строчка нафиг ненужна) 2) в хтмл5 в <link> с нужным rel, который для фавиконки, можно не указывать type="image/x-icon"? 3) как я понял, фавиконку можно подсунуть в любом из 3 форматах: jpeg, png, ico, да?

Кароче, мой рецепт универсальной верстки для прижатого футера (только для фиксированной высоты футера) (все вышеприведенные примеры плохи, за исключением последнего http://jsfiddle.net/KVtt7/1/, но его автор не хочет рассказывать, почему оно так заработало). Итак, самое главное, это не вешать фон ни на html, ни на body. html,body { height: 100%;}/* не задавать тут ширину сайта! */#bg-wrap { position: relative; min-height: 100%; margin: auto; background: radial-gradient(#fff, blue) no-repeat;}.site-content { padding-bottom: 100px /* высота футера */}.main-foot { width: 100%; position: absolute; bottom: 0; height: 100px; background: yellow;}<div id="bg-wrap"> <div class="site-content"> content<br> content<br> END </div> <footer class="main-foot">FOOTER</footer></div>http://jsfiddle.net/yznV5/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim Разве не нативный?

Еще можно нативным методом, кода не больше, но должно быть быстрее: var val = $('#id').val().trim();if (val) {}

Ваша проверка посчитает заполненым поле, в которое введен пробел(ы). Думаю, это не то, что нужно в большинстве случаев.

Абсолютно аналогично. Допустим, нужно добраться до <span>child_child</span> <div id="parent"> <div class="child"></div> <div class="child"> <span>child_child</span> </div> <div class="child"></div></div> document.querySelector('parent').children[1].children[0] // это <span>child_child</span>. Набор всех детей детей будет в document.querySelector('parent').children[1].children

a[0].children // тут будет обьект (не array!) со всеми дочерними элементами-тегами. Обьект этот с числовыми ключамиСоответсвенно, за первым элементом обращаешься так: a[0].children[0]И да, первая строчка у тебя абсолютно лишняя. Только если уберешь ее, не забудь var прифигачить на вторую строчку.

Опа, это как? Вы решили проблему, навесив точно такой же фон и на html. Одиннаковый фон на body и на html. И оно работает. Но я не понимаю, почему оно вдруг заработало от этого. Магия какая-то

Делаем много контента и смотрим что получается:http://jsfiddle.net/KVtt7/ Если там сделать мало контента начинаются бока.

Совсем не то. Сделайте малое кол-во контента. Оставтье только 2 строчки: text<br> END и посмотрите, что будет. http://jsfiddle.net/37KH9/

Тема избитая, но что-то никак не получается. Как я рассуждаю: 1) самый Ъ способ прижать футер к низу - это сделать его абсолютно спозиционированным относительно body и прописать ему bottom: 0 (это если не вдаваться в детали). А для этого нужно что бы html и body, при малом колве контента были распахнуты на весь экран, а при большом - тянулись. 2) высота html, как и любого блочного элемента рассчитывается по контенту. Если контента мало, то нужно распахнуть высоту html по высоте области просмотра (viewport, на весь экран, короче), но так, что бы когда контента станет больше, высота html начала тянуться по контенту. Это очень просто: html { min-height: 100%;}3) Тоже самое нужно сделать и с body. Нужно что бы он точь-в-точь повторял высоту html. И тут начинается кошмар. Известно, что высота в % будет работать только если у элемента-родителя задана фиксированная высота (исключение - если дочерний элемент с position: absolute, то тогда для него будет работать высота в %, даже если у родителя не задана фиксированная высота), а min-height не считается фиксированной высотой. Следовательно min-height: 100% на теге body не будет иметь абсолютно никакого эффекта. И всё, тупик, безысходность. Что же делать? http://jsfiddle.net/8PsDx/ Точнее, вот: http://jsfiddle.net/75upz/1/

А если закрыть глаза на фокс. Всё равно флексбоксы не подходят для простой верстки равномерной плиточной структуры с неполным последним рядом?

Казалось бы, реализовывать с помощью флексбоксов галереи или карточки товаров должно быть намного более удобно, чем через флоаты или инлайн-блок. Но вот мне так и не удолось добиться того, что бы красные плитки шли одна за другой, а именно, что бы не было пустого места между 7 и 8 плиткой ( а это, как раз, типичная модель галереи или карточек товаров должна получиться ) http://jsfiddle.net/3zkAf/ Что же делать?