list - ¿Alternativas a etiquetas ilegales o<p> dentro de etiquetas<li> en un vuelo estacionario?

popup hover

Question

¿Alguien tiene una sugerencia para crear espacios de línea tipo párrafo dentro de una etiqueta <li> que incluye una pseudo-clase pop-up?

Tengo un <span> que aparece en a:hover y quiero que el texto que aparece se divida en 2 párrafos. Funciona con <br> en FF pero quiero hacer lo correcto (¡ahora que he descubierto que está mal!) ...

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 ;
}

Answer 1

¿Por qué es ''incorrecto''?

su etiqueta br quizás debería codificarse como:

 <br />

Answer 2

¿Por qué tu manera actual está mal?

Puedes intentar esto

<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>

Answer 3

Err no hay nada de malo en tener <br> dentro de <a> o <span> . Es perfectamente válido de acuerdo con la especificación HTML 4.01 .

Editar: <li> puede contener <p> , <br> y prácticamente cualquier otra cosa.

La especificación es un poco difícil de leer, pero básicamente dice:

• LI puede contener block o en inline
• block está hecho de P + algunas otras cosas
• inline está hecho de special + algunas otras cosas
• special está hecho de A + BR + algunas otras cosas

Con respecto a <a> dice:

• A puede contener en inline excepto A
• inline ... ver arriba

Answer 4

Podrías agregar otro lapso como una etiqueta p "falsa":

 <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>

Y en tu css:

#rightlist span span {display:block;margin:...}

Tenga en cuenta que todo lo que declare para #rightlist span se aplicará a #rightlist span span , por lo que es posible que necesite anular algunas de las reglas en #rightlist span span .

Answer 5

Su problema puede surgir del hecho de que está usando una etiqueta <span> incorrectamente.

Se supone que los espacios en blanco son elementos en línea y lo estás diseñando como si fuera un elemento de bloque. Es cierto que puede forzar un tramo para comportarse como un elemento de bloque mediante la adición del estilo correcto, pero esto no siempre se respeta por los diversos navegadores que hay.

Idealmente, deberías estar usando un div en su lugar. Luego puede usar etiquetas p o más etiquetas div para indicar los párrafos (idealmente p, ya que semánticamente son en realidad párrafos en lugar de bloques de texto no relacionados).