powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Резиновая верстка под мобильные устройства
9 сообщений из 9, страница 1 из 1
Резиновая верстка под мобильные устройства
    #38764804
samp_by
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Всем добрый день.
На днях ко мне обратился знакомый с просьбой заверстать ему страницу по макету. Сразу хотел бы заметить, что я не профессиональный верстальщик, имел общее представление из универской программы что это, но было это достаточно давно. И вот, уже который день курю всякие форумы и параллельно разбираюсь во всем. Но вот возникла проблема, решение которой найти самостоятельно не удалось.

Что бы было понятнее, что конкретно надо, сразу выкладываю пример http://jsfiddle.net/samp_by/v7gc9pvv/
Пример того, как должно быть, с небольшим описанием. http://c2n.me/j0Vnva

Собственно задача:

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

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

Буду оч благодарен за помощь.
...
Рейтинг: 0 / 0
Резиновая верстка под мобильные устройства
    #38764899
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
samp_byЗнаю, что можно под мобильные устройства или под определенное разрешение подгружать отдельный CSS.
Не обязательно...
Есть например медиа запрос
http://htmlbook.ru/css/value/media
...
Рейтинг: 0 / 0
Резиновая верстка под мобильные устройства
    #38764902
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Примеры использования
http://webonrails.ru/post/1638/
...
Рейтинг: 0 / 0
Резиновая верстка под мобильные устройства
    #38764905
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
samp_byПервоначально решил, что резиновая верстка поможет с этим, но сейчас уже не уверен.
Это уже смотря что хочешь получить в итоге и как будешь реализовывать...
...
Рейтинг: 0 / 0
Резиновая верстка под мобильные устройства
    #38764913
samp_by
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
krvsaПримеры использования
http://webonrails.ru/post/1638/
Спасибо. Уже читал. Пока жду помощи с косяками, делаю адаптивы через медиа.
...
Рейтинг: 0 / 0
Резиновая верстка под мобильные устройства
    #38767152
samp_by
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Неужели никто не поможет???
...
Рейтинг: 0 / 0
Резиновая верстка под мобильные устройства
    #38767175
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
samp_byНеужели никто не поможет???Ваш вопрос звучит так: "Может у кого-то есть еще варианты, как это дело адаптировать?".

Адаптировать 3 сферических элемента с неизвестным контентом. Делать нам тут больше нечего.
Вот если Вы расскажете, что за контент, как с ним работает пользователь, то тогда можно будет предложить варианты UIX дизайна.
...
Рейтинг: 0 / 0
Резиновая верстка под мобильные устройства
    #38767183
samp_by
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
skyANAВот если Вы расскажете, что за контент, как с ним работает пользователь, то тогда можно будет предложить варианты UIX дизайна.
На самом деле Вы усложняете задачу. Пока самой главной загвоздкой является то, что у меня не получается растянуть нижние два класса до нижнего края экрана пользователя. Т.е. что бы при любой высоте экрана пользователя эта 2 элемента растягивались вниз, но без полосы прокрутки.
Что касается адаптива под мобильные устройства, то надо будет посмотреть как оно будет смотреться в результате. Если даже в таком виде верстка будет удобочитабельна и на мобилках, то вопрос решится сам собой. В ином случае планировал разместить все 3 элемента один под одним, в 2 строки, используя media.
...
Рейтинг: 0 / 0
Резиновая верстка под мобильные устройства
    #38767185
samp_by
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
samp_byВ ином случае планировал разместить все 3 элемента один под одним, в 2 строки, используя media.
Опечатался, не в 2, а в 3 строки.
...
Рейтинг: 0 / 0
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Резиновая верстка под мобильные устройства
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]