Проблемы с адаптивной каруселью

Алька2

Этот пост относится к следующей карусели
http://www.themetaldetective.co.uk/sandbox/paradise/x_016_search.html

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

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

поле всегда остается статичным под изменяющимся текстом.

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

Я надеюсь в этом есть смысл

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

Kolchak1

Трудно помочь, не видя кода. Я попытался «просмотреть исходный код», но весь экран представляет собой изображение. Можете ли вы показать нам код? То, о чем вы просите, не сложно. Однако разработка его с нуля потребует немного работы.

Midriaz

Учитесь чему-то каждый день - спасибо Я бы поместил «вращающийся» текст внутри тегов div карусели, поместил форму в div с абсолютным позиционированием, а затем разместил ее прямо над каруселью. Вы можете «позиционировать» вращающиеся текстовые элементы, если установите для CSS значение положение: родственник; Чтобы сделать его отзывчивым (т. е. «правильно отображать даже на экранах самых маленьких размеров»), используйте Фольксваген, вх и % вместо использования жестких или относительных единиц. Иногда вам понадобятся медиа-запросы, как показано ниже. Кроме того, вам может потребоваться использовать разную графику для разных разрешений и ориентации (книжная или альбомная). Пример медиа-запросов:

 


<style>


.divCarousel {


background-image:url(images/BkMobileLandscape.png);


}


@media screen and (orientation: landscape) and (max-width: 400px) {


.divCarousel {


background-image:url(images/BkMobilePortrait.png);


}


}


@media screen and (orientation: portrait) and (min-width: 400px) {


.divCarousel {


background-image:url(images/BkDesktopPortrait.png);


}


}


@media screen and (orientation: landscape) and (min-width: 400px) {


.divCarousel {


background-image:url(images/BkDesktopLandscape.png);


}


}


</style>

Код (разметка):

Jesika

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

ВЕРНО.

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

Да, и инспектор документов НЕ показывает вам фактический источник, он показывает вам эквивалент сборки DOM, что означает, что все, добавленное сценарием, видно.

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

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

некомпетентность, бесконечные бессмысленные классы для НИЧЕГО, создание сценариев только для элементов, которые должны были быть динамически добавлены в разметку, охват ничего, неполный/недоступный дизайн формы и, конечно же, типичная крушение поезда из-за некомпетентности разработчиков, столь распространенное, когда отупляющее идиотское раздувание кода В дело вступают такие вещи, как буткрап и jQuery.

Настоящий смех в том, что указанная страница, похоже, пытается воссоздать тип макета, который НЕоднократно убивал «Спросить» / «Спросить Дживса» / «уже выбрать имя» и удерживал Bing на четвертом месте.

Похожие темы	Дата
Образование нужно дизайнеру?	19.10.2024, 18:10
Как добавить пагинацию?	19.10.2024, 18:10
Помогите с кодом для мобильного	19.10.2024, 18:10
Отображать элементы HTML рядом друг с другом, а не занимать несколько строк?	19.10.2024, 18:10
Создание нового блога для вирусных статей.	19.10.2024, 18:10
Что, черт возьми, случилось с WordPress на этой неделе? Блоки? Меню испорчено!	19.10.2024, 18:10
Форма входа с 3 вкладками для проверки...	19.10.2024, 18:10
Нужна помощь с калькулятором объема аквариума	19.10.2024, 18:10
Профессионал говорит, что мой подход к HTML/CSS — отстой. Что я должен делать?	19.10.2024, 18:10
Сокращение использования ресурсов в Joomla.	19.10.2024, 18:10

Проблемы с адаптивной каруселью

Алька2

Kolchak1

Midriaz

Jesika

I AM

Интересно