валидные картинка и её ховер

John Do · May 10, 2012

Как корректно вставить 2 картинки в одну область, что бы валидатор не фурчал? Например меню картинками, одна картинка элемент меню, вторая ховер на нём.

Я 2 класса делаю с разными бекграундами и в <a> пихаю <li> что есть невалидно.

Код HTML

<ul>

</ul>

Код CSS

.top_menu1{

background:url(Images/top_menu1.png) no-repeat;

width:54px;

height:12px;

margin:1px 0 0 5px;

}

.top_menu1:hover{

background:url(Images/top_menu1_red.png) no-repeat;

cursor:pointer;

}

mrnobody · May 10, 2012

Как корректно вставить 2 картинки в одну область, что бы валидатор не фурчал? Например меню картинками, одна картинка элемент меню, вторая ховер на нём.
Я 2 класса делаю с разными бекграундами и в <a> пихаю <li> что есть невалидно.
Код HTML
<ul>
 <a href="index.html"><li class="top_menu1"></li></a>        
</ul>

Код CSS


.top_menu1{
    background:url(Images/top_menu1.png) no-repeat;
    width:54px;
    height:12px;
    margin:1px 0 0 5px;
}
.top_menu1:hover{
    background:url(Images/top_menu1_red.png) no-repeat;
    cursor:pointer;
}

Так сделайте наоборот, внутрь <li> вставьте <a>. Элемент <a>...</a> строчный, а в строчный элемент НЕЛЬЗЯ вкладывать блочный, даже если строчному элементу поставить св-во display: block;. Это все равно что вы обертываете <h1> в <a>, так нельзя делать.

Вот как я это представляю http://jsfiddle.net/nXJzn/ :blush:

HTML+CSS код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
	li{
		list-style: none;
		width: 640px;
		height: 426px;
		background: url(http://www.bugaga.ru/uploads/posts/2012-02/1330510921_6.jpg) no-repeat;
	}
	li:hover{
		background: url(http://www.bugaga.ru/uploads/posts/2012-02/1330510997_12.jpg) no-repeat;
	}
	li>a{
		display: block;
		width: 100%;
		height: 100%;
	}
</style>
</head>
<body>
	<ul>
		<li><a href="/"></a></li>
	</ul>
</body>
</html>

Ой, я напутал :facepalmxd: .Вот как http://jsfiddle.net/nXJzn/1/

HTML+CSS код:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
	li{
		list-style: none;
		width: 640px;
		height: 426px;
	}
	li>a{
		display: block;
		background: url(http://www.bugaga.ru/uploads/posts/2012-02/1330510921_6.jpg) no-repeat;
		width: 100%;
		height: 100%;
	}
	li>a:hover{
		background: url(http://www.bugaga.ru/uploads/posts/2012-02/1330510997_12.jpg) no-repeat;
	}
</style>
</head>
<body>
	<ul>
		<li><a href="/"></a></li>
	</ul>
</body>
</html>

И чтобы перейти на индексный файл (который находится в корневой папке) можно в атрибуте href указать "/" (слеш) - <a href="/">Ссылка</a>.

Edited May 11, 2012 by mrnobody

John Do · May 10, 2012

С радостью бы сделал, но в таком случае ссылки не работают.

Viper · May 10, 2012

Так сделайте наоборот, внутрь <li> вставьте <a>. Элемент <a>...</a> строчный, а в строчный элемент НЕЛЬЗЯ вкладывать блочный, даже если строчному элементу поставить св-во display: block;. Это все равно что вы обертываете <h1> в <a>, так нельзя делать.

В общем-то, Да. Но наскольно я помню, тег <A> уже не сточный: с приходом HTML5 его повередние пересмотрели и решили сделать Блочным.

SelenIT · May 10, 2012

В элемент A, да, теперь можно вкладывать почти что угодно (кроме интерактивных элементов, прежде всего других А). Но в UL, как и раньше, можно вкладывать только LI и ничто иное, и нарушение этого правила — насилие над DOM, при котором браузер имеет право на самооборону с непредсказуемыми для кодера последствиями

Не заморачивайтесь «блочностью» и «строчностью» элементов HTML, она и раньше не решала (P, DT и все заголовки были «блочными», но вкладывать в них можно было только «строчное»), а теперь ее и вовсе отменили. Думайте о том, для чего элемент предназначен и в чем его функциональная роль, а не о том, как он обычно отображается на экране.

John Do · May 11, 2012

Всем спасибо, всё промозговал и озеленил.

Sign In

валидные картинка и её ховер

Question

John Do

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

John Do

Link to comment

Share on other sites

Viper

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

John Do

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information