Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

Przypisy

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

Przypisy

Post 06.04.2017, 16:34:59

Mam problem z wizualizacją przypisów. Przykładowy dokument HTML:

<html xmlns:mml="http://www.w3.org/1998/Math/MathML">
<head>
<link rel="stylesheet" href="book.css" type="text/css"/>
<meta charset="UTF-8"/>
</head>
<body>
<div class="da-document">
<p class="da-p">Pierwszy tekst w akapicie<sup class="reference">1<div class="tooltiptext"><p class="footnote_text">Pierwszy przypis</p></div></sup>. Jakiś tekst<sup class="reference">2<div class="tooltiptext"><p class="footnote_text">Drugi przypis</p></div></sup>, inny tekst<sup class="reference">3<div class="tooltiptext"><p class="footnote_text">Trzeci przypis</p></div></sup>. Lorem ipsum </p>
</div>
</body>
</html>

Fragment arkusza stylów:

/* Przypisy */
/* ######## */
sup.reference {color:red;
position: relative;
display: inline-block;
}
sup.reference > div.tooltiptext {
visibility: hidden;
width: 400px;
background-color: black;
color: #fff;
text-align: left;
padding: 6px;
border-radius: 6px;
position: absolute;
z-index: 1;
}
sup.reference:hover > div.tooltiptext {
visibility: visible;
}
.tooltiptext > p {
margin: 0px;
}

Ukrywanie treści przypisu i wyświetlaniu jej po najechaniu kursorem na odnośnik działa poprawnie w przypadku przypisu 2 i 3. Ten efekt nie występuje dla przypisu 1. Wygląda na to, że użyty w CSS selektor nie "łapie" pierwszego elementu typu div będącego dzieckiem elementu <sup/>.

Będę wdzięczny za wskazanie błędu, jaki popełniam.
Dolnowrzeszczanin
Posty: 2
Dołączył(a): 06.04.2017

Re: Przypisy

Post 06.04.2017, 18:04:22

Problem wynika z tego, że podany kod HTML jest niezgodny ze standardem. Zawartością <p> (na dowolnym poziomie zagnieżdżenia) nie może być ani <div> ani kolejny <p>. Zawartością <sup> nie może być <div> ani <p>. Całość skutkuje tym, że przeglądarka tworzy drzewo DOM całkiem inaczej niż zaprezentowałeś to w kodzie. Dlatego powinieneś użyć elementów z kategorii https://html.spec.whatwg.org/multipage/ ... -content-2 do utworzenia zawartości <sup> i odpowiednio ostylować CSSem.
Avatar użytkownikakuku
Rafał Kukawski

+∞
+∞

Posty: 19665
Dołączył(a): 14.04.2002

Re: Przypisy

Post 06.04.2017, 21:04:14

Nauczka dla mnie: bezrefleksyjne wykorzystywanie zalegających w sieci przykładów nie popłaca. Dziękuję, kuku, teraz jest dobrze.
Dolnowrzeszczanin
Posty: 2
Dołączył(a): 06.04.2017


Powrót do CSS


Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 2 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50886 zarejestrowanych użytkowników.
Najnowszy użytkownik: ohufeni


Nasi użytkownicy napisali:

  • 936370 wiadomości
  • w 246834 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)