Альтернативы незаконным <br> или <p> в тегах <li> при наведении курсора?
Есть ли у кого-нибудь предложение по созданию межстрочных интервалов типа абзаца в теге <li>, который включает всплывающий псевдокласс?
У меня есть <span>, который появляется на a:hover, и я хочу, чтобы всплывающий текст был разбит на 2 абзаца. Он работает с <br> в FF, но я хочу поступить правильно (теперь, когда я обнаружил, что это неправильно!) ...
html:
<div id = "rightlist">
<ul>
<li><a href = "">List item
<span>
words words words that are "paragraph" 1 of List item
<br><br>
different words that make up "paragraph" 2 of List item
</span></a></li>
css:
#rightlist {
margin-top: 10px; margin-right: 5px; width: 387px ; height: 239px ;
background-color: #7EBB11 ;
display: table-cell;
z-index: 100 ;
float: right ;
}
#rightlist ul {
text-align: left;
margin: 0;
margin-top: 6px;
font-family: sans-serif;
font-size: 20px ;
color: black ;
}
#rightlist a
{
display: table-cell;
text-decoration: none; color: black;
background: #7EBB11 ;
}
/*appearance of the <a> item (but before the <span> tag) on hover*/
#rightlist a:hover {
color: white;
}
/*appearance of the spanned content within <a></a> tags when not hovered */
/* %%%%% important - keep position:absolute in this div %%%%% */
#rightlist a span {
display: none;
position: absolute ;
margin-left: -412px;
top: -10px; left: 10px; padding: 10px ;
z-index: 100;
width: 380px; height: 222px;
color: white; background-color: #7EBB11;
font: 0.75em Verdana, sans-serif; font-size: 13px ; color: black;
text-align: left;
}
/*appearance of spanned content within <a> tags when hovered*/
#rightlist a:hover span {
display: table-cell ;
}
Я предполагаю, что тот факт, что <ul> строго относится к своим прямым потомкам (должно быть только <li> s), может указывать на то, что те же ограничения применяются к <li>. Они этого не делают.
Ответы 5
Вы можете вставить туда другой промежуток как «поддельный» тег p:
<li><a href = "">List item
<span>
<span>words words words that are "paragraph" 1 of List item</span>
<span>different words that make up "paragraph" 2 of List item</span>
</span></a></li>
И в вашем css:
#rightlist span span {display:block;margin:...}
Примечание все, что вы объявляете для #rightlist span, будет применяться к #rightlist span span, поэтому вам может потребоваться переопределить некоторые правила в #rightlist span span.
Tx Oli, но это поместило два блока друг на друга как отдельные, но одновременные экземпляры зависания. Было бы нормально, если бы каждый абзац текста имел известный размер (я мог бы указать размер и положение №2, чтобы он был ниже №1 и т. д.), Но, к сожалению, это не так. Все еще ломаю голову над этим ..
Нет ничего плохого в том, чтобы <br> был внутри <a> или <span>. Это совершенно верно согласно спецификация HTML 4.01.
Обновлено: <li> может содержать <p>, <br> и многое другое.
Спецификация немного трудна для чтения, но в основном говорит:
LIможет содержатьblockилиinlineblockсделан изP+ еще кое-чтоinlineсделан изspecial+ еще кое-чтоspecialсделан изA+BR+ еще кое-что
Что касается <a>, он говорит:
Aможет содержатьinline, кромеA.inline... см. Выше
конечно - но он у меня внутри <li>, я думаю, что это "юридическая" проблема!
Это не юридическая проблема. LI может содержать все, что вы хотите.
Почему ваш нынешний путь неверен?
Вы можете попробовать это
<span>
<p>words words words that are "paragraph" 1 of List item</p>
<p>different words that make up "paragraph" 2 of List item</p>
</span>
<p> нельзя использовать внутри <span>
Это полностью суть этого поста, Ким. Вам не разрешается помещать элементы уровня блока (div, p, ul, ol и т. д.) Внутрь таких элементов, как a, span и т. д. Это противоречит спецификациям.
Проблема может возникнуть из-за того, что вы неправильно используете тег <span>.
Предполагается, что промежутки являются встроенными элементами, и вы стилизуете их так, как если бы это был блочный элемент. По общему признанию, вы можете заставить span вести себя как блочный элемент, добавив правильный стиль, но это не всегда может быть соблюдено различными браузерами.
В идеале вместо этого вы должны использовать div. Затем вы можете использовать теги p или дополнительные теги div для обозначения абзацев (в идеале p, поскольку семантически они фактически являются абзацами, а не несвязанными блоками текста).
но могу ли я поместить <div> в <li>? Я думал, что это противоречит спецификациям?
В спецификациях HTML или XHTML я не знаю ничего, что запрещало бы их. В спецификации XHTML [w3.org/TR/xhtml1/#prohibiteds]] есть список запретов, но div в элементах списка не упоминается.
Фактически, если вы посмотрите на DTD (<! ELEMENT LI - O (% flow;) * - list item ->), вы заметите, что никаких запретов нет, я думаю, они будут указаны по, например - (DIV).
Почему это «неправильно»?
ваш тег br, возможно, следует закодировать как:
<br />
извините, ужасный ввод: W3C настоятельно рекомендует избегать этого в документе 4.01 ....
Где ? - Я все учусь! (Также в вашем вопросе не указан HTML 4.01)
Это было в отчете о проверке, который я получил для страницы, на которой был HTML-код. Вы правы, должна была быть 4.01 спецификации, извините!
Что заставляет вас думать, что эти теги недопустимы в элементе списка?