Столкнулся с одной неприятной штукой, и хочу узнать мнение тех, кто посмышлённей меня в web-дизайне.
Итак, у меня есть некий документ, допустим:
Код HTML:
<P>Первый абзац документа</P>
<P>Второй абзац</P>
Штука в том, что я хочу в него вставить "отметки на полях", т.е. напротив некоторых абзацев на полях вывести, например, значок, но не просто, а со всплывающим меню. Для этого делаю классы:
Код:
.document_container {
position: relative;
padding-left: 20px;
}
.menu {
position: absolute;
left: 0px;
width: 20px; height: 20px;
/*тут ещё background со значком и прочие мелочи*/
}
.menu_items {
position: relative;
z-index: 1;
display: none;
/*отступы и прочие мелочи*/
}
.menu:hover .menu {
display: block;
}
После этого делаю так:
Код HTML:
<div class="document_container">
<P>
<div class="menu">
<div class="menu_items">Содержимое всплывающего меню</div>
</div>
Первый абзац документа
</P>
<P>
<div class="menu">
<div class="menu_items">Содержимое меню для второго абзаца</div>
</div>
Второй абзац
</P>
</div>
Думаю, смысл понятен. "menu" логически находится внутри параграфа, и
привязан к его местоположению. Но из-за position: absolute и явно заданной left-координаты он выносится на поля. При наведении на menu курсора мыши срабатывает селектор "menu:hover .menu", и содержимое меню становится видимым. Тут ничего хитрого.
Однако, из-за того, что тег <P> не обязательно закрывать и он сам закрывается при встрече блока, ломается структура документа, как только я добавляю div с меню (потому что тег <P> открыт перед ним, но закрыт после него)! DIV с меню на SPAN заменить нереально - ведь там должны быть именно блоки!
Поэтому вопросы:
1) насколько обязательно применять <P> с точки зрения работы с сайтом поисковых машин и прочего. Есть ли у тега <P> какое-то реальное отличие от <DIV> помимо его дурацкого автозакрытия?
2) есть ли другой путь сделать менюшку, привязанную к определённому месту в тексте (собственно, вынесена она на поля, или просто встречается в тексте, не так важно)?