Список во всплывающей подсказке

rediskavet · December 9, 2011

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

Допустим есть предложение, в котором к определенному термину я хочу добавить всплывающую подсказку, а в этой самой подсказке нужно отобразить список(ul). Проблема в том что даже если он спрятан (display: none), браузер все равно ставит закрывающий тег </p> и оставшийся текст предложения переносится на новую строку.


<p>
  Процессы в малой группе, отражающих неформальную 
  <span class="tooltipTerm">гештальтпсихологии
	<ul class="tooltipDescription">
	  <li>Ассоциация устойчиво</li>
	  <li>Ассоциация не устойчиво</li>
	</ul>
  </span>
  согласно традиционным представлениям, не традиционен.
</p>

Вот пример

Edited December 10, 2011 by rediskavet

psywalker · December 9, 2011

Список спане, да ещё и в параграфе? :unsure:

Браузер абсолютно правильно делает. Я бы на его месте делал бы тоже самое)

Я бы делал как-то так.

<style type="text/css">
.tooltipTerm{
position: relative;
}

.tooltipDescription{
position: absolute;

}
</style>
</head>

<body>
<p>
    В малой группе, отражающих неформальную
    <span class="tooltipTerm">гештальтпсихологии
        <span class="tooltipDescription">
            <span>Ассоциация устойчиво</span>
            <span>Ассоциация не устойчиво</span>
        </span>
    </span>
    согласно традиционным представлениям, не традиционен.
</p>

rediskavet · December 10, 2011

Спасибо Макс, но так я то-же могу, мне хочется именно блочных элементов напихать в подсказку.

Браузер абсолютно правильно делает. Я бы на его месте делал бы тоже самое)

Список в моем случае, position: absolute; то есть на другие элементы не должен влиять. Плюс к этому display: none;. В потоке его нет, на странице не отображается, а все равно блин закрывает параграф.

я с браузером не согласен.

psywalker · December 10, 2011

Браузер абсолютно правильно делает. Я бы на его месте делал бы тоже самое)
Список в моем случае, position: absolute; то есть на другие элементы не должен влиять. Плюс к этому display: none;. В потоке его нет, на странице не отображается, а все равно блин закрывает параграф.
я с браузером не согласен.

Загляни в файрбаг, увидишь, отображается он или нет

мне хочется именно блочных элементов напихать в подсказку.

А разве CSS не умеет превращать одни в другие?

Ты не забывай, что прежде всего ты работаешь со структурой, а css - это всего лишь мишура.

Kosmos · December 11, 2011

Вроде как нельзя использовать блочные элементы внутри строчных,или я ошибаюсь?

psywalker · December 11, 2011

Вроде как нельзя использовать блочные элементы внутри строчных,или я ошибаюсь?

Скорее вопрос будет корректнее задать по другому.

Разве можно использовать списки в параграфе или строчных элементах?))

Kosmos · December 11, 2011

теоретически список - блочный, параграф тоже блочный, вроде как ничего не мешает . надо спросить мнение валидатора по этому поводу)

psywalker · December 11, 2011

теоретически список - блочный, параграф тоже блочный, вроде как ничего не мешает . надо спросить мнение валидатора по этому поводу)

Тут дело не в блочности, а в том, что параграф - это место для текста, а не для списков и блоков.

Kosmos · December 11, 2011

Тут дело не в блочности, а в том, что параграф - это место для текста, а не для списков и блоков.

Согласен

SelenIT · December 11, 2011

Неважно, каков сам элемент, важно, какова его модель контента. У абзаца модель контента — (%inline;)* — от 0 до бесконечности инлайновых элементов или простого текста (#PCDATA — отпарсенные символьные данные).

Список в моем случае, position: absolute; то есть на другие элементы не должен влиять. Плюс к этому display: none;. В потоке его нет, на странице не отображается, а все равно блин закрывает параграф.

Любой CSS применяется к уже отпарсенной DOM. И на саму DOM никак повлиять не может, может лишь изменить ее отображение. А исправление ошибок недопустимой, в плане модели контента, вложенности тегов происходит в процессе самого парсинга, гораздо раньше. Так что повлиять на модель контента CSS не может физически, даже если бы очень захотел.

rediskavet · December 13, 2011

SelenIT спасибо за дельное разьяснение.

Придется все же воспользоваться вариантом Макса и городить список из спанов.

psywalker · December 13, 2011

SelenIT спасибо за дельное разьяснение.
Придется все же воспользоваться вариантом Макса и городить список из спанов.

Ну ты можешь забить на вариант Макса, и просто использовать ЖС, вычисляя координаты и распологать в них свой список, который будет находится в body)

rediskavet · December 14, 2011

Ну ты можешь забить на вариант Макса, и просто использовать ЖС, вычисляя координаты и распологать в них свой список, который будет находится в body)

Или я не понял тебя или ты предложил галимый вариант.

Мне нужен более универсальный способ, таких подсказок на странице будет несколько, и добавление каждой новой не должно занимать время.

Есть например термин, он position: relative; в нем вложен еще какой то текст с объяснением этого термина(ну или какой то доп. информацией которой на странице всегда висеть просто не надо), вложенный текст position: absolute;, еще чуть-чуть css для выравнивания этого текста относительно термина. Остается простой скрипт который показывает-скрывает подсказки. Ну и код то-же получается более читабельным, сразу понятно где термин и где его объяснение.

Sign In

Список во всплывающей подсказке

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information