Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
Racer
1 / 1 / 0
Регистрация: 05.04.2012
Сообщений: 34
#1

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

01.05.2012, 16:22. Просмотров 601. Ответов 6
Метки нет (Все метки)

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

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

HTML5
1
2
3
position:relative;
top: 1px;
left: 2px;
В итоге заметил, что в опере все картинки смещены вправо. А точность положения очень нужна. В гугл хром все нормально. А в интернет експлорере вообще эти картинки (они прозрачные) обведены синей рамкой! Но основной проблемой является то, что при смене разрешения экрана картинки вообще косятся не по-детски и чуть-ли не уезжают с фоновой картинки.

У меня фоновая картинка шириной 900пх стоит по средине странице. На ней сразу же нарисовано меню. Я выставлял прозрачные картинки так, чтобы они находились на пунктах моего горизонтального меню (главная, форум и т.д.) и делал эти прозрачные картинки кликабельными. Ну вот и что в итоге получил... Подскажите пожалуйста как можно нормально выставить картинки, или какой-нибудь другой способ.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
01.05.2012, 16:22
Ответы с готовыми решениями:

Работа с position
Всех с наступающим! Работаю с готовой темой, точнее изменяю ее под себя. ...

В каком случае рекомендуется использовать :margin,padding,float,position:absolute,position:relative
В каком случае рекомендуется использовать...

Как связать блоки position: absolute; и position: relative; ?
Имеется слайдер position: absolute;. Картинка слайдера уменьшается...

Неправильная работа медиазапросов
Не пойму, почему так получается? И что делать? Берем страничку:...

Не могу разобраться с position-relative и position-absolute
Дано: в блоке со свойствами position-relative помещен блок со свойствами...

6
Jallik Lich
Исследователь
195 / 174 / 13
Регистрация: 30.10.2011
Сообщений: 605
01.05.2012, 16:50 #2
Если хотите размещать картинки по координатам, то необходим выровняный элемент, относительно которого будут размещаться картинки...
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. Ширина дива должна быть статической
1
Racer
1 / 1 / 0
Регистрация: 05.04.2012
Сообщений: 34
01.05.2012, 17:39  [ТС] #3
То есть чтобы картинка имела координаты: 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>
?

Верно?
0
Jallik Lich
Исследователь
195 / 174 / 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
Jallik Lich
Исследователь
195 / 174 / 13
Регистрация: 30.10.2011
Сообщений: 605
01.05.2012, 21:53 #6
Цитата Сообщение от Racer Посмотреть сообщение
1) Как выставить что-либо по центру по горизонтали страницы не в координатах (у меня 500 было)
CSS
1
margin: 0 auto;

Цитата Сообщение от Racer Посмотреть сообщение
Верно?
Да, это так...


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

P.S.: Пробовал писать див, с margin: 0 auto; в КСС, и потом в процентах задавать расположение, но ничего не вышло...
Очень благодарен за то, что на мои тупые вопросы отвечаете)
0
01.05.2012, 23:00
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.05.2012, 23:00

Блоки relative и position внутри блока с position: relative
Всем привет! Я новичок, верстаю свой первый сайт (http://cosmetolog.cu.cc/)....

position: relative; в IE
есть меню состоящие из div`ов cо свойством display:none при наведении на некую...

IE 8 и position: absolute
Не работает это свойство на ie8 ,перепробовал уже все методы из гугла, и с...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru