валидация вложенных списков

Быколай · April 5, 2009

Помогите разобраться с валидатором!

Определился с доктайпом: HTML 4.01 Transitional. Но ругается на менюшку:

# Error Line 58 , Column 20 : document type does not allow element "DIV" here; assuming missing "LI" start-tag Строка 58, столбец 20: тип документа, не допускает элемент "DIV" здесь, если отсутствует "LI" старт-тег
<div class="autors" >
# Error Line 62 , Column 9 : document type does not allow element "UL" here; assuming missing "LI" start-tag Линия 62, колонка 9: тип документа, не допускает элемент "UL" здесь, если отсутствует "LI" старт-тег

Менюшка не простая с раскатывающимся списком:

<div id="menu">
<ul type="circle">
 <li><a href="http://samizdam.spb.ru/" title="На главную!!">Главная.</a></li>
<div class="autors">
   <ul>

	<li onclick="tree('a',4)">Авторы:
	 <ul>
	  <li id="a1"><a href="/mira/">Мирра П</a></li>
	  <li id="a2"><a href="/giena/">Весёлая Гиена</a></li>
	  <li id="a3"><a href="/gnato/">Николай Гнатьо</a></li>
	  <li id="a4"><a href="/volchona/">Волчона</a><li>
	 </ul>
	</li>
  </ul>
 </li>
</div>

<li><a href="/catalog/">Произведения.</a></li>
<li><a href="/book/">Книги.</a></li>
<li><a href="/project/">Проекты</a></li>

<div class="autors">
 <ul>
 <li onclick="tree('b',3)" title="Связь, заказ и гостевая+форум!!">Дорогой читатель!!
  <ul>
   <li id="b1"><a href="/feedback/" title="Связь-заказ">»»Обратная связь««</a></li>
   <li id="b2"><a href="/forum/">ФОРУМ!!</a></li>
   <li id="b3"><a href="/gb/">Гостевая.</a></li>
  </ul>
 </li>
 </ul>
</div>
</ul>
</div>

css:

.autors{ list-style-image: url('/i/knop1.gif');}
.autors ul {cursor: pointer; margin: 0px 0px; padding: 0px 0px; list-style-image: url('/i/knop1.gif');}
.autors ul ul li {display:none; list-style-image: url('/i/knop1.gif');}

js, на всякий случай :

var tmpid,am,let,count;
  function tree(letter, amount)
   {
	count=1;
	am=amount;
	let=letter;
	show2();
   }
  function show2()
   {
	if(count<am)
	 {
	  tmpid = '' + let + count;
	  setTimeout('show(tmpid, 1)', 100);
	  count++;
	 }
	  else if(count==am)
	   {
		tmpid = '' + let + count;
		setTimeout('show(tmpid, 0)', 100);
	   }
   }
  function show(id, flag)
   {
	var el = document.getElementById(id);
	el.style.display = (el.style.display == 'block')?'none':'block';
	if(flag!=0) show2();
   }

Если начинаю менять местами дивы/списки, то перестаёт работать должным образом: все элементы меню должны быть выровнены в одной линии и раскрываться по щелчку на заглавном.

Возможно ли сохранить функциональность этого меню и добиться валидности????

Justnewone · April 5, 2009

Обратите внимания вот на этот участок:

<div class="autors">
   <ul>

	<li onclick="tree('a',4)">Авторы:
	 <ul>
	  <li id="a1"><a href="/mira/">Мирра П</a></li>
	  <li id="a2"><a href="/giena/">Весёлая Гиена</a></li>
	  <li id="a3"><a href="/gnato/">Николай Гнатьо</a></li>
	  <li id="a4"><a href="/volchona/">Волчона</a><li> - тут
	 </ul>
	</li>
  </ul>
</li> - тут
</div>

Edited April 5, 2009 by Justnewone

Быколай · April 5, 2009

Justnewone, спасибо, убрал. Лишний тег. Но ругается по прежнему.

Насколько я понял, нельзя так вкладывать дивы в списки, по доктайпу? А как бы это всё-таки реализовать?

Edited April 5, 2009 by Быколай

Justnewone · April 5, 2009

Justnewone, спасибо, убрал. Лишний тег. Но ругается по прежнему.
Насколько я понял, нельзя так вкладывать дивы в списки, по доктайпу? А как бы это всё-таки реализовать?

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

ой, кажется вижу

а что если

<div class="autors">
   <ul>

	<li onclick="tree('a',4)">Авторы:
	 <ul>
	  <li id="a1"><a href="/mira/">Мирра П</a></li>
	  <li id="a2"><a href="/giena/">Весёлая Гиена</a></li>
	  <li id="a3"><a href="/gnato/">Николай Гнатьо</a></li>
	  <li id="a4"><a href="/volchona/">Волчона</a><li>
	 </ul>
	</li>
  </ul>
</li>
</div>

сменить на

<li class="autors">
   <ul>

	<li onclick="tree('a',4)">Авторы:
	 <ul>
	  <li id="a1"><a href="/mira/">Мирра П</a></li>
	  <li id="a2"><a href="/giena/">Весёлая Гиена</a></li>
	  <li id="a3"><a href="/gnato/">Николай Гнатьо</a></li>
	  <li id="a4"><a href="/volchona/">Волчона</a><li>
	 </ul>
	</li>
  </ul>
</li>

Edited April 5, 2009 by Justnewone

Быколай · April 5, 2009

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

если сменить, в ИЕ будет пустой пункт списка а вообще работает, и ошибка Валидатора пропадает...

а если класс присваивать кликательному "ли" то свойства css пропадают и вылазят скрытые части списка...

ссылка (на валидатор?=мой_сайт): http://validator.w3.org/check?uri=http://samizdam.spb.ru

Edited April 5, 2009 by Быколай

Justnewone · April 5, 2009

если сменить, в ИЕ будет пустой пункт списка а вообще работает, и ошибка Валидатора пропадает...
а если класс присваивать кликательному "ли" то свойства css пропадают и вылазят скрытые части списка...
ссылка (на валидатор?=мой_сайт): http://validator.w3.org/check?uri=http://samizdam.spb.ru

А если это

.autors{ list-style-image: url('/i/knop1.gif');}
.autors ul {cursor: pointer; margin: 0px 0px; padding: 0px 0px; list-style-image: url('/i/knop1.gif');}
.autors ul ul li {display:none; list-style-image: url('/i/knop1.gif');}

поменять на

.autors {cursor: pointer; margin: 0px 0px; padding: 0px 0px; list-style-image: url('/i/knop1.gif');}
.autors ul li {display:none; list-style-image: url('/i/knop1.gif');}

?

Быколай · April 5, 2009

поменять на

.autors {cursor: pointer; margin: 0px 0px; padding: 0px 0px; list-style-image: url('/i/knop1.gif');}
.autors ul li {display:none; list-style-image: url('/i/knop1.gif');}

?

дык... display:none; - пропадает вообще вся эта часть под классом. и диву присваивал и LI...

думается проблема в самом HTML - со вложенностью намудрёно.

Edited April 5, 2009 by Быколай

Justnewone · April 5, 2009

дык... display:none; - пропадает вообще вся эта часть под классом. и диву присваивал и LI...
думается проблема в самом HTML - со вложенностью намудрёно.

Ковыряйте скрипт, он неправильно выбирает селектор и не назначает display:block

Быколай · April 5, 2009

Ковыряйте скрипт, он неправильно выбирает селектор и не назначает display:block

нее... разобрался!!!!! Урррра!

дивы ни к чему оказались: надо было убрать их и в их качестве использовать LI который перед ними идёт. Короче так выглядит:

<div id="menu">
<ul type="circle">
 <li class="autors"><a href="http://samizdam.spb.ru/" title="На главную!!">Главная.</a>

   <ul>

	<li onclick="tree('a',4)" title="ЖМИ!!">Авторы:
	 <ul>
	  <li id="a1"><a href="/mira/" class="mira" title="Поэтесса">Мирра П</a>;</li>
	  <li id="a2"><a href='/giena/' class='giena' title='Еще один безумец'>Весёлая Гиена</a>;</li>
	  <li id="a3"><a href='/gnato/' class='gnato' title='Стихи и проза'>Николай Гнатьо</a>;</li>
	  <li id="a4"><a href='/volchona/' class='volchona' title='В логово'>Волчона</a>;<li>
	 </ul>
	</li>
  </ul>
 </li>

<li><a href="/catalog/">Произведения.</a></li>
<li><a href="/book/">Книги.</a></li>
<li><a href="/project/">Проекты</a></li>
<li class="autors"><a href="http://abyrvalg.spb.ru/" title="Безцензурная газетка!!">Альманах АБЫРВАЛГ!!</a>
 <ul>
 <li onclick="tree('b',3)" title="Связь, заказ и гостевая+форум!!">Дорогой читатель!!
  <ul>
   <li id="b1"><a href="/feedback/" title="Связь-заказ">»»Обратная связь««</a></li>
   <li id="b2"><a href="http://www.forum.samizdam.spb.ru/" title="Форум СамИздама!!">ФОРУМ!!</a></li>
   <li id="b3"><a href="/gb/" title="Жалобная Книга;{">Гостевая.</a></li>
  </ul>
 </li>
 </ul>
</li>
</ul>
</div>

Собственно это и есть правильное вложение списков...

Justnewone, спасибо за участие и идеи!!

Sign In

валидация вложенных списков

Question

Быколай

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Justnewone

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Быколай

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information