Div Кнопка - ссылка, как быть?

[logicface]

Здравствуйте еще раз.=)

Столкнулся с такой проблемой как кнопка - ссылка Div.

Вот код:

<a href="#">
  <div class="button_uznai1">
    <p class="button_uznai1_text">Узнай больше!</p>
  </div>
 </a>

Вот файл css для этого дела:

div.button_uznai1 {
	width:172px;
	height:41px;
	background-image:url(uznai2.gif);
	margin-left:50px;
	margin-top:30px;
	display:block;
	}

div.button_uznai1:hover {
	background-position:0 -41px;
	}

p.button_uznai1_text {
	font-size:16px;
	font-family:"Arial Black", Gadget, sans-serif;
	padding-top:7px;
	}

Вот так кнопка выглядит в браузере:

(Нажмите для увеличения)

Проблема в том, что мне надо сделать так, что бы див был ссылкой а не текст внутри дива, но текст внутри дива почему то наследует параметры от тега <a>.

Подскажите пожалуйста как правильно сделать такую кнопку?

[skvor]

Во-первых, это невалидно.

Во-вторых, Вы сделали тег ссылкой, следовательно, всё, что внутри так и будет работать как ссылка.

В общем случае, текст в div-е наследует свойства родителя.

Если не надо подчеркивания или изменения цвета, определите стиль для <a>.

a { text-decoration: none; color: black; }

или

a { text-decoration: inherit; color: inherit; }

Edited November 5, 2012 by skvor

[logicface]

Спасибо большое, хоть валидатор и сказал что ошибок нету, но я думаю, что так делать не правильно. Да и мало того, что придется в свойствах тега <a> убирать нижнее подчеркивание, так еще и изменения цвета текста при наведении и нажатии, короче геморой.=)

Собственно подскажите как правильно сделать такую кнопку?

Вот немного помучал кнопку и получилось вот так:

html

<div class="button_uznai1">
                     <a href="" class="button_uznai1_text">Узнай больше!</a>
                    </div>

css

div.button_uznai1 {
	width:172px;
	height:41px;
	background-image:url(uznai2.gif);
	margin-left:50px;
	margin-top:30px;
	display:block;
	}

div.button_uznai1:hover {
	background-position:0 -41px;
	}

a.button_uznai1_text {
	color:#41423c;
	text-decoration:none;
	display:block;
	position:relative;
	font-size:16px;
	font-family:"Arial Black", Gadget, sans-serif;
	padding-top:7px;
	padding-bottom:11px;
	}

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

Edited November 5, 2012 by logicface

[skvor]

Ошибок нет, если проверять HTML5. В 4-ом тег <a> не должен содержать блочные элементы. Честно говоря, сам не знал, что уже разрешили

Как правильно - не знаю. Зависит от того, что делаете. Может разумно объявить в стилях соответствующие ссылки блочными элементами.

a.button { display: block; ну и все размеры и свойства для кнопки }

<a class="button" ...>Это и будет кнопкой</a> - вложенные <div> и <p> уже не нужны.

Edited November 5, 2012 by skvor

[logicface]

Спасибо большое, вы очень помогли!