maxakagaret

Вы не правы. Таблицы прекрасно справятся с этой задачей, но тогда вам надо будет отказаться от бутстрапа, точнее от его грида.

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

А за указание на флекс и грид - спасибо.

почему? что мешает под 320 отменить данное правило?

отсутствие знаний, как это сделать =)

http://htmlbook.ru/blog/4-metoda-sozdaniya-kolonok-odinakovoy-vysoty

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

display: table; или таблица, flex, grid. Выбирайте, что вам больше по душе. Правда не знаю как это с бутстрапом объединить, он не рассчитан на дизайнеров-совков, которые до сих пор одинаковые по высоте колонки лепят где попало.

А что означает "дизайнер-совок"? Если вы ссылаетесь на советский союз, то вы серьезно ошиблись - дизайнер европеец.

И не могли бы ва поподробнее объяснить про flex и grid, если вас не затруднит.

P.S. вариант с display:table не приемлем (в силу того что не подходит для 320 пикселей), таблицы тоже.

Приветствую профессионалов и новичков html/css

Столкнулся со старой проблемой - как растянуть див по высоте родителя. Не кидайте в меня тапком и не отсылайте в гугл, ибо моя проблема несколько отличается от привычной. В верстке я использовал bootstrap, а конкретнее колоночную верстку (col-lg, col-md, col-sm и так далее).

Выглядит это так:

Как можно заметить, левая колонка не дотягивает до низу. Точнее не дотягивает полупрозрачный коричневый фон. И все бы ничего, можно было бы использовать старый добрый "margin-bottom:-6000px; padding-bottom:6000px;", но при разрешении экрана 320/480 (читай смартфон) колонки встают друг за другом по вертикали, вот так:

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

Есть ли решение для данного случая - то есть, чтобы блок тянулся по вертикали до нижнего края родителя или до следующего блока.

disabled на все <option> кроме нужной?

Этот вариант сработал, спасибо.

disabled на <option>?

Результат тот же, что и при disabled на select

readonly?

Нет. Тем более что этого аттрибута у селекта нет.

Приветствую профессионалов и новичков.

Столкнулся со следующей проблемой - как заблокировать изменение select при этом сделав его видимым в массиве $_POST. Аттрибут disabled для этих целей не подходит.

Вывод - всегда проверять с реальных устройств! Вывод2 - не используйте meta viewport если вы не уверены на все 100% что вы делаете!

По-моему это крайне логично. =)

 

спорное решение, ибо некорректно работающее. На смартфоне, планшетнике и любом девайсе с дисплеем < 938px (почему такой размер у врапа - непонятно) сайт-пример отображается некорректно.

 

Можно вопрос на какой планшете пробовали? (Просто на всех смартфонах, которые у меня есть все нормально) Нужно для внесения изменений или исправления ошибок.

 

Конечно. Планшет IPAD второй, смартфон самсунг (какой - не знаю, пользовался чужим) и, наконец, сочетание коавиш Shift+Ctrl+M в Firefox

Я использую HTMLScale http://www.cms-sd.ru/stati/javascript_i_jquery/htmlscale_mashtabirovanie_stranici_pod_shirinu_ekrana

спорное решение, ибо некорректно работающее. На смартфоне, планшетнике и любом девайсе с дисплеем < 938px (почему такой размер у врапа - непонятно) сайт-пример отображается некорректно.

To EAGames. Нашел ошибку в вашей верстке. Вы для многих эдементов задаете явную ширину. Для адаптивной верстки это недопустимо. Пользуйтесь свойствами max-width, min-height и иже с ними

Могу посоветовать вам механизм 12-колоночной верстки с использованием Bootstrap. Кроме того <meta name="viewport" content="width=device-width, initial-scale=1.0"> все-таки стоит оставить. Могу предположить, что не дает уменьшаться класс container в <div class="C"><div class="container">. Но скорее всего не только он.

 

Например

......

Благодарю.

Приветствую профессионалов и новичков верстки.

Столкнулся на днях со проблемой использоапния шрифтов на сайте. Прежде активно пользовался гугловским сервисом, однако последнее время стали наблюдаться перебои в его работе и в итоге на странице текст отображается шрифтом по умолчанию, что никак не устраивает (это я еще молчу про время, которое требуется из-за этого на открытие страницы). Поэтому появилась необходимость отказаться от гугла и грузить шрифт с сервера. Вот тут и появилась сложность. К примеру шрифт Dosis. У него различные начертания (Dosis-Book, Dosis-Medium, Dosis-Light, Dosis-SemiBold ...) расположены в разных файлах. Когда шрифт подключался через гугл, то использовалось только имя шрифта, а начертание задавалось при помощи font-weight (например, для Dosis Medium font-wieght:500, для Dosis-Semibold font-wieght:600). Можно ли подключить этот шрифт без гугла так же под именем Dosis, и очертание задавать font-weight'ом при помощи средств HTML/CSS или, в крайнем случае, JS. Или же можно сам шрифт объединить в один файл?

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

Еще раз спасибо за предложеное решение. После некоторых модификаций прекрасно встало на шаблон.

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

Спасибо, хорошее решение. Правда совместимость несколько хуже, чем у border-radius.

 

 

Но все же остается вопрос о позиционировании

 

http://jsfiddle.net/3wZ9y/2/

 

Как Вам такой способ?

Неровно получается.

Можно вставить блок с изогнутой нижней частью (есть же разные фигуры на css http://habrahabr.ru/post/126207/) между этими тремя кружками и заголовком. Чуть приподнять его еще, а кружки поставить слоем выше.

Но имхо, проще картинкой.

Спасибо за статью, почерпнул там интересную и полезную информацию. Однако проще - не значит лучше. Подгружать картинку 1500х300 для фона - не лучшее решение для оптимизации сайта. Но все же остается вопрос о позиционировании - насколько мне известно центрировать плавающий блок по центру так же, как фон (left:center), нельзя.

Так братишка это совсем другое. Вот если решение найдется, тогда соглашусь что "ирония" не уместнa.

Без фамильярностей, пожалуйста. Решение состоит в том, чтобы div с абсолютным позиционированием позиционировать по центру родителя.

 

Как я указал в описании проблема в том, что я пытаюсь найти решение с использованием именно html/css.

Отпишешь тут через пару лет, думаю решение найдешь)

 

Ваша "ирония" неуместна. Советую обратить внимание, например, на http://htmlbook.ru/blog/golosovanie-za-luchshee-izobrazhenie

Или попроще http://htmlbook.ru/blog/treugolniki-cherez-css

Ну а если сделать блок красным цветом, ниже блок с тремя этими кнопками и марджином вверх их поднять (задать z-indeх, чтобы нижний блок перекрывал верхний)?

Видимо, я неточно изложил суть проблемы. Сложность заключается именно в нижней части фона - которая изогнута. Решение, конечно есть - фоновый рисунок с позиционированием по центру, но интересно именно html/css решение.

Не пойму в чем проблема. Вырезал в фотошопке, и прилинковал к боди.

Как я указал в описании проблема в том, что я пытаюсь найти решение с использованием именно html/css.

Привествую профессионалов и новичков вкрстки.

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

Верстка резиновая и с ней как таковой проблем нет, чего не скажешь о фоне

Вот такой вот борк должен быть на главной странице.

И как это сдедать с помощью HTML/CSS - я понять не могу.

Решение с JS имеется, но прежде чем его применять, хотелось бы удостовериться что без JS не обойтись.

Еще раз подмечу, что верстка резиновая.

А вариант с двумя заголовками не прокатит?

 

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

 

интересно, минус за правильный ответ Оо

 

У кого-то просто комплекс неполноценности)бывает

 

Действительно. Хотя может мимо правильной кнопочки кто-то промахнулся...

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

ну как-то так

 

UPD: по стилям сами скорректируете потом) я просто саму суть показала

Все гениальное просто =)

Спасибо большое за помощь.

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

Приветствую профессионалов и новичков верстки.

На днях столкнулся с задачей, оказавшейся для меня необоримой.

Все, я полагаю, знают кнопочку в роде со значком маркера-фломастера, который выделяет цветом текст, причем если выделены две строки, то между полосками цвета имеется зазор, что и отличает \ту кнопочку от кнопочки "заливка фона".

Вот с такой задачей и столкнулся. Имеется текст в тэге h2. На экране он отображается в две строки, причем вторая строка короче первой. Нужно сделать как раз такой эффект как в Ворде - фон должен быть залит цветом, между строками должен быть прозрачный зазор. Использоавание заливки картинкой png с repeat не удовлетворяет требованияй, ибо во второй строке заливка распространяется на всю долину, а надо, чтобы только на длину текста во второй строке.

Сделать нужно именно на html/css без js и текст должен располагаться в одном тэге

Картинка, как должно быть, прилагается.

Буду признателен за любую помощь (кроме советов прибить дизайнера =) )