Форум Практика оптимизации Любые вопросы от новичков по оптимизации

div слои. в чем ошибка?

12
lamansions
На сайте с 29.11.2007
Offline
54
lamansions
804

Добрый день!

Изучаю тут слои div. Вроде более-менее понятно, но вот непонятно одно, это даже возможно больше к css относится...

Валидатор выдает ошибку. Я в последнее время привыкла к нему прислушиваться. Так вот в чем ошибка я непонимаю.

ошибка такая:

Document type does not allow element ... here; missing one of ... start-tag
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

There are 2 types of elements in the body of a HTML file, inline and block elements. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

In the following sample, the <font> tag is an inline tag which can only contain other inline tags. But the <p> tag is a block tag. So a <p> tag can not be contained in a <font> tag.

код такой:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Апрель - Детский региональный фестиваль искусств</title>
<style type="text/css">
<!--
body {
background-color: #a2f08a;
}
div#nasait {
background-image: url(image/nasait.gif);
background-repeat: no-repeat;
background-position: center;
position: absolute;
height: 30px;
width: 100%;
top: 415px;
overflow: visible;
z-index: 10;
left: 2px;
}
div#znachok {
position: absolute;
height: 300px;
width: 100%;
background-position: center;
overflow: visible;
top: 363px;
left: 5px;
background-image: url(image/znachok.jpg);
background-repeat: no-repeat;
z-index: 8;
}
div#aprel {
position: absolute;
height: 388px;
width: 100%;
background-position: center top;
overflow: visible;
top: 0px;
left: 0px;
bottom: 0px;
background-image: url(image/aprel900.jpg);
background-repeat: no-repeat;
z-index: 9;
}
-->
</style>
</head>

<body>
<a href="/aprel.php"><div style="background-image: url(image/nasait.gif);
background-repeat: no-repeat;
background-position: center;
position: absolute;
height: 30px;
width: 100%;
top: 415px;
overflow: visible;
z-index: 10;
left: 2px;"></div>
</a>
<a href="/aprel.php"><div id="aprel"></div></a>
<a href="/aprel.php"><div id="znachok"></div>
</a>
</body>

</html>
gl_SPICE
На сайте с 28.08.2006
Offline
53
gl_SPICE
#1

Вы вложили блочный элемент в инлайновый.

Товаровед.инфо — помощь в выборе качественных товаров и услуг (http://www.tovaroved.info/)
lamansions
На сайте с 29.11.2007
Offline
54
lamansions
#2

спасибо! а вы поясните что это значит и как надо?

gl_SPICE
На сайте с 28.08.2006
Offline
53
gl_SPICE
#3
lamansions:
спасибо! а вы поясните что это значит и как надо?

У вас тег <div> вложен в тег <a>, а по стандартам это как бы делать нельзя, так как инлайновые теги (<a>, <font>, <span>...) не могут содержать внутри себя блочные элементы (<div>, <table>), только такие же инлайновые.

В вашем примере все конструкции типа <a><div></div></a> надо заменить на <div><a></a></div>

Bush
На сайте с 19.07.2006
Offline
108
Bush
#4
<a href="/aprel.php"><div id="aprel"></div></a>
<a href="/aprel.php"><div id="znachok"></div>
</a>

Я так понимаю что вы хотите задать линке бекграунд с опред высотой, длиной?

Если да, эт оделается так: 


.buttons a {

        display: block;

        width: 140px;

	color: #5f5b5b;

	background:url{img};

	}
lamansions
На сайте с 29.11.2007
Offline
54
lamansions
#5

gl_SPICE

Спасибо! была у меня такая мысль, но по-другому не придумала как сделать...

Bush

Спасибо, своими словами скажу. Мне нужно чтобы картинка была ссылкой. Картинка-фон. Причем вся. Если просто вкладывать тег <a> в <div>, то ничего не будет. Вообще сайт временно лежит тут:

http://totoro-club.ru/

Вот нужно чтоб все эти картинки были ссылками.

По Вашему варианту попробовала, но ничего не получилось, может что не так сделала, можно мне подробнее вариант? с примером моего кода если не трудно?

MX
На сайте с 12.08.2007
Offline
22
MrX
#6

сделайте onclick на слое.

Анонимный минус в репу это аргумент для неучей (подсмотрено у Бармалейкина)
kimberlit
На сайте с 13.03.2007
Offline
370
kimberlit
#7
lamansions:
Мне нужно чтобы картинка была ссылкой.

<a href=""><img src="" alt="" /></a>

lamansions
На сайте с 29.11.2007
Offline
54
lamansions
#8

MrX

спасибо, сейчас попробую, не приходило в голову. А это во всех браузерах работает? потому как пользователи сайта много кто чайники и совсем с дурацкими компами, типа как в школах бывают...

kimberlit

мне нужно чтобы картинка была фоном:-)

MX
На сайте с 12.08.2007
Offline
22
MrX
#9

во всех современных браузерах работает.

такие ссылки не индексируются поисковиками.

lamansions
На сайте с 29.11.2007
Offline
54
lamansions
#10

а вот то что не индексируются это плохо:-(

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий