Неправильная работа position.

@Racer · Регистрация: 05.04.2012

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

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

В создании страницы нужно разместить несколько картинок в определенных местах. Для этого создал классы в CSS и подключал их атрибутом к div-y. В диве писал img src="...". Далее в классах повыставлял координаты(тут они от фонаря):

HTML5
1
2
3
position:relative;
top: 1px;
left: 2px;

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

У меня фоновая картинка шириной 900пх стоит по средине странице. На ней сразу же нарисовано меню. Я выставлял прозрачные картинки так, чтобы они находились на пунктах моего горизонтального меню (главная, форум и т.д.) и делал эти прозрачные картинки кликабельными. Ну вот и что в итоге получил... Подскажите пожалуйста как можно нормально выставить картинки, или какой-нибудь другой способ.

@Jallik Lich · 01.05.2012, 16:50

Если хотите размещать картинки по координатам, то необходим выровняный элемент, относительно которого будут размещаться картинки...

HTML5
1
2
3
4
5
<div id="this_div_has_good_position">
<img src=""...>
<img src=""...>
<img src=""...>
</div>

После чего для дива даем position: relative; а для картинок и прочьих элементов внутри position: absolute; и с помощью right, left, top равняем по пикселях...

P. S. Ширина дива должна быть статической

@Racer · 01.05.2012, 17:39 **[ТС]**

То есть чтобы картинка имела координаты: 1px top and 3px left я должен написать так:

CSS
1
2
3
4
5
6
7
8
9
10
11
#1
{
position: relative;
left: 500px; /*это средина страницы у меня*/
}
.class1
{
position: absolute;
top: 1px;
left: 3px;
}

HTML5
1
2
3
<div id="1">
<img class="class1" src=""...>
</div>

?

Верно?

@Jallik Lich · 01.05.2012, 17:42

Да, но координаты будут относительно дива, а не экрана монитора

@Racer · 01.05.2012, 21:24 **[ТС]**

Спасибо огромное! Подскажите еще пожалуйста:
1) Как выставить что-либо по центру по горизонтали страницы не в координатах (у меня 500 было)
2) Когда-то читал, что absolute - это отсчет от верхнего левого угла экрана, a по поводу relative было написано что-то вроде: "нулем является не верхний угол экрана, а содержимое". Написано не четко. Но из Ваших слов я делаю вывод, что нулем являются координаты того, в чем находится содержимое к которому применяется position: relative. Ну вот например координаты дива у меня 1 2, значит нулем моих картинок будет точка (1,2). И точно также если 1 2 - это координаты таблицы (к примеру), то нулем картинок, которые я напишу внутри таблицы (естественно картинкам задам position: relative), будет точка (1,2).Верно?

Добавлено через 1 час 24 минуты
Попробовал. Все равно смещается вправо((

@Jallik Lich · 01.05.2012, 21:53

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

1) Как выставить что-либо по центру по горизонтали страницы не в координатах (у меня 500 было)

CSS
1
margin: 0 auto;

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

Верно?

Да, это так...

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

Попробовал. Все равно смещается вправо((

Значит надо смотреть весь код...

@Racer · 01.05.2012, 23:00 **[ТС]**

Я кажись понял в чем проблема. Дело в том, что при изменении разрешения, у меня браузер обрезает фоновую картинку (что в принципе логично), и все на ней становится крупнее, и немного спускается (потому что все увеличилось). Это если разрешение сделать меньше. Если больше, то наоборот.
У меня не получается сделать так, чтобы картинку не обрезало, и существовал центр страницы, относительно которого я пропишу в процентах размещение этих моих картинок-ссылок.

P.S.: Пробовал писать див, с margin: 0 auto; в КСС, и потом в процентах задавать расположение, но ничего не вышло...
Очень благодарен за то, что на мои тупые вопросы отвечаете)

Новые блоги и статьи Все статьи Все блоги /
Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .

@Jallik Lich Исследователь 196 / 175 / 13 Регистрация: 30.10.2011 Сообщений: 605 Записей в блоге: 7
	01.05.2012, 17:42
	Да, но координаты будут относительно дива, а не экрана монитора 1

@Racer 1 / 1 / 0 Регистрация: 05.04.2012 Сообщений: 34
	01.05.2012, 21:24 [ТС]
	Спасибо огромное! Подскажите еще пожалуйста: 1) Как выставить что-либо по центру по горизонтали страницы не в координатах (у меня 500 было) 2) Когда-то читал, что absolute - это отсчет от верхнего левого угла экрана, a по поводу relative было написано что-то вроде: "нулем является не верхний угол экрана, а содержимое". Написано не четко. Но из Ваших слов я делаю вывод, что нулем являются координаты того, в чем находится содержимое к которому применяется position: relative. Ну вот например координаты дива у меня 1 2, значит нулем моих картинок будет точка (1,2). И точно также если 1 2 - это координаты таблицы (к примеру), то нулем картинок, которые я напишу внутри таблицы (естественно картинкам задам position: relative), будет точка (1,2).Верно? Добавлено через 1 час 24 минуты Попробовал. Все равно смещается вправо(( 0

@Racer 1 / 1 / 0 Регистрация: 05.04.2012 Сообщений: 34
	01.05.2012, 23:00 [ТС]
	Я кажись понял в чем проблема. Дело в том, что при изменении разрешения, у меня браузер обрезает фоновую картинку (что в принципе логично), и все на ней становится крупнее, и немного спускается (потому что все увеличилось). Это если разрешение сделать меньше. Если больше, то наоборот. У меня не получается сделать так, чтобы картинку не обрезало, и существовал центр страницы, относительно которого я пропишу в процентах размещение этих моих картинок-ссылок. P.S.: Пробовал писать див, с margin: 0 auto; в КСС, и потом в процентах задавать расположение, но ничего не вышло... Очень благодарен за то, что на мои тупые вопросы отвечаете) 0