Проблема наложения текста на рисунок

genius · 08.01.2010, 02:39

спасибо, а что значит переверстал?

Niemans · 08.01.2010, 02:41

Откройте и сравните с тем что было, просто мне было лень разбираться с вашей страничкой и я быстро набросал свой вариант.

genius · 09.01.2010, 23:10

Nimans нужна твоя помощь!!

Niemans · 10.01.2010, 00:06

Я готов!

genius · 10.01.2010, 00:17

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

Niemans · 10.01.2010, 01:11

Можно! Сейчас последует вопрос "Как?", отвечаю - спрайтом.

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<style>
.HoverMe {
	display: block;
	margin: 0 auto;
	height:30px;
	width:100px;
	background: url(images/HoverMe.jpg) 0px -30px;
	border: none;
	text-indent: -9999px;
}
.HoverMe:hover {
	background-position: 0 0
}

</style>
</head>
<body>
<a href="" class="HoverMe"></a>
</body>
</html>

Суть такова.
Создаем одну картинку, в которой два фрагмента при наведении и без него соответственно, их можно расположить друг над другом или с востока на запад (пример).
Ну а дальше просто задаем размер блока (ширину и высоту той части картинки что показать желаем всем), делаем ему фон и прописываем фону position (в моем примере background: url(images/HoverMe.jpg) 0px -30px;).
Дальше описываем то что будет происходить при наведении, те изменение position. В моем примере картинка показывается нижняя, а при наведении верхняя. Те Размер картинки 100px на 60px, а показывается только нужная часть.

genius · 10.01.2010, 01:59

покажи на примере моего сайта,я сделал ссылку на кнопку "главная" (button1) и хочу сделать чтобы при наведении она менялась на (button1-1), так и не понял как убрать чтоб вокруг кнопки не показывало синем контуром что это ссылка.

Niemans · 10.01.2010, 02:13

Цитата:

так и не понял как убрать чтоб вокруг кнопки не показывало синем контуром что это ссылка

Контур это border, убрать его можно написав в стиле img {border: 0}

Цитата:

покажи на примере моего сайта,я сделал ссылку на кнопку "главная"

Я же написал, вроде подробно даже получилось.
Вот на примере кнопки "Главная":

genius · 10.01.2010, 15:39

Nimans, все сделал как ты сказал вторую кнопку "форум", все получилось также сделал кнопки "купить" и "контакт" но они почемуто не отображаютя в браузере в чем моя ошибка

Niemans · 10.01.2010, 15:56

.second {
display: block;
margin: 0 auto;
height:54px;
width:112px;
background: url(img/button1.jpg) 0px 0px;
border: none;
text-indent: -9999px;
}
.second:hover {
background-position: 0 -54px
}
}
.second2 {
display: block;
margin: 0 auto;
height:54px;
width:112px;
background: url(img/button3.jpg) 0px 0px;
border: none;
text-indent: -9999px;
}

В 130 строчке index.htm уберите лишнюю скобку

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
рисунок средствами php	kostia	ASP, Perl, PHP и MySQL	0	28.11.2012 01:35
проблема с написанием текста	Lavr	Растровая графика	3	01.10.2009 20:14
Рисунок	ddddd	Графические работы	14	02.07.2009 02:21
Рисунок	Mustools	Графические работы	6	10.09.2007 06:43
Вместо текста иероглифы в поле ввода текста	IgorQ	Технологии Flash	1	22.03.2007 20:49

08.01.2010, 02:39	#21
genius	спасибо, а что значит переверстал?

08.01.2010, 02:41	#22
Niemans	Откройте и сравните с тем что было, просто мне было лень разбираться с вашей страничкой и я быстро набросал свой вариант.

09.01.2010, 23:10	#23
genius	Nimans нужна твоя помощь!!

10.01.2010, 00:17	#25
genius	сделав ссылку на картинку, можно ли сделать чтобы при наведении она менялась

10.01.2010, 01:11	#26
Niemans	Можно! Сейчас последует вопрос "Как?", отвечаю - спрайтом. Код HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title></title> <style> .HoverMe { display: block; margin: 0 auto; height:30px; width:100px; background: url(images/HoverMe.jpg) 0px -30px; border: none; text-indent: -9999px; } .HoverMe:hover { background-position: 0 0 } </style> </head> <body> <a href="" class="HoverMe"></a> </body> </html> Суть такова. Создаем одну картинку, в которой два фрагмента при наведении и без него соответственно, их можно расположить друг над другом или с востока на запад (пример). Ну а дальше просто задаем размер блока (ширину и высоту той части картинки что показать желаем всем), делаем ему фон и прописываем фону position (в моем примере background: url(images/HoverMe.jpg) 0px -30px;). Дальше описываем то что будет происходить при наведении, те изменение position. В моем примере картинка показывается нижняя, а при наведении верхняя. Те Размер картинки 100px на 60px, а показывается только нужная часть. Последний раз редактировалось Niemans; 10.01.2010 в 01:11.. Причина: Добавлено сообщение

10.01.2010, 15:56	#30
Niemans	.second { display: block; margin: 0 auto; height:54px; width:112px; background: url(img/button1.jpg) 0px 0px; border: none; text-indent: -9999px; } .second:hover { background-position: 0 -54px } } .second2 { display: block; margin: 0 auto; height:54px; width:112px; background: url(img/button3.jpg) 0px 0px; border: none; text-indent: -9999px; } В 130 строчке index.htm уберите лишнюю скобку