Форум Сайтостроение Веб-строительство

знатоки верстки

P
На сайте с 17.03.2011
Offline
6
pato
417

Добрый день, возникла проблема, как сделать такой эффект для наведенной ссылки?

http://i065.radikal.ru/1106/c7/d8c010763b46.jpg

Чтобы вот эта небольшая часть залезала на изображение?

O
На сайте с 29.05.2008
Offline
195
ortegas
#1

z-index: 1 для картинки и z-index: 2; position: relative для ссылки.

P
На сайте с 17.03.2011
Offline
6
pato
#2

да пробовал я, не получается... может прописал что-то не так 

#slider img {

	float:left;

	z-index: 1;

	position:relative;

}



#slider a {

	text-decoration:none;

	color:#807f7f;

	width:369px;

	height:37px;

	display:block;

	background:url(img/a-slide.gif) no-repeat;

	float:right;

	text-align:center;

	margin-top:4px;

}

#slider a:hover {

	width:396px;

	background:url(img/hover-a.png) no-repeat;

	color:#fff;

	z-index: 2;

	position: relative;

}

вот что получается http://s45.radikal.ru/i110/1106/0a/c183b127d8c0.jpg

pato добавил 07.06.2011 в 21:15

что никто не знает?

I
На сайте с 02.09.2008
Offline
22
iunewind
#3

Банальное - отридцательный маргин у правого блока пробовал?

Два главных блока, оба флоат:лефт, для чистоты эксперимента надо ширину задать тоже в пкс.

у правого отридацательный левый маргин. он заползет на левый

внутри правого - уже дело техники расположить на подложку гифы с прозрачной стрелкой.

ну т.е.

<div style="width:500px; float:left;">

я левый блок с картинкой города

</div>

<div style="width:500px;float:left; margin-left:-20px;">

я правый блок с меню

<div style="background-image:url(стрелка.гиф);width:500px;overflow:hidden;float:left;">я блок с одним пунктом меню и стрелкой на подложке</div>

<div style="background-image:url(стрелка.гиф);width:500px;overflow:hidden;float:left;">я блок с одним пунктом меню и стрелкой на подложке</div>

<div style="background-image:url(стрелка.гиф);width:500px;overflow:hidden;float:left;">я блок с одним пунктом меню и стрелкой на подложке</div>

</div>

iunewind.com - веб-дизайн, 3D графика.
Google: как сделать статические Как можно наказать за Оптимизация плавающих фреймов для

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий