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

walek · December 6, 2007

Друзья!

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

Задача такая. На разных частях рисунка скажем 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 · December 6, 2007

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

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

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

maddogrts · December 6, 2007

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

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

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

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

walek · December 6, 2007

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

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

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

maddogrts · December 6, 2007

На разных частях рисунка скажем 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 · December 6, 2007

maddogrts

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

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

maddogrts · December 6, 2007

<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 · December 6, 2007

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

<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 · December 6, 2007

Ты так хотел ?

walek · December 6, 2007

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

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

maddogrts · December 6, 2007

walek

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

walek · December 6, 2007

maddogrts

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

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

yopopt · December 6, 2007

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

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

maddogrts · December 6, 2007

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 · December 6, 2007

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

walek · December 6, 2007

maddogrts

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

walek · December 6, 2007

yopopt, спасибо, может я немного недопонимаю, но картинка в 1 способе не центрируется исходя из вашего кода. Честно не знаю, как ее в вашем способе это сделать (((
К сожалению и на втором вариате не центрируется. Это жесткое условие задачи.
Чтобы работало в ие поставьте доктайп или установите родительскому блоку(хотя бы body) text-align:center;.

yopopt, прописал

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

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

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

BODY
{
text-align:center;
}

Не работает.

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

maddogrts · December 6, 2007

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

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

walek · December 6, 2007

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

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

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

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

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

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

maddogrts · December 6, 2007

<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 · December 6, 2007

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

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

text-align: center;

в mainPic?

maddogrts · December 6, 2007

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

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

maddogrts · December 6, 2007

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

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

maddogrts · December 6, 2007

молчит :rolleyes:

yopopt · December 6, 2007

yopopt, спасибо, может я немного недопонимаю, но картинка в 1 способе не центрируется исходя из вашего кода. Честно не знаю, как ее в вашем способе это сделать (((
К сожалению и на втором вариате не центрируется. Это жесткое условие задачи.
Чтобы работало в ие поставьте доктайп или установите родительскому блоку(хотя бы body) text-align:center;.
yopopt, прописал
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
- это корректно?
Попробовал прописать
BODY
{
text-align:center;
}
Не работает.
Может я что-то упустил?

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

walek · December 6, 2007

Друзья!

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

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

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

Sign In

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

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information