Позиционирование ссылки на картнике

[walek]

Друзья!

Я уже отчаялся решить проблему.

Задача такая. На разных частях рисунка скажем 700*600 px нужно разместить 5 ссылок. Для меня позиционирование осложняется тем, что текст нужно выравнивать строго слева, т.е. ссылка не одну строку, а в несколько.

Если бы не выравнивание текста слева, я решал задачу следующим образом:

В CSS прописывал стили (укажу только для одной ссылки для простоты)

#layer1 {
position: relative; 
top: -600px;
left: 185px;
color: #ffa500;
font-size:15px; 
z-index: 1;

Слой прописываю так:

<div align="center"><img src="image.jpg"></div>
<div align="center" id="layer1"><a href="#">Слой -
 первый</a></div>

Так, все прекрасно работает для всех разрешений монитора. Но текст располагается по центру. Ума не приложу, как сделать выравнивание текста строго слева, но чтобы во всех разрешениях ссылки оставались на прежних местах?

И еще небольшой момент, почему после картники остается большое расстояние до конца страницы?

Прошу вашей помощи! IE 7.

Спасибо.

[walek]

Конечно можно использовать безумную идею - запихать ссылки в таблицу, а таблицу в слой

, либо к таблице применить идентификатор layer1. Текст выравнивается по левому краю, но этот способ мне не особо нравится, да и проблема нижнего отступа не решена.

Беспокоит меня нижний отступ от картинки, такое ощущение, что позиционируя ссылки, они как замаскированно остаются снизу, т.е. отступ исчезает, когда к примеру удалить все ссылки.

[maddogrts]

На разных частях рисунка скажем 700*600 px нужно разместить 5 ссылок.

Рисунок запихиваем в бакграунд (или нет как хотите) ставим относительную позицию

Далее пишим ссылки и с помощью абсолютного позиционирования размещаем где надо. (в стилях ссылок пишем text-align:left)

Я бы так сделал наверно 6) не знаю просто задачи до конца

[walek]

maddogrts, можно попробовать в бэкграунд.

Но вот незадача, не центрирует, где ошибка? Пихаю в тег

style="{background-repeat:no-repeat;background-position:center center;width:703px;height:604px;}"

[maddogrts]

На разных частях рисунка скажем 700*600 px нужно разместить 5 ссылок.

Делаем рисунок:

<div class="mainPic">
<img scr....  />
<a href... class="link1">limk1</a>
</div>

стили

.mainPic {position: relative; margin: 0 auto; ширина и высота еще }
.link1 {text-align: left; position:absolute; top: 10px; left: 10px;}

либо

Делаем рисунок:

<div class="mainPic">
<a href... class="link1">limk1</a>
</div>

стили

.mainPic {position: relative; margin: 0 auto; background: url(ffff.jpg) no-repeat; ширина и высота еще }
.link1 {text-align: left; position:absolute; top: 10px; left: 10px;}

вообще для страховки я бы еще и ссылкам указал display: block и высоту и ширину

[walek]

maddogrts

Картинка обязательно должна располагаться по центру.

Я так понимаю, что задать через относительное позиционирование не представляется возможным?

[maddogrts]

<div class="mainPic">
<div id="inside">
<a href... class="link1">limk1</a>
</div>
</div>

стили

Код:

.mainPic {
width:300px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}
#inside {position: relative; width:300px;height:200px;}
.link1 {text-align: left; position:absolute; top: 10px; left: 10px;}

[yopopt]

Вот, примерно так это должно выглядеть:

<div style="margin:0 auto; background-image:url(имя_картинки); position:relative;width:700px;height:600px">
 <a href="#" style="position:absolute;top:10px; left:10px">Слой -
 первый</a>
 <a href="#" style="position:absolute;top:400px; left:10px">Слой -
 второй</a>
 <a href="#" style="position:absolute;top:100px; left:100px">Слой -
 третий</a>
 <a href="#" style="position:absolute;top:200px; left:300px">Слой -
 четв?ртый</a>
 <a href="#" style="position:absolute;top:300px; right:10px">Слой -
 пятый</a>
</div>

или

<div style="margin:0 auto; position:relative;width:700px;height:600px">
 <img src="имя_картинки" alt="" style="position:absolute;width:700px;height:600px;z-index:1" />
 <a href="#" style="position:absolute;top:10px; left:10px;z-index:2">Слой -
 первый</a>
 <a href="#" style="position:absolute;top:400px; left:10px;z-index:3">Слой -
 второй</a>
 <a href="#" style="position:absolute;top:100px; left:100px;z-index:4">Слой -
 третий</a>
 <a href="#" style="position:absolute;top:200px; left:300px;z-index:5">Слой -
 четв?ртый</a>
 <a href="#" style="position:absolute;top:300px; right:10px;z-index:6">Слой -
 пятый</a>
</div>

[maddogrts]

Ты так хотел ?

[walek]

yopopt, спасибо, может я немного недопонимаю, но картинка в 1 способе не центрируется исходя из вашего кода. Честно не знаю, как ее в вашем способе это сделать (((

К сожалению и на втором вариате не центрируется. Это жесткое условие задачи.

[maddogrts]

walek

Я же тебе написал или тоже не рабоатет ?

[walek]

maddogrts

я так понимаю, вы хотели в этом стиле прописать картинку?

.mainPic {
width:300px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}

[yopopt]

yopopt, спасибо, может я немного недопонимаю, но картинка в 1 способе не центрируется исходя из вашего кода. Честно не знаю, как ее в вашем способе это сделать (((

К сожалению и на втором вариате не центрируется. Это жесткое условие задачи.

Чтобы работало в ие поставьте доктайп или установите родительскому блоку(хотя бы body) text-align:center;.

[maddogrts]

maddogrts

я так понимаю, вы хотели в этом стиле прописать картинку?

ладно

вот как надо сделать

<div class="mainPic">
<div id="inside">
<a href... class="link1">limk1</a>
</div>
</div>

.mainPic {
width:700px;
height:600px;
position:absolute;
background: картинка
top:50%;
left:50%;
margin-top:-300px;
margin-left:-350px;
}
#inside {position: relative; width:700px;height:600px;}
.link1 {text-align: left; position:absolute; top: 10px; left: 10px; z-index: 50}

[maddogrts]

Жду вашей проверки моего варианта

[walek]

maddogrts

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

[walek]

yopopt, спасибо, может я немного недопонимаю, но картинка в 1 способе не центрируется исходя из вашего кода. Честно не знаю, как ее в вашем способе это сделать (((

К сожалению и на втором вариате не центрируется. Это жесткое условие задачи.

Чтобы работало в ие поставьте доктайп или установите родительскому блоку(хотя бы body) text-align:center;.

yopopt, прописал

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

- это корректно?

Попробовал прописать

BODY
{
text-align:center;
}

Не работает.

Может я что-то упустил?

[maddogrts]

без комментариев вначале вы заявляете что центровать по горизонтале вам не надо, а надо чтобы и по вертикале тоже, потом вы говорити что у вас там кроме картинки еще куча всего , текст чтоли у вас там ?

walek в каком вы браузере это смотрите или может в нескольких ?

[walek]

maddogrts, простите если ввел вас в заблуждение, думаю мы друг друга не поняли.

Задача следующая.

Имеется картинка, размером 700х600. Необходимо повесить 5 ссылок на эту картинку, следующим образом: (приведу позиционирование в географических направлениях): на северо-западе, на северо-востоке, на юго-востоке, на юге и на юго-западе.

Картинка должна располагаться в центре (т.е. центрироваться по горизонтали). Ссылки и картинка (которая должна быть по центру) не должны менять свое положение не зависимо от разрешения монитора, т.е. в разрешении 1024*768 мы должны видеть ссылки на тех же местах что и на более высоком разрешении.

Под другими элементами на странице я подразумевал автоматически подгружаемый bottom, шапку, дорожку (хлебные крошки).

Использую браузер IE 7

[maddogrts]

<div class="mainPic">
<a href... class="link1">limk1</a>
</div>

.mainPic {position: relative; text-align: center; margin-left: auto;
 display: block; margin-right: auto;width:700px;height:600px; background: url(11.jpg) no-repeat;}
.link1 {text-align: left; position:absolute; top: 10px; left: 10px;}

[walek]

maddogrts, спасибо. А в вашем браузере центрирование картинки происходит?

Уже боюсь вам говорить , но у меня не происходит. Может быть, неуместо

text-align: center;

в mainPic?

[maddogrts]

http://maddog-rts5.narod.ru/

У меня все окей, уже три раза проверил

[maddogrts]

там все уместно, только я вам до этого уже писал тоже самое. У вас тоже не работало. там прото было в сокрашенной форме margin: 0 auto;

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

[maddogrts]

молчит

[yopopt]

yopopt, спасибо, может я немного недопонимаю, но картинка в 1 способе не центрируется исходя из вашего кода. Честно не знаю, как ее в вашем способе это сделать (((

К сожалению и на втором вариате не центрируется. Это жесткое условие задачи.

Чтобы работало в ие поставьте доктайп или установите родительскому блоку(хотя бы body) text-align:center;.

yopopt, прописал

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

- это корректно?

Попробовал прописать

BODY
{
text-align:center;
}

Не работает.

Может я что-то упустил?

Доктайп корректен. Вс? должно работать. Если можете, приведите код того, что делаете Вы.

[walek]

Друзья!

Спасибо всем, кто откликнулся.

Моя ошибка заключалась в неуказании доктайпа.

Все заработало