Как сделать динамический div

Умная адаптация ширины блочных элементов на чистом CSS 2.0

Верстая очередной проект (или ещё только проектируя макетную сетку) многие сталкивались с дилеммой — использовать фиксированную ширину макета или «резиновую» сетку, адаптируемую под размер окна браузера.

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

Фиксированная ширина макетной сетки

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

«Резиновая» макетная сетка по ширине окна

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

Хочу предложить нехитрый вариант решения — ограничить минимальный горизонтальный размер фиксированным значением в пикселях, а максимальный сделать относительным в процентном соотношении к ширине окна. Это очень банально решается простыми средствами ещё 2 версии спецификации CSS.

Update: Хочу оговориться, что речь не идёт о классическом эффекте резины и об адаптации под абсолютно все разрешения, скорее лишь про некий разумный диапазон разрешений, под который проектируется макет. В примерах ниже — это классический десктопный диапазон разрешений с горизонтальным габаритом разрешения от 1024 пикселей.

Ещё раз акцентирую внимание: в посте не идёт речь про решение для всех видов устройств и все диапазоны разрешений. В рамках одного макета эта задача не решаема в принципе, для её решения так или иначе потребуется несколько макетов. Мухи отдельно, котлеты отдельно.

Создаём контейнер макета:

Оформляем его незатейливым кодом стиля:

Однако этого решения кому-то может показаться мало в силу того что при очень больших горизонтальных размерах окна опять проявляются проблемы с длиной строк. Это решается настолько же простым дополнительным приёмом: создание дополнительного внешнего контейнера внутри уже описанного и ограничение его максимальной ширины фиксированным значением (мне субъективно кажется, что лучше всего подходят значния в диапазоне 1400—1600 пикселей). Опять же используем лишь средства CSS 2.0. Такое решение вместо предложенного в первом комментарии простого добавления ширины в процентах для исходного контейнера будет работать ещё и в IE, который вплоть до 9 версии не понимает одновременного указания значений.

И немного меняем CSS:

Как видите — решение предельно просто и достаточно универсально, может применяться для любых блочных элементов.

Источник

Ширина блока

Какие-то свойства могут отсутствовать и в этом случае на ширину не оказывают влияние. Общая ширина показана на рис. 1 в виде чёрной пунктирной линии.

Рис. 1. Ширина блока

Допустим, для слоя написан следующий стиль.

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

Ширина = 300 + 7 + 7 + 4 + 4 + 10 + 10 = 342

Надо отметить, что блочная модель с формированием ширины несет в себе кучу неудобств. Постоянно приходится заниматься вычислениями, когда требуется задать определенную ширину блока. Также начинаются проблемы при сочетании разных единиц измерения, в частности, процентов и пикселов. Предположим, что ширина контента задана как 90%, если сюда приплюсовать поля и границы, заданные в пикселах, то нельзя вычислить суммарную ширину блока, поскольку проценты напрямую в пикселы не переводятся. В итоге может получиться так, что общая ширина блока превысит ширину веб-страницы, что приведет к появлению горизонтальной полосы прокрутки. Выходов из подобной ситуации два — поменять алгоритм блочной модели и воспользоваться вложенными слоями.

Алгоритм блочной модели

Табл. 1. Поддержка браузерами свойства box-sizing

Браузер	Internet Explorer	Chrome	Opera	Safari	Firefox
Версия	8.0+	2.0+	7.0+	3.0+	1.0+
Свойство	box-sizing	-webkit-box-sizing	box-sizing	-webkit-box-sizing	-moz-box-sizing

Как видно из таблицы, в свойствах разброд и шатание, поэтому придется делать гибрид и указывать все три свойства (пример 1).

Пример 1. Ширина блока

HTML5 CSS3 IE Cr Op Sa Fx

Вложенные слои

Использование свойства box-sizing всем хорошо, кроме того, что не работает в старых версиях IE. Если вы верстаете сайт с учетом IE7 и IE6, вам подойдет старый проверенный метод с вложением слоев. Идея простая — для внешнего блочного элемента задаётся только необходимая ширина, а для вложенного блока всё остальное — поля, границы и отступы. Поскольку по умолчанию ширина блока равна доступной ширине родителя, получится, что блоки в каком-то смысле накладываются друг на друга, при этом фактическая ширина такого комбинированного элемента будет чётко задана. В примере 2 показано использование вложенных слоев.

Пример 2. Вложенные слои

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2. Ширина блока в процентах

Преимуществом вложенных слоев является использование отступов ( box-sizing их не учитывает), универсальность метода, также то, что фон по желанию можно добавлять к одному или другому слою. Тем самым несколько меняется внешний вид элементов, это особенно актуально при включении фоновых рисунков. Из недостатков метода можно отметить включение дополнительного блока, который усложняет структуру кода, особенно при частом применении метода. Но это можно считать мелочью по сравнению с преимуществами.

Источник

Как сделать динамический фон div в CSS?

Я создал следующее изображение ниже, чтобы помочь вам, ребята, понять, что я пытаюсь сделать здесь.

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

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

UPDATE: подход Коко:

4 ответа

В моем приложении у меня есть большое количество div, которые имеют одинаковый фон и границы, но имеют разные размеры. Использование одного конкретного фонового изображения для каждого из них очень неэффективно, особенно для пропускной способности и производительности. Я покажу вам фон див и.

Просто попробуйте такой макет. я думаю, что это поможет вам исправить эту проблему

Я не знаю, может быть, я что-то упускаю, но, кажется, единственное, что вам нужно, это вот что: где у вас есть

а фон будет покрывать страницу так, как вам нужно

Оберните содержимое для этого конкретного цвета фона / раздела В div, который составляет 100% ширины, которую вы хотите. Воспроизведите около w/ процентную ширину для вашего желаемого жидкого изображения:

А для изменения размера текста рекомендуется использовать запросы CSS3 Media

Для тех, кто не может ждать Fiddle У меня есть эта проблема в CSS. Структура кода html и css выглядит следующим образом HTML:

не знаю, хорошо ли я вас понял, но думаю, вам придется добавить:

Похожие вопросы:

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

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

Для тех, кто не может ждать Fiddle У меня есть эта проблема в CSS. Структура кода html и css выглядит следующим образом HTML:

Я пытаюсь создать динамический фон для своего сайта wordpress. Я хочу, чтобы ‘featured image’ был фоном jumbotron (в заголовке страницы). Это то, что у меня есть до сих пор, но я не могу заставить.

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

Источник

Динамические блоки в Автокаде

Рассмотрим создание динамических блоков в Автокаде. Коллекция блоков для AutoCAD, которая находится на инструментальной палитре, по умолчанию содержит много динамических блоков. Использовать их на чертеже очень удобно.

Разберём, как самостоятельно создавать такие объекты. Я подготовил для вас видеоматериал «3D динамические блоки в AutoCAD. Это возможно?», который поможет разобраться с этой темой. Пошаговая инструкция в текстовом виде приведена ниже.

Создание динамических блоков в Автокаде

Создание блоков в AutoCAD начинается с того, что с использованием стандартных примитивов нужно начертить сам объект. Рассмотрим на примере окна (вид сверху). После создаем обычный статический блок.

Рис. 1. Основа для динамического блока AutoCAD.

Перейдем в редактор блоков Автокад. Для этого выберите вкладку «Вставка» → панель «Определение блока» → команда «Редактор блоков» или щелкните два раза ПКМ по блоку. Результат будет один и тот же. Откроется диалоговое окно, в котором необходимо выбрать блок для изменения.

Сделаем так, чтобы окно можно было растягивать в реальном режиме времени.

В AutoCAD динамические блоки создаются следующим образом: сначала присваивается параметр (например, «Линейный»), а затем задается соответствующая операция. Параметр указывается из палитры «Вариации блоков», которая по умолчанию открыта в Редакторе блоков.

Рис. 2. Динамические блоки в Автокаде с параметром «Линейный».

Указываем две точки.

Рис. 3. Присвоение параметра для динамического блока AutoCAD.

Далее нужно указать операцию, которую хотим выполнять с этим параметром. На палитре «Вариации блоков» переходим на вкладку «Операции» и выбираем «Растянуть».

Рис. 4. Присвоение операции «Растянуть» для динамического блока в Автокаде.

Операцию нужно связать с параметром и такими элементами, как:

— ключевая точка – точка, управляющая операцией.

— набор объектов – геометрия, на которую будет оказывать влияние операция.

Рис. 5. Связывание операции с параметрами динамического блока AutoCAD.

После этого в командной строке появится запрос: «Укажите точку параметра, которую необходимо связать с операцией». Т.е. это та точка, за которую мы будем растягивать наше окно.

Рис. 6. Точка параметра, которая связана с операцией в AutoCAD.

Рис. 7. Указание рамы выделения в AutoCAD.

Выбор объекта нужно осуществить внутри появившейся рамки. Выделение объекта можно тоже сделать рамой.

Рис. 8. Выбор объекта динамики в Автокаде.

Нажимаем Enter. Динамический блок «Окно» готов.

Тестирование динамического блока AutoCAD

Чтобы убедиться, что все работаем правильно, протестируем только что созданный динамический блок. Переходим во вкладку «Редактор блоков» → панель «Открыть/Сохранить» → «Тестировать блок».

Рис. 9. Команда AutoCAD «Тестировать блок».

Выделите динамический блок AutoCAD и потяните за ручку. Если окно меняет свою ширину, значит, вы все сделали правильно. Закройте окно тестирования и вернитесь в редактор блоков.

Рис. 10. Тестирование блока в AutoCAD.

Как задать фиксированные значения для параметров динамических блоков?

Переименуем параметр «Расстояние1» на «Ширина окна». Для этого выделите параметр, нажмите ПКМ на надписи и найдите «Параметр переименования».

Рис. 11. Стандартные(фиксированные) значения для динамических параметров в Автокаде.

Ниже следует задать «Список значений расстояния», как показано на рис. 12.

Рис. 12. Диалоговое окно AutoCAD «Добавление значения расстояния».

Блок готов. Сохраняем все внесенные изменения и закрываем окно «Редактор блоков». Теперь когда мы выделяем блок в пространстве Модели, то в панели «Свойства» в закладке «Настройка» можно выбрать подходящую ширину окна.

Создание динамических блоков в Автокаде – задача несложная. Достаточно один раз разобраться, и можно научиться делать такие блоки самостоятельно.

Источник

4 метода создания колонок одинаковой высоты

Перевод: Влад Мержевич

Одна из немногих вещей, которую не так просто сделать с помощью CSS — это создание колонок одинаковой высоты. Существуют разные подходы, у каждого из них есть свои плюсы и минусы, здесь я хочу показать четыре метода.

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

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

Желающие сразу смотреть демонстрацию и код могут щёлкнуть на любом изображении идущим перед каждым разделом ниже или обратиться к соответствующему демо.

Фиктивные колонки

Фиктивные колонки существуют уже долгое время. С 2004 года, если быть точным. За это время они были и, возможно, всё ещё остаются методом де-факто для создания колонок одинаковой высоты.

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

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

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

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

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

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

Плюсы

Минусы

Псевдоколонки

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

Он работает аналогично методу фиктивных колонок, который предполагает добавление фона к контейнеру. Это не общий подход к колонкам одинаковой высоты, поэтому он имеет ограниченную область применения, но если вы сталкиваетесь с таким случаем, всё это работает легко и просто.

Мы используем тот же HTML, что и в методе фиктивных колонок выше.

CSS опять же весьма прост. Для разнообразия я выбрал резиновый макет, но вы можете легко всё настроить и для фиксированной ширины.

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

Ограничение следующее — мы заранее должны знать, какая колонка будет короче и в идеале эта колонка должна быть такой на всех страницах сайта. Звучит, как довольно серьёзное ограничение, но на практике, я считаю, одна из двух колонок обычно короче на большинстве, если не на всех, страницах. На тех страницах, где это не так, для исправления достаточно просто добавить больше или меньше контента.

Плюсы

Минусы

Этот метод далёк от совершенства, но вы удивитесь, насколько часто он может применяться на практике.

Границы и отрицательные отступы

На этот метод я наткнулся не так давно на Smashing Magazine в статье Тьерри Кобленца, хотя позже нашёл статью Алана Пирса на A List Apart, написанную несколько лет назад об этом же методе. Используются границы и отрицательные отступы, чтобы создать видимость колонок равной высоты.

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

Плюсы

Минусы

Рекомендую прочесть обе статьи, ссылки на которые я привёл выше, поскольку они предлагают более детальную информацию, чем я здесь. Обе статьи содержат код для использования этого метода с третьей колонкой, а статья Тьерри рассказывает о создании границ между колонками.

Смещение колонок и контейнера

Последний метод создал Мэтью Джеймс Тейлор. Из всех методов представленных здесь, на этот раз он будет работать в самых разных случаях использования.

Я оставил его на конец, так как метод немного сложный и вам, возможно, придётся прочитать несколько раз для понимания как он работает.

HTML похож на то, что мы видели выше, хотя вы заметите дополнительный контейнер div.

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

В CSS происходит несколько больше, чем мы видели до этого момента. Для #sidebar и #content задаётся float со значением left и устанавливается ширина, всё остальное помимо этого является новым.

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

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

Позиционируем внутреннюю колонку и устанавливаем значение right на 75%, оно такое же, как ширина колонки с контентом.

Фоны на месте, но содержимое обоих колонок также сдвигается на 75% влево. Нам нужно сдвинуть их на место.

Мы снова применяем относительное позиционирование и поскольку содержимое обоих колонок сместилось на 75% влево, нам надо сдвинуть это обратно на 75% вправо. Сделаем это установкой значения left в 75%. Теперь всё вернулось назад, где и должно быть.

Плюсы

Минусы

В целом это наиболее надёжный метод и он гарантированно работает в любой ситуации. Я призываю вас поиграть с этим для настоящего понимания и прочитать статью Мэтью несколько раз.

В статье Мэтью идёт макет из трёх колонок и у него также есть демонстрация для четырёх и пяти колонок. Я решил показать макет из двух колонок в надежде что это сделает идею проще для понимания.

Дополнительные ресурсы

Это ни в коем случае не единственные методы создания колонок одинаковой высоты. Крис Койер некоторое время назад поделился несколькими другими методами на CSS Tricks, которые вы можете предпочесть представленным здесь.

Есть также много других методов, которые можно найти немного поискав. Думаю, что данная статья и статья Криса охватывает большинство из наиболее распространённых методов.

Резюме

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

Фиктивные колонки просты в настройке, но нужен дополнительный HTTP-запрос для изображения, а любое изменение макета требует новой картинки.

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

Границы и отрицательные отступы сравнительно просты в работе, не требуют предвидения о высоте колонок и прекрасно адаптируются к нескольким колонкам. Только нужно чтобы одна колонка была фиксированной ширины.

Смещение колонок и контейнера работает в большинстве случаев. Не нужно предварительно знать о высоте колонок и можно работать с любым желаемым числом колонок. Этот метод немного сложнее других.

Со временем я ожидаю более простого стандартного решения, но пока этих четырёх методов должно быть достаточно для вашего проекта.

Насколько часто вы делаете дизайн макета с колонками одинаковой высоты? Какой метод создания колонок вы при этом используете?

Источник