Как осуществить наследование в адаптивной верстке шаблона joomla?

Question

[NealMoreau]

Здравствуйте.

Столкнулся с проблемой отображения сайта rent-crimea.com/beta на мобильных устройствах. Очень бы не хотелось верстать мобильную версию сайта, а довести адаптивность до ума.

Итак, у нас есть 2 блока: sidebar ( менюха ) с шириной 20% от всей страницы и main ( контент) - 80% соответственно. При уменьшении размера экрана - соответственно сжимаются поля, но после определенной отметки div.main налазит на div.sidebar. Уже несколько суток не спал и вот не могу понять... оно или так криво сжимается, или все-таки основной див контента налазит на меню. Хотелось бы, чтоб все по классике уменьшалось.

Укажите, пожалуйста, на явные ошибки или, может, неявные, что-то уже плохо соображаю =( Спасибо.

Answer 1

[Руслан Бегалиев]

Решение же на поверхности.
Нужно указать параметр min-width для #sidebar и .main, чтобы не сжималось в ноль, а до каких-то разумных пределов.
После этого уже как минимум, на мобилах смотрибельно будет.
Ну а если уж доводить до ума мобильную версию, то надо брать media queries и после определенной ширины отменять float у обоих классов, указанных выше.
Для большей крутости можно для мобил кастомизировать меню с помощью superfish.js

Comments

[NealMoreau]

Благодарю, пошел гуглить superfish.js :)

[Алексей]

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

Answer 2

[Юрий Лобанов]

Был ведь от Вас вопрос про это же )
У Вас все логично. Меню не может сжиматься вечно, так как там не сжимается картинка (логотип) и подпись - слово Аренда.
Не надо писать отдельную версию для телефонов, попробуйте использование медиа-запросов.
В частности, на мобильной версии уменьшать размеры шрифта логотипа и так далее. Но вообще верстка несколько странная - до какой поры Вы собираетесь уменьшать ширину? Будет у Вас меню в 50 пикселей - каждый пункт будете по три раза переносить? так или иначе придется поработать ) я бы предложил через те самые медиа-запросы кардинально менять вид меню, например, менять слова на картинки или сделать его выезжающим над основным контентом.

А еще, у Вас на странице огроменный горизонтальный скролл ) Это что вообще такое?
Вам потому и не спешат помочь, потому что у Вас не разметка - а катастрофа, не знаешь с чего начинать.

Comments

[NealMoreau]

Вчера снял вопрос, потому что думал что одержу победу над проблемой, но увы.
Ну я думал менять на картинки те же ... но тем не менее вот не могу понять или меня глючит, или все-же div.main накрывает div.sidebar

А каким способом вы бы посоветовали заменять слова картинками ( если можно ссылку ) а то туговато соображаю =( Благодарю.