Интересная задача

[Softlink]

Привет!

Мне подкинули интересную задачу.

Есть макет с фикс шириной, на заднем плане фон. Вот надо сделать так, чтобы кусочек этого фона был ссылкой.

Пробовал с позиционированием поиграть, но выходит не очень красиво. Сложность заключается в том, что нельзя прилепить этот блок со ссылкой к какому-нибудь краю, ибо фон тянется на больших разрешениях. При разрешении в 1024, не должно появляться горизонтальной полосы прокрутки. Кстати еще сам фон на фикседе.

Вот картинка того, что надо сделать http://clip2net.com/s/16pJm

Вот как проблему решил я http://alpatriott.ru/works/primer/op.html upd(здесь уже готовый вариант, до этого было рабочее решение с псевдоэлементом)

Но псевдоэлементы не кроссбраузерны. Есть мысли, как сделать это?

Пробовал еще такой вариант:

делаем див с абсолютом на всю ширину и высоту окна, внутрь его вкладываем второй див, с шириной, равной контенту+ширина полей справа и слева, равная блоку со ссылкой. И внутри его уже позиционируем саму ссылку. Однако есть один баг, когда мы уменьшаем ширину экрана блок начинает съезжать. Вот так это выглядит http://alpatriott.ru/works/primer/op1.html

Edited August 10, 2011 by Softlink

[sigma77]

Softlink,

Что-то я до конца всё равно не понимаю.

Есть фон у боди. У фона есть элемент, который должен быть ссылкой. Фон position: fixed. Так?

Теперь куда он тянется? Фон повторяется или нет? Ссылка всегда должна быть на одном месте при скроле? Текстового наполнения у ссылки нет?

Оригинальную картинку приложить возможности нету?

Edited August 10, 2011 by sigma77

[Softlink]

Вот ссылка на проект *. Делал его не я, просто попросили помочь.

Дом, который справа от контента должен быть ссылкой.

Edited August 10, 2011 by Softlink

[sigma77]

Softlink,

А сделать ссылку fixed не вариант?

a {
    height: 100px;
    position: fixed;
    right: 0;
    top: 300px;
    width: 200px;
}

[Softlink]

Softlink,

А сделать ссылку fixed не вариант?

a {
    height: 100px;
    position: fixed;
    right: 0;
    top: 300px;
    width: 200px;
}

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

[sigma77]

Softlink,

Так домик, вроде, всегда справа, прижат к краю окна?

[Softlink]

Softlink,

Так домик, вроде, всегда справа, прижат к краю окна?

неа, есть возможность посмотреть на большом разрешении ссылку?

Или вот этим сервисом посмотри http://viewlike.us . Там при разрешении в 1900пк фон продолжается.

Edited August 10, 2011 by Softlink

[sigma77]

неа, есть возможность посмотреть на большом разрешении ссылку?

Не, нету (

Или вот этим сервисом посмотри http://viewlike.us. Там при разрешении в 1900пк фон продолжается.

Что-то не хочет он работать. Вываливает 403 ошибку.

А не. Заработал. Просто без http надо было вводить )

Edited August 10, 2011 by sigma77

[Softlink]

там точка в ссылку попала, исправил

Edited August 10, 2011 by Softlink

[Vlad]

Раз макет фиксированной ширины, то можно ссылку разместить справа от макета через

position: fixed;

left: 50%;

margin-left: ширина макета/2;

Ну и скрипты никто не запрещал.

[Softlink]

Раз макет фиксированной ширины, то можно ссылку разместить справа от макета через

position: fixed;

left: 50%;

margin-left: ширина макета/2;

Ну и скрипты никто не запрещал.

Блин, ну да)) У меня уже ум за разум зашел. Я сделал ПЭ и выставил ему position в 500пк, а можно было самой ссылке выставить маржин этот и все. Спасибо, Влад.

вроде бы как надо заработало http://alpatriott.ru/works/primer/op.html

[amelice]

Раз макет фиксированной ширины, то можно ссылку разместить справа от макета через

position: fixed;

left: 50%;

margin-left: ширина макета/2;

Ну и скрипты никто не запрещал.

В копилку.

[SelenIT]

Вот бы еще заставить этот position:fixed реагировать на горизонтальную прокрутку на узких экранах, чтоб до него всё-таки было можно дотянуться мышкой... В общем, что-то типа position-y: fixed; position-x: absolute (образно говоря). Года три назад было у меня такое задачко, я с ней так и не справился тогда...

[Softlink]

Вот бы еще заставить этот position:fixed реагировать на горизонтальную прокрутку на узких экранах, чтоб до него всё-таки было можно дотянуться мышкой... В общем, что-то типа position-y: fixed; position-x: absolute (образно говоря). Года три назад было у меня такое задачко, я с ней так и не справился тогда...

Чего-то я тебя не понял. Как должно быть? Давай подумаем)

[psywalker]

SelenIT,

Да, а покажи плиз, что ты имеешь ввиду.