Текст под картинкой в ссылке

dropoff · September 25, 2009

Приветствую.

Столкнулся с проблемой. Может просто не догоняю, или устал просто.

Что нужно? Нужно в ссылке выводить картинку и под ней текст. Все через CSS. Тут сложного ничего нету, но проблема в padding'е.

Пример.

Есть CSS

#menu li.home a {float:left;display:block;width:49px;height:48px;background: url(../img/sour.gif) no-repeat -169px -6px;}
#menu li.home a:hover {background-position: -169px -57px;}

И есть сcылка

<li class="home"><a href="/" title="Главная">Главная</a></li>

Таким образом текст(Главная) по середине картинки. Как опустить текст под картинку? Если ставить padding, то тогда высота li будет в два раза больше и отодвигает другое меню которое ниже. Т,е. height+padding получаются.

Как видно, картинка с hover'ом тоже, пробовал делать одиночные, что бы не указывать высоту, таки все равно от padding'а отступ остается. vertical-align:bottom; не помогает.

Как быть? Что я упускаю или не учитываю?

Заранее спасибо.

Justnewone · September 25, 2009

Например, отказаться вообще от height, просто назначив нужный паддинг сверху под картинку. Не знаю что за задумка, конечно, но при указании высоты если текста будет много - то он перевалится за габариты блока во всех браузерах кроме IE6. Я никогда так не делаю.

dropoff · September 25, 2009

Текста - одно слово.

Я убираю высоту и делаю паддинг, но текст-то по середине получается. Как его опустить вниз? vertical-align не помогает. Я что-то упускаю...

Вот пример

#menu li.home a {float:left;display:block;width:49px;background: url(../img/sour.gif) no-repeat -169px -6px;padding:10px 0;}
#menu li.home a:hover {background-position: -169px -57px;}

Текст опускается вниз, но и отступ под текстом большой. Потому как текст по середине.

psywalker · September 25, 2009

какой то ты хренью промышляешь, давай ссылку

dropoff · September 25, 2009

Делаю локально. Нету ссылки.

Если не очень понятно, могу изобразить на картинке.

psywalker · September 25, 2009

Делаю локально. Нету ссылки.
Если не очень понятно, могу изобразить на картинке.

Давно пора!

Давай два скрина, ДО и После

dropoff · September 25, 2009

Вот так

Т.е. когда делаю pdding:15px 0; к примеру, то текст опускается, но отступ от текста внизу есть, а он не нужен.

Я почем и спрашиваю, как прибить текст к низу.

psywalker · September 25, 2009

Вот так
Т.е. когда делаю pdding:15px 0; к примеру, то текст опускается, но отступ от текста внизу есть, а он не нужен.
Я почем и спрашиваю, как прибить текст к низу.

Такой смысл не пойдёт?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
	div {width: 70px; height: 70px; overflow: hidden;  background: red;}
		span { display: block;}
		a:hover span { margin-top: 20px;}
</style>

</head>

<body>

<div>
	<a href="#">
   		<img src="" alt="Картинка" />
		<span>jsaflkjsf  fdsflklk</span>
   	</a>
</div>

</body>
</html>

dropoff · September 25, 2009

Такой смысл не пойдёт?

В том-то и дело, что нет.

Там картинки с ховером и должны быть прописаны в CSS.

psywalker · September 25, 2009

В том-то и дело, что нет.
Там картинки с ховером и должны быть прописаны в CSS.

Погоди, я чё то не понял задачу, есть вопросы:

1) Ты изначально имеешь один рисунок с тексом?

2) Рисунок поставлен не IMG, а фоном через CSS, правильно?

3) А под ним находится текст, обычный, НЕ фоном?

4) Ты хочешь сделать сделать просто :HOVER эффект, что-бы при наведении на ссылку менялась только картинка(фон), а слово под ней оставалось на месте?

5) И ещё я так понял блок, в котором находится всё это действо, не расширялся и не менял свои размеры вообще не в ширину не в высоту?

dropoff · September 25, 2009

1 - нет. иконки без текста (именно по этому и гемор весь)

2 - да. фоном

3 - да. обычный текст

4 - нет. чтобы и картинка менялась и текст.

5 - не понял какой блок?. если ты про саму ссылку, то высота при паддинге меняется(что не нужно). и сам блок ползет естественно в высоте. А под ним еще одно меню и оно уходит вниз.

psywalker · September 25, 2009

Оно? http://psywalker.ru/Forum/Hover/main.html

dropoff · September 25, 2009

Оно

Спасибо огромное!!!

В осле 6 пашет?

Такая маленькая задача, а сколько мороки.

psywalker · September 25, 2009

Оно
Спасибо огромное!!!
В осле 6 пашет?
Такая маленькая задача, а сколько мороки.

Сделал, что бы в ИЕ6 работало, перепроверь ка: http://psywalker.ru/Forum/Hover/main.html

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

Edited September 25, 2009 by psywalker

dropoff · September 25, 2009

Видимо тут простого выхода нету.

Может в таком случае использовать opacity?

Только как выделить прозрачность только картинки а не текста? там же наследование будет.

psywalker · September 25, 2009

Видимо тут простого выхода нету.
Может в таком случае использовать opacity?
Только как выделить прозрачность только картинки а не текста? там же наследование будет.

воо, нашёл решение для ИЕ6, пришлось замутить behavior: url(csshover.htc); - для наведения, нука протести: http://psywalker.ru/Forum/Hover/main.html

dropoff · September 25, 2009

Работает. Правда с глюками, но картинка меняется.

Сейчас попробую на меню попробовать.

Спасибо большое.

Больше не буду рисовать макеты с такими меню)

psywalker · September 25, 2009

Работает. Правда с глюками, но картинка меняется.
Сейчас попробую на меню попробовать.
Спасибо большое.
Больше не буду рисовать макеты с такими меню)

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

Почему же не будешь больше такие макеты рисовать, рисуй, чтож теперь, из-за ИЕ6 отказываться от многих вещей. Хрен ему, победим собаку

dropoff · September 25, 2009

Наверно лучше ничего и нету)))

Победить ИЕ6 я думаю еще не скоро получиться. Пока админы сайтов сделают фиксы под него, то так еще несколько лет будет))

Спасибо, что помог.

psywalker · September 25, 2009

Наверно лучше ничего и нету)))
Победить ИЕ6 я думаю еще не скоро получиться. Пока админы сайтов сделают фиксы под него, то так еще несколько лет будет))
Спасибо, что помог.

Да не за что, забудь, всегда пиши если чё

Zippovich · September 25, 2009

Ну так Вы ставите паддинг вверху и внизу, вот он и показывается у Вас:

Запись: 15px 0 означает, что сверху и снизу отступ 15, с лева и с права 0. Ставьте так: 15px 0 0 или padding-top: 15px;

Justnewone · September 25, 2009

Ну вы че в самом деле...

<a href="#">Текст</a>

CSS:

A{

display:block;

width:100px;

padding-top:80px;

background:url("/path/to/file.img") no-repeat XX YY;

}

A:hover{

background-image:url("/path/to/file_hover.img");

}

Edited September 25, 2009 by Justnewone

psywalker · September 25, 2009

Ну вы че в самом деле...
<a href="#">Текст</a>
CSS:
A{
display:block;
width:100px;
padding-top:80px;
background:url("/path/to/file.img") no-repeat XX YY;
}
A:hover{
background-image:url("/path/to/file_hover.img");
}

Ага, наивный ты человек, ведь надо ещё что-бы при наведении фраза менялась под картинкой, дык что-бы это дело в ИЕ6 тоже работало. Я смог добиться такого эффекта тока таким путём. Если сможешь предложить ещё варианты, буду тока рад увидеть!

http://psywalker.ru/Forum/Hover/main.html

psywalker · September 25, 2009

Воо мужики, сообразил отменный вариант, вообще ничё не глючит и behavior: url(csshover.htc); даже не нужен. Автор когда увидит, оболдеет вообще 100%. (Отменно работает даже в ИЕ5 ) http://psywalker.ru/Forum/Hover/main2.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>Untitled Document</title>
<style type="text/css">
	*{ margin:0; padding: 0;}
		ul li { overflow: hidden; width: 80px; height: 50px; border: 1px solid red; list-style: none;}
			ul li a { 
				display: block;
				text-align: center;
				width: 80px; 
				height: 20px;
				background: url(sprite.gif) 50% 0 no-repeat; 
				padding-top: 29px;

			}
			ul li a span {
				display: block;
				width: 80px; 
				height: 20px; 
				padding-top: 30px;
				margin-top: 10px;
				background: #fff url(sprite.gif) 50% -72px no-repeat;
				text-align: center;
			}
			ul li a:hover { margin-top: -20px; padding-top: 0px;}
			ul li a:hover span { margin-top: 0;}
</style>
</head>


<body>
	<ul>
		<li>
			<a href="#">Главная
				<span>НаведениЕ</span>
			</a>
		</li>
	</ul>
</body>
</html>

Значит было всё же решение ещё одно и возможно не последнее и с ещё меньшими затратами

Edited September 25, 2009 by psywalker

psywalker · September 26, 2009

А вот и третье решение сделанное mishka2, с использованием абсолюта, но интересное:

http://psywalker.ru/Forum/Hover/main3.html

mishka · September 26, 2009

На самом деле это решение было сделанно что бы показать что ие6 нормально с абсолютом работает.

А такой случай я естественно делал бы без абсолюта. Если просто текст менять надо то там абсолют ненужен.

<!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>:hover</title>
	<style type="text/css">
	*{ margin: 0; padding: 0;}
	ul { list-style: none;}
	ul li a{
		display: block;
		text-align: center;
		width: 80px;
		height: 20px;
		background: url(sprite.gif) 50% 0 no-repeat;
		padding-top: 30px;
		border: 1px solid red;
	}
	ul li a .hover{
		display: none;
		cursor:pointer;
		text-indent:0;
	}
	ul li a:hover{
		background: url(sprite.gif) 50% -72px no-repeat;
	}
	ul li a:hover .hover { display: inline;}
	ul li a:hover .default { display: none;}
	</style>
</head>

<body>
	<ul>
		<li>
			<a href="#">
				<span class="default">Главная</span>
				<span class="hover">НаведениЕ</span>
			</a>
		</li>
	</ul>
</body>
</html>

Edited September 26, 2009 by mishka2

Sign In

Текст под картинкой в ссылке

Question

Link to comment

Share on other sites

34 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information