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

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

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

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

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

HTML5

1
2
3

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

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

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

@Jallik Lich · 01.05.2012, 16:50

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

HTML5

<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
{
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; в КСС, и потом в процентах задавать расположение, но ничего не вышло...
Очень благодарен за то, что на мои тупые вопросы отвечаете)

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

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