Выравнивание блока <div> - Joomla 2.5: Настройка и оптимизация

Здравствуйте.
Вот такая проблема:
шапка сайта (лого и картинки) прописана в шаблоне так:
<div id="up">
<img src="/images/shup.gif" border="0" alt=" " />
</div>
имеет стиль
#up {
    background-color: #ffffff;
    height: 105px;
    position: absolute;
    width: 900px;
    top: 62px;
    left: 50%;
    margin-left: -450px;
}
В браузерах все ровно - по центру, но на мобильных устройствах шапка смещается влево!
Ctrl+shift+I и перелючая на вид как на моб устройствах это хорошо заметно. И на моб устройствах, соответственно, заметно. Подскажите, пожалуйста, как это можно исправить?

Абсолютное позиционирование
Фиксированная ширина и маргин
Смотрите там

Абсолютное позиционирование
Фиксированная ширина и маргин
Смотрите там

Методом научного тыка я, наверное, почти все эти варианты перепробовал.

width: 900px; - наверно в этом причина, а картинка внутри как инлайн элемент всегда будет по умолчанию слева, она же никак не позиционирована
Да еще и margin-left: -450px; - это плохо, магические пикселы зло.
Покажите ваш сайт в сети (сделайте тестовый хост) и тогда можно будет конкретизировать

width: 900px; - наверно в этом причина, а картинка внутри как инлайн элемент всегда будет по умолчанию слева, она же никак не позиционирована
Да еще и margin-left: -450px; - это плохо, магические пикселы зло.
Покажите ваш сайт в сети (сделайте тестовый хост) и тогда можно будет конкретизировать

https://vega-stk.ru
А что такое текстовый хост я не знаю.

width: 900px; - наверно в этом причина, а картинка внутри как инлайн элемент всегда будет по умолчанию слева, она же никак не позиционирована
Да еще и margin-left: -450px; - это плохо, магические пикселы зло.
Покажите ваш сайт в сети (сделайте тестовый хост) и тогда можно будет конкретизировать

О том сразу т написал
Фикс размеры

О том сразу т написал
Фикс размеры

Попробовал. Убрал width: 900px; из стилей - не помогло.

У вас верстка шаблона сделана не на media запросах (когда при изменении размера экрана меняются размеры и положение элементов), а на изначальном определении размера экрана и загрузки мобильной версии шаблона.
Открываете http://vega-stk.ru/ на десктопе - меняете размер браузера до мобильного (ну 600-700 пкс по ширине), обновляете страницу и попадаете на мобильную версию http://m.vega-stk.ru/ на которой все нормально
На мой взгляд - весьма устаревший подход

У вас верстка шаблона сделана не на media запросах (когда при изменении размера экрана меняются размеры и положение элементов), а на изначальном определении размера экрана и загрузки мобильной версии шаблона.
Открываете http://vega-stk.ru/ на десктопе - меняете размер браузера до мобильного (ну 600-700 пкс по ширине), обновляете страницу и попадаете на мобильную версию http://m.vega-stk.ru/ на которой все нормально
На мой взгляд - весьма устаревший подход

Ну да, бюджетненько так было сделано (

Ну да, бюджетненько так было сделано (

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

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

"Специалист" который делал моб версию сайта озвучил так: или m.vega-stk.ru или весь сайт переделывать за какие то немыслимые деньги. Про мобильные стили и медиа запросы я первый раз слышу.

"Специалист" который делал моб версию сайта озвучил так: или m.vega-stk.ru или весь сайт переделывать за какие то немыслимые деньги. Про мобильные стили и медиа запросы я первый раз слышу.

Значит такой "специалист". Есть такая вещь в CSS (уже много лет), как @media only screen and (max-width: 768px) {
То есть - если размер браузера\экрана меньше чем столько-то по ширине - меняем стили на нужные.
Вот несколько примеров из моих
https://mviss.ru/
https://dksevastopol.ru/
Открываете в десктопе и меняете ширину экрана - на всех базовых размерах элементы сохраняют своё положение либо меняют размеры\меню ужимается в бутер и тд - это и есть медиа запросы.

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

Попробовал. Убрал width: 900px; из стилей - не помогло.

Не убирать надо а медиа в %

Не убирать надо а медиа в %

Не поможет, там отдельный шаблон для мобильных устройств, я ж выше все расписал подробно

Не поможет, там отдельный шаблон для мобильных устройств, я ж выше все расписал подробно

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