Alternatives à la < br > illégale ou < p > dans < li > balises en vol stationnaire?
-
06-07-2019 - |
Question
Quelqu'un vous a-t-il suggéré de créer des espaces de ligne de type paragraphe dans une balise < li >
incluant une pseudo-classe flottante?
J'ai un < span >
qui apparaît sur a: hover
et je souhaite que le texte qui apparaît soit divisé en 2 paragraphes. Cela fonctionne avec < br >
en FF mais je veux faire la bonne chose (maintenant que j'ai découvert que c'est faux!) ...
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 ;
}
La solution
Votre problème peut provenir du fait que vous utilisez un < span > tag incorrectement.
Les étendues sont supposées être des éléments en ligne et vous les appelez comme s'il s'agissait d'un élément de bloc. Certes, vous pouvez forcer une étendue à se comporter comme un élément de bloc en ajoutant le bon style, mais cela peut ne pas toujours être respecté par les différents navigateurs.
Idéalement, vous devriez utiliser un div à la place. Vous pouvez ensuite utiliser soit les balises p, soit d’autres balises div pour indiquer les paragraphes (idéalement p, car ce sont sémantiquement des paragraphes plutôt que des blocs de texte non apparentés).
Autres conseils
Euh, rien de mal à avoir < br >
dans < un >
ou < span >
. Il est parfaitement valide selon la spécification HTML 4.01 .
Modifier: < li >
peut contenir < p >
, < br >
et à peu près tout le reste.
La spécification est un peu difficile à lire mais dit en gros:
-
LI
peut contenirun bloc
ouen ligne
Le bloc -
P
+ d'autres éléments -
inline
est composé despécial
+ d'autres éléments -
spécial
est composé deA
+BR
+ d'autres éléments
En ce qui concerne < a >
, il est indiqué:
-
Un
peut conteniren ligne
saufA
-
inline
... voir ci-dessus
Vous pouvez y placer une autre plage en tant que "faux". balise 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>
Et dans votre css:
#rightlist span span {display:block;margin:...}
Notez que tout ce que vous déclarez pour #rightlist span
s'appliquera à #rightlist span
. Vous devrez donc peut-être remplacer certaines règles. dans #rightlist span span
.
Pourquoi est-ce «faux»?
votre balise br devrait peut-être être codée comme suit:
<br />
Pourquoi votre voie actuelle est-elle fausse?
Vous pouvez essayer ceci
<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>