Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 16.12.2015, 13:49   #1
Maxx
Форумчанин
 
Аватар для Maxx
 
Регистрация: 29.10.2008
Сообщений: 294
По умолчанию Изменить стиль DIV при просмотре на мобильных устройствах

Добрый день!

Полностью изменил дизайн сайта, но остался последний штрих.

CSS:
Код HTML:
div#wrap-header { position: fixed; margin: 0 auto; padding: 0; top: 0; width: 100%; height: 100px; max-width: 1440px; }
div#wrap-content-primary { margin-top: 100px; padding: 0; }
HTML:
Код HTML:
<div id="wrap-header">
     header content
</div>
<div id="wrap-content-primary">
     main content
</div>
Фиксированный header подсмотрел с одного сайта, но видимо что-то не досмотрел :-)
При просмотре на мобильных устройствах при увеличении масштаба экрана header остается на своем месте и также увеличивается, но при этом он наплывает на основной контент и не перемещается вправо-влево с основным контентом.

Как можно исправить ситуацию, чтобы при просмотре на мобилках стили были такие:
CSS:
Код HTML:
div#wrap-header { margin: 0 auto; padding: 0; top: 0; width: 100%; height: 100px; max-width: 1440px; }
div#wrap-content-primary { margin-top: 0; padding: 0; }
Т.е. position: fixed; убираем или делаем relative, а margin-top: 100px основного контента меняем на margin-top: 0.
В итоге header будет прокручиваться и перемещаться вместе с контентом.

Пробовал так:
Код HTML:
@media (max-width: 1200px){ #wrap-header { position: relative; } }
@media (max-width: 1200px){ #wrap-content-primary { margin-top: 0; } }
не работает!

Спасибо!

Последний раз редактировалось Maxx; 17.12.2015 в 10:12.
Maxx вне форума Ответить с цитированием
Старый 18.12.2015, 01:40   #2
Maxx
Форумчанин
 
Аватар для Maxx
 
Регистрация: 29.10.2008
Сообщений: 294
По умолчанию

Заработало вот так:
Код HTML:
@media (max-width: 1200px) { div#wrap-header { position: relative; } }
@media (max-width: 1200px) { div#wrap-content-primary { margin-top: 0; } }
Всем спасибо! Как говорится: "сам себе не поможешь, никто не поможет"

Шутка! Тему можно закрыть!
Maxx вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изображения на мобильных устройствах lesenok87 HTML и CSS 2 02.06.2015 10:22
Отображение сайта на мобильных устройствах mihmihail Помощь студентам 3 21.01.2015 22:32
Для тех, кто сталкивается с JavaScript и HTML на мобильных устройствах MobiDev Мобильные ОС (Android, iOS, Windows Phone) 0 19.02.2014 14:23
Margin: 0 auto; не работает на мобильных устройствах Hrommi HTML и CSS 2 31.10.2013 13:57
Как изменить стиль шрифт выделенного тексту слова в компоненте RichEdit при выделении его? SkAndrew Общие вопросы Delphi 9 23.04.2008 01:35