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

Гуры вёрстки

DR
На сайте с 02.08.2009
Offline
3
DarkRobin
580

гуры вёрстки, у меня проблема такая. вот надо чтобы при наведении на сцылку бекграунд-картинка растягивался по мере удлиннения текста ссылки. Как это сделать при наведении?

L
На сайте с 11.07.2009
Offline
6
lostpassword
#1

То есть при наведении на ссылку ее текст удлиняется?

Californiy
На сайте с 12.12.2006
Offline
95
Californiy
#2

ГурУ - не склоняется )

Задание не совсем понятно поставлено. Если:

вот надо чтобы при наведении на ссылку бекграунд-картинка растягивалась на всю длину текста ссылки. Как это сделать при наведении?

Растянуть - нельзя, можно с помощью JS, но обычно не требуется) Пробуй повторять, а не растягивать.

Тружусь в sapiense.com.
DR
На сайте с 02.08.2009
Offline
3
DarkRobin
#3

Не совсем. надо чтобы бекграунд был резиновый

http://s50.radikal.ru/i127/0908/7c/8384b6e1ecc3.gif

Вот чтобы этот бек можно было растянуть на другие ссылки? как это сделать?

DarkRobin добавил 10.08.2009 в 11:54

Не совсем. надо чтобы бекграунд был резиновый

http://s50.radikal.ru/i127/0908/7c/8384b6e1ecc3.gif

Вот чтобы этот бек можно было растянуть на другие ссылки? как это сделать?

Y1
На сайте с 15.11.2008
Offline
50
yura1
#4

Вообще удлинение и увеличение текста при наведении это устаревший бред... Если с помощью жава-скриптов, то обычно делают так что ссылка в меню при наведении просто съезжает вниз... В качестве примеров поищи в нете целые паки менюшек js+css

Как вариант если делать именно как ты хочешь, то можно сделать примерно так... Ты это самое увеличение текста прописываеш же в стиле... В том-же самом стиле пропиши еще и поведение картинки. т.е. чтот типа ".стиль имж", ".стиль имж а:ховер", ну а в ховере уже распиши размер картинки при наведении... Может поможет...

.
DR
На сайте с 02.08.2009
Offline
3
DarkRobin
#5
ГурУ - не склоняется )

Это я так.)

Выше показал что надо растянуть. повторение не поможет. Можно как нибудь два фона у элемнта сделать?)

DarkRobin добавил 10.08.2009 в 12:02

yura1, Я не об этом

DarkRobin добавил 10.08.2009 в 12:02

Надо чтобы фон тянулся

а не текст

Коля Дубр
На сайте с 02.03.2005
Offline
153
Коля Дубр
#6

Если я правильно понял вашу идею:

- делаете 3 вложенных эл-та

- верхнему назначаете бэкграундом картинку с левым углом

- нижнему - с правым углом

- среднему - тянущуюся область (или просто цвет).

Если делать совсем как надо - используйте спрайты, т.е. храните картинки в одном файле.

Разрабатываю общую шину (http://habrahabr.ru/company/floxim/blog/268467/) помаленьку. ...а еще у меня есть бложек (http://www.blogovo.ru/).
В Яндекс.Браузере для Windows Яндекс кобласит include в php большого
Avenger
На сайте с 22.07.2007
Offline
47
Avenger
#7

DarkRobin, набросал быстренько, пример реализации смотрите здесь http://golovnev.by/temp/menu.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
<style type="text/css">
	.nav ul {
	list-style:none;
	margin:0;
	padding:0;
}
.nav ul li {
	float:left;
	margin-left:2px;
}
.nav ul li a {
	background:url(../images/navleft.gif) top left no-repeat;
	color:#fff;
	font:12px Arial, Helvetica, sans-serif;
	display:block;
	float:left;
	height:30px;
	padding-left:3px;
	text-decoration:none;
}
.nav ul li a:hover, .nav ul li a:hover span {
	cursor:pointer;
	text-decoration:underline;
}
.nav ul li a span { 
	background:url(../images/navright.gif) top right no-repeat;	
	float:left;	
	display:block;
	height:30px;
	padding:8px 3px 0 0;
	white-space:nowrap;
}
</style>
</head>
<body>
 	<div class="nav">
			<ul>
				<li><a href="#"><span>HOME</span></a></li>
				<li><a href="#"><span>Рассчитать маршрут</span></a></li>
				<li><a href="#"><span>Помощь</span></a></li>
				<li><a href="#"><span>Полезная информация</span></a></li>
				<li><a href="#"><span>Отчеты</span></a></li>
				<li><a href="#"><span>Личный кабинет</span></a></li>
			</ul>
	</div>
</body>
</html>
С уважением, Андрей Головнев (http://golovnev.by/)

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