0 Пользователей и 1 Гость просматривают эту тему.
  • 14 Ответов
  • 904 Просмотров
*

vegastk

  • Осваиваюсь на форуме
  • 48
  • 0 / 0
Выравнивание блока <div>
« : 22.12.2019, 16:02:34 »
Здравствуйте.
Вот такая проблема:
шапка сайта (лого и картинки) прописана в шаблоне так:
<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 и перелючая на вид как на моб устройствах это хорошо заметно. И на моб устройствах, соответственно, заметно. Подскажите, пожалуйста, как это можно исправить?
*

AlexB

  • Завсегдатай
  • 1973
  • 54 / 2
Re: Выравнивание блока <div>
« Ответ #1 : 22.12.2019, 16:12:20 »
Абсолютное позиционирование
Фиксированная ширина и маргин
Смотрите там
*

vegastk

  • Осваиваюсь на форуме
  • 48
  • 0 / 0
Re: Выравнивание блока <div>
« Ответ #2 : 22.12.2019, 16:21:23 »
Абсолютное позиционирование
Фиксированная ширина и маргин
Смотрите там
Методом научного тыка я, наверное, почти все эти варианты перепробовал.
*

beliyadm

  • Легенда
  • 9631
  • 1658 / 66
  • Севастополь == Россия
Re: Выравнивание блока <div>
« Ответ #3 : 22.12.2019, 17:18:17 »
width: 900px; - наверно в этом причина, а картинка внутри как инлайн элемент всегда будет по умолчанию слева, она же никак не позиционирована
Да еще и margin-left: -450px; - это плохо, магические пикселы зло.
Покажите ваш сайт в сети (сделайте тестовый хост) и тогда можно будет конкретизировать
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

vegastk

  • Осваиваюсь на форуме
  • 48
  • 0 / 0
Re: Выравнивание блока &lt;div&gt;
« Ответ #4 : 22.12.2019, 17:25:31 »
width: 900px; - наверно в этом причина, а картинка внутри как инлайн элемент всегда будет по умолчанию слева, она же никак не позиционирована
Да еще и margin-left: -450px; - это плохо, магические пикселы зло.
Покажите ваш сайт в сети (сделайте тестовый хост) и тогда можно будет конкретизировать
https://vega-stk.ru
А что такое текстовый хост я не знаю.
*

AlexB

  • Завсегдатай
  • 1973
  • 54 / 2
Re: Выравнивание блока &lt;div&gt;
« Ответ #5 : 22.12.2019, 17:32:19 »
width: 900px; - наверно в этом причина, а картинка внутри как инлайн элемент всегда будет по умолчанию слева, она же никак не позиционирована
Да еще и margin-left: -450px; - это плохо, магические пикселы зло.
Покажите ваш сайт в сети (сделайте тестовый хост) и тогда можно будет конкретизировать
О том сразу т написал
Фикс размеры
*

vegastk

  • Осваиваюсь на форуме
  • 48
  • 0 / 0
Re: Выравнивание блока &amp;amp;lt;div&amp;amp;gt;
« Ответ #6 : 22.12.2019, 17:37:59 »
О том сразу т написал
Фикс размеры
Попробовал. Убрал width: 900px; из стилей - не помогло.
« Последнее редактирование: 22.12.2019, 17:41:56 от vegastk »
*

beliyadm

  • Легенда
  • 9631
  • 1658 / 66
  • Севастополь == Россия
Re: Выравнивание блока &amp;lt;div&amp;gt;
« Ответ #7 : 22.12.2019, 17:42:52 »
У вас верстка шаблона сделана не на media запросах (когда при изменении размера экрана меняются размеры и положение элементов), а на изначальном определении размера экрана и загрузки мобильной версии шаблона.
Открываете http://vega-stk.ru/ на десктопе - меняете размер браузера до мобильного (ну 600-700 пкс по ширине), обновляете страницу и попадаете на мобильную версию http://m.vega-stk.ru/ на которой все нормально
На мой взгляд - весьма устаревший подход
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

vegastk

  • Осваиваюсь на форуме
  • 48
  • 0 / 0
Re: Выравнивание блока <div>
« Ответ #8 : 22.12.2019, 17:45:08 »
У вас верстка шаблона сделана не на media запросах (когда при изменении размера экрана меняются размеры и положение элементов), а на изначальном определении размера экрана и загрузки мобильной версии шаблона.
Открываете http://vega-stk.ru/ на десктопе - меняете размер браузера до мобильного (ну 600-700 пкс по ширине), обновляете страницу и попадаете на мобильную версию http://m.vega-stk.ru/ на которой все нормально
На мой взгляд - весьма устаревший подход
Ну да, бюджетненько так было сделано (
*

beliyadm

  • Легенда
  • 9631
  • 1658 / 66
  • Севастополь == Россия
Re: Выравнивание блока <div>
« Ответ #9 : 22.12.2019, 17:48:14 »
Ну да, бюджетненько так было сделано (
На мой взгляд, накидать мобильных стилей через медиа запросы - это раз в 5 бюджетней, нежели верстать отдельный мобильный шаблон ))
Так что забейте на сдвиги элементов, пользователь откроет с планшета\мобилы и увидит другую версию сайта. Он же не будет на айфоне менять размер экрана. Для тестов да, очень неудобно, но работает и ладно (подход к веб разработки из начала нулевых)
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

vegastk

  • Осваиваюсь на форуме
  • 48
  • 0 / 0
Re: Выравнивание блока <div>
« Ответ #10 : 22.12.2019, 17:53:56 »
На мой взгляд, накидать мобильных стилей через медиа запросы - это раз в 5 бюджетней, нежели верстать отдельный мобильный шаблон ))
Так что забейте на сдвиги элементов, пользователь откроет с планшета\мобилы и увидит другую версию сайта. Он же не будет на айфоне менять размер экрана. Для тестов да, очень неудобно, но работает и ладно (подход к веб разработки из начала нулевых)
"Специалист" который делал моб версию сайта озвучил так: или m.vega-stk.ru или весь сайт переделывать за какие то немыслимые деньги. Про мобильные стили и медиа запросы я первый раз слышу.
*

beliyadm

  • Легенда
  • 9631
  • 1658 / 66
  • Севастополь == Россия
Re: Выравнивание блока &lt;div&gt;
« Ответ #11 : 22.12.2019, 18:02:56 »
"Специалист" который делал моб версию сайта озвучил так: или m.vega-stk.ru или весь сайт переделывать за какие то немыслимые деньги. Про мобильные стили и медиа запросы я первый раз слышу.
Значит такой "специалист". Есть такая вещь в CSS (уже много лет), как @media only screen and (max-width: 768px) {
То есть - если размер браузера\экрана меньше чем столько-то по ширине - меняем стили на нужные.
Вот несколько примеров из моих
https://mviss.ru/
https://dksevastopol.ru/
Открываете в десктопе и меняете ширину экрана - на всех базовых размерах элементы сохраняют своё положение либо меняют размеры\меню ужимается в бутер и тд - это и есть медиа запросы.

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

AlexB

  • Завсегдатай
  • 1973
  • 54 / 2
Попробовал. Убрал width: 900px; из стилей - не помогло.
Не убирать надо а медиа в %
*

beliyadm

  • Легенда
  • 9631
  • 1658 / 66
  • Севастополь == Россия
Re: Выравнивание блока <div>
« Ответ #13 : 22.12.2019, 18:26:44 »
Не убирать надо а медиа в %
Не поможет, там отдельный шаблон для мобильных устройств, я ж выше все расписал подробно
Все истины, которые я хочу вам изложить, — бесстыдная ложь. Записки нетрезвого кодера
Skype: beliyadm_pb
*

vegastk

  • Осваиваюсь на форуме
  • 48
  • 0 / 0
Re: Выравнивание блока <div>
« Ответ #14 : 22.12.2019, 18:37:44 »
Не поможет, там отдельный шаблон для мобильных устройств, я ж выше все расписал подробно
Всем спасибо за ответы. Пока буду довольствоваться тем что есть и копить деньги на апгрейд сайта.
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Почему появляется страницы в индексе в виде блока категорий, если нет привязанной к ней меню

Автор CRYing

Ответов: 3
Просмотров: 916
Последний ответ 23.01.2016, 17:55:34
от Andrey-Eremin
Проблемы с URL при переходе из блока новости

Автор jimmychoo

Ответов: 3
Просмотров: 859
Последний ответ 27.06.2015, 12:42:36
от jimmychoo
Некорректное отображение блока катерогий в Firefox

Автор Ромашкин

Ответов: 4
Просмотров: 835
Последний ответ 10.03.2015, 23:41:43
от Ромашкин
Необходимо сместить вывод блока, где подправить CSS

Автор parfesha

Ответов: 2
Просмотров: 840
Последний ответ 02.11.2013, 04:22:27
от artel-st
Выравнивание изображений в ссылках меню

Автор ustmm

Ответов: 1
Просмотров: 916
Последний ответ 21.08.2013, 00:09:26
от Taatshi