Кнопки из спрайта на одной строке

Paranoia · February 5, 2012

Доброго времени суток. Используя технику "CSS Sprites" хочу сделать горизонтальное меню из кнопок-изображений, но каждая кнопка размещается на новой строке, как это исправить?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>CSS спрайты</title>
		<style type="text/css">

		a.blueBtn {
		  display: block;
		  height: 30px;
		  background: url('http://www.google.ru/images/nav_logo102.png') 0 0 no-repeat;
		  width: 146px;
		}

		a.otherBtn{
		  display: block;
		  height: 30px;
		  background: url('http://www.google.ru/images/nav_logo102.png') 0 -100px no-repeat;
		  width: 146px;
		}

		</style>
	</head>
	<body>
		<a href="#" class="blueBtn"></a> 123 <a href="#" class="otherBtn"></a>
	</body>
</html>

Switch74 · February 5, 2012

display: inline-block;

ablay2009 · February 5, 2012

Если меню картинками, то просто задайте ширину явно (пиксели/проценты), если поверх фона есть текст, то используйте свойство display:inline-block;. Грубо говоря, оно определяет элемент снаружи как блочный, а изнутри как строчный.

Paranoia · February 5, 2012

inline-block помогло, спасибо Switch74, но вот это не понял:

Если меню картинками, то просто задайте ширину явно (пиксели/проценты)

Задать ширину чего? Ведь width и height у каждой кнопки в CSS присутствует. Текст над кнопками не нужен.

В догонку:

Что бы задать альтернативный текст для каждой кнопки в таком меню правильно ли будет добавить его так?

<a href="#" alt="text" class="blueBtn"></a>

Switch74 · February 5, 2012

alt для картинки а для ссылок лучше title

ablay2009 · February 6, 2012

Я тогда немного не дописал, извините. Еще надо прописать float:left для кнопок, тогда они будут стоять в ряд. Но да в этом случае все таки проще inline-block.

Sign In

Кнопки из спрайта на одной строке

Question

Paranoia

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Switch74

Link to comment

Share on other sites

ablay2009

Link to comment

Share on other sites

Paranoia

Link to comment

Share on other sites

Switch74

Link to comment

Share on other sites

ablay2009

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information