как сделать ссылкой фрагмент блока?

[Proks]

вопрос:

есть блок шириной в 1000 пх, надо чтоб ровно посередине него, была какая-то зона/блок/хз, при нажатии на которую юзверь отправлялся бы на мейн.

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

пнгшку как-то не охота пихать(оптимизации ради).

подскажите как ето сделать корректно и правильно?

[rus]

запихнуть внутрь этого блока ссылку, дать ей ширину и высоту фиксированную, сказать маргин:0 авто, и дисплей:блок.

[Proks]

тоесть атрибуты width и height задавать самому тегу "А"?

[Great Rash]

Да, только перед этим не забыть тегу <a> сказать display: inline-block; или display: block;

[slicemasta]

да все верно товарищи говорят, можно еще для сео внутрь ссылки поместить текст, но чтобы его не было видно задать text-indent:-9999px;

[Proks]

пасипа)))))

[sv12]

Покажите на конкретном примере пожалуйста, код и результат!

[slicemasta]

a {
			display: block;
			width: 200px;
			height: 200px;
			background: url(images/pic1.jpg) 0 0 no-repeat;
			text-indent: -9999px;
		}

[sv12]

  slicemasta said:

a {
			display: block;
			width: 200px;
			height: 200px;
			background: url(images/pic1.jpg) 0 0 no-repeat;
			text-indent: -9999px;
		}

Ничего не вышло, потерял логику ХТМЛ кода, объясните пожалуйста

Что дает Элемент: "text-indent: -9999px" и "display: block"

Edited March 17, 2010 by sv12

[slicemasta]

выше я писал по поводу text-indent

>>> можно еще для сео внутрь ссылки поместить текст, но чтобы его не было видно задать text-indent:-9999px;

т.е. по идеи текст будет виден поисковым роботам а нам будет показываться лого (картинка) без текста, text-indent это смещение текста по горизонтали, в данном случае мы прячем текст.

display: block, делает как ни странно нашу инлайновую (строковую) ссылку блоком

иначе толку задавать размеры - высоту и ширину текстовому элементу смысла нет.

[sv12]

С этим ясно, в Хтмл при окружении Ссылки на IMG изображение и вовсе пропадает

<a href="http://www.mail.ru" class="eeee"> <img src="images/Maybach_57.jpg" title="Maybach S-57" weigth="50%" height="50%"/> </a>

[Great Rash]

sv12, а напомните-ка что вам нужно получить?

[sv12]

  Great Rash said:

sv12, а напомните-ка что вам нужно получить?

Мне нужно получить ссылку по середине изображения (чтоб не все изображение а только середина)

[rus]

  sv12 said:

Мне нужно получить ссылку по середине изображения (чтоб не все изображение а только середина)

Нахрена тогда пихать изображение в ссылку?

  Quote

<a href="http://www.mail.ru" class="eeee"> <img src="images/Maybach_57.jpg" title="Maybach S-57" weigth="50%" height="50%"/> </a>

[sv12]

  rus said:

Нахрена тогда пихать изображение в ссылку?

Ачто нужно делать?

[Great Rash]

Хоть это и не правильно конечно, но воспользуйтесь тегом <map>.

[sv12]

  Great Rash said:

Хоть это и не правильно конечно, но воспользуйтесь тегом <map>.

А правильней как?

[rus]

  sv12 said:

Ачто нужно делать?

на тег <a> позишн абсолют и топ лефт (райт) сколько-то..., а на див например, в котором картинка позишн релатив.

и тег <a> пихай в этот див.

Edited March 17, 2010 by rus

[sv12]

  rus said:

на тег <a> позишн абсолют и топ лефт (райт) сколько-то..., а на див например, в котором картинка позишн релатив.

и тег <a> пихай в этот див.

RUS, я конечно извинтиляюсь, но видать я туплю, и даже кофе не помогает, дай код пожалуйста, прошу прощения за наглость

[rus]

  sv12 said:

RUS, я конечно извинтиляюсь, но видать я туплю, и даже кофе не помогает, дай код пожалуйста, прошу прощения за наглость

Ппц...

html:

<div class="main">
<a href="index.html">сцылко тута</a>
<img src="images/img.png">
</div>

css:

<style>
.main {
width:800px;
height:600px;
position:relative;
}
.main img {
width:800px;
height:600px;
}
.main a {
position:absolute;
top:350px;
left:250px;
width:50px;
height:50px;
display:block;
}
</style>

или так, если картинка фоном:

html:

<div class="main">
<a href="index.html">сцылко тута</a>
</div>

css:

<style>
.main {
width:800px;
height:600px;
position:relative;
background: url(images/img.png) repeat-no;
}
.main a {
position:absolute;
top:350px;
left:250px;
width:50px;
height:50px;
display:block;
}
</style>

[sv12]

Благодарствую люди добрые)))

[rus]

  sv12 said:

Благодарствую люди добрые)))

людь... добрый