Меню по-разному отображается на разных мониторах

@SoraxCO · Регистрация: 19.10.2013

Студворк — интернет-сервис помощи студентам

Приветствую, есть меню width 100% , по середине картинка, вощле картинки с правой и левой стороны ссылки, вот только они с разных мониторов по разному отабражаются, как сделать что бы отображались всегда одинаково, со всех мониторов, что бы ссылки не смещались в сторону:

1200x980:

Меню по-разному отображается на разных мониторах

1500х1280:

Нужно что бы всегда было как на 1280х980

@вандал · 13.11.2013, 16:09

Задний фон вырежи полоску в 1px и repeatом повторяй, в любом случае если жестко не задана ширина, то меню растягиваться будет

@Deathn0te · 13.11.2013, 16:16

можно использовать media и выставить при каком разрешении что будет происходить с меню

@dolte · 14.11.2013, 18:46

Создайте внутри меню блок, присвойте ему

CSS
1
margin:0 auto

и отодвиньте за пределы картинки.

Или расположите меню по центру

CSS
1
left:50%;

и сдвиньте на расстояние равное ширине пунктов меню

CSS
1
left:50%;margin-left:-500px;

@Deathn0te · 15.11.2013, 10:51

Сообщение от dolte

Создайте внутри меню блок, присвойте ему

CSS
1
margin:0 auto

и отодвиньте за пределы картинки.

может отъехать при другом разрешении )

@dolte · 15.11.2013, 16:00

Deathn0te, не отъедет

Сообщение от Deathn0te

left:50%;margin-left:-500px;

CSS
1
left:50%;

- постоянный центр, при любом разрешении.

.например есть у нас блок
шириной в 400px и высотой в 200px, чтобы его зафиксировать по центру, необходимо сместить его

CSS
1
2
3
4
top:50%;
left:50%;
margin-left:-200px;
margin-top:-100px;

@Deathn0te · 15.11.2013, 16:22

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

CSS
1
2
top:50%;
left:50%

работает только при position:relative, или position:absolute

@Academik · 15.11.2013, 18:18

Сообщение от SoraxCO

как сделать что бы отображались всегда одинаково, со всех мониторов, что бы ссылки не смещались в сторону:

Ну к примеру ровнять текст по правому краю (я так понимаю у вас список):

CSS
1
ul{text-align: right; padding: 0 200px 0 0;}

Либо абсолютное позиционирование, при этом родителя выставляем в relative

CSS
1
ul{position: absolute; top: 15px; right: 200px;}

@Deathn0te · 16.11.2013, 09:50

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

@Academik · 16.11.2013, 15:24

Что за бред? Я очень аккуратно использую позиционирование и всё хорошо во всех браузерах. Вы наверно не видели хорошей вёрстки.

Добавлено через 20 минут
Кстати использую его потому, что ненавижу float.

@SoraxCO · 17.11.2013, 16:45 **[ТС]**

Вообще вот сама идея меню.
И само меню по разному отображается

Комментарий модератора

Загружайте изображения и файлы на форум и прикрепляйте к сообщению.
https://www.cyberforum.ru/abou... post594251

@Deathn0te · 22.11.2013, 10:38

Сообщение от 35cm

Что за бред? Я очень аккуратно использую позиционирование и всё хорошо во всех браузерах. Вы наверно не видели хорошей вёрстки.

Добавлено через 20 минут
Кстати использую его потому, что ненавижу float.

возможно да не видел нормальной верстки, пока сам не начал верстать.

флоат порой бывает полезней чем абсолют (но тут уже на вкус и цвет как говорится )

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .

@SoraxCO -1 / 0 / 0 Регистрация: 19.10.2013 Сообщений: 38

	Меню по-разному отображается на разных мониторах 11.11.2013, 17:14. Показов 2695. Ответов 11 Метки нет (Все метки) Приветствую, есть меню width 100% , по середине картинка, вощле картинки с правой и левой стороны ссылки, вот только они с разных мониторов по разному отабражаются, как сделать что бы отображались всегда одинаково, со всех мониторов, что бы ссылки не смещались в сторону: 1200x980: 1500х1280: Нужно что бы всегда было как на 1280х980 0

@вандал 127 / 127 / 25 Регистрация: 20.11.2009 Сообщений: 498
	13.11.2013, 16:09
	Задний фон вырежи полоску в 1px и repeatом повторяй, в любом случае если жестко не задана ширина, то меню растягиваться будет 0

@Deathn0te 2 / 2 / 1 Регистрация: 10.04.2013 Сообщений: 129
	13.11.2013, 16:16
	можно использовать media и выставить при каком разрешении что будет происходить с меню 0

@Deathn0te 2 / 2 / 1 Регистрация: 10.04.2013 Сообщений: 129
	16.11.2013, 09:50
	абсолютное позиционирование лучше избегать, если его используют значит верстка никудышная, его используют в самых крайних случаях когда без него ну совсем не куда 1

@Academik 1030 / 682 / 297 Регистрация: 04.04.2013 Сообщений: 2,751
	16.11.2013, 15:24
	Что за бред? Я очень аккуратно использую позиционирование и всё хорошо во всех браузерах. Вы наверно не видели хорошей вёрстки. Добавлено через 20 минут Кстати использую его потому, что ненавижу float. 0