Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Jak przypiąć dymek z tekstem do innego elementu?
WebCM
post 20.06.2015, 22:47:55
Post #1





Grupa: Zarejestrowani
Postów: 375
Pomógł: 20
Dołączył: 28.07.2006

Ostrzeżenie: (0%)
-----

Jak zakotwiczyć dymek z tekstem do innego elementu na stronie, aby:

1. Automatycznie ustawiał się z góry, dołu, po lewej, po prawej stronie elementu
2. Nie przekraczał krawędzi ekranu ani nie zachodził na/pod element
3. Nie dziedziczył szerokości ani wysokości po elemencie

Dymek ma ustawioną szerokość maksymalną. Rozmiar powinien dostosować się do wolnej przestrzeni i ilości tekstu. Czy w czystym CSS jest to wykonalne?

Oto przykład:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Galeria</title>
  5.         <style>
  6.         * {
  7.             box-sizing: border-box
  8.         }
  9.         .sklep {
  10.             position: absolute;
  11.         }
  12.         .hint {
  13.             position: absolute;
  14.             left: 0;
  15.             top: 0;
  16.             background-color: black;
  17.             color: white;
  18.             padding: 6px;
  19.             max-width: 500px
  20.         }
  21.         .hint.z_lewej {
  22.             top: 50%;
  23.             transform: translate(-100%,-50%);
  24.             left: -10px;
  25.         }
  26.         .hint.z_prawej {
  27.             top: 50%;
  28.             /*left: 100%;*/
  29.             margin-left: 100%;
  30.             margin-right: -100%;
  31.             transform: translate(10px,-50%)
  32.         }
  33.         .hint.z_dolu {
  34.             top: 100%;
  35.             left: 50%;
  36.             right: -50%;
  37.             transform: translate(-50%,0)
  38.         }
  39.         </style>
  40.     </head>
  41.     <body>
  42.         <div class="sklep" style="left: 200px; top: 100px">
  43.             <img src="obraz.jpg" width="200" height="220" alt="Crapp">
  44.             <div class="hint z_prawej">Ten tekst jest bardzo długi. Szerokość hintu dopasowuje się do szerokości obrazka. To efekt niepożądany. Czy istnieją inne rozwiązania problemu poza ustaleniem szerokości hintu na sztywno? Hint nie powinien także wyjeżdżać poza obszar ekranu.</div>
  45.         </div>
  46.         <div class="sklep" style="left: 400px; top: 400px">
  47.             <img src="obraz.jpg" width="500" height="300" alt="Horse">
  48.             <div class="hint z_lewej">Krótki tekst</div>
  49.         </div>
  50.         <div class="sklep" style="left: 300px; top: 800px">
  51.             <img src="obraz.JPG" width="200" height="250" alt="Old Balance">
  52.             <div class="hint z_dolu">Ten hint wyświetli się pod spodem. Nie ma nic przeciwko, aby przekroczył szerokość obrazka, ale stało się inaczej. Po usunięciu right:-50% efekt jeszcze ciekawszy ;)</div>
  53.         </div>
  54.         <div class="sklep" style="left: 400px; top: 1300px">
  55.             <img src="obraz.pg" width="500" height="300" alt="Horse">
  56.             <div class="hint z_lewej">Czasami teksty są bardzo długie. Zobaczmy, czy ten hint wyskoczy poza ekran. Jeśli tak się stanie, jak temu zapobiec?</div>
  57.         </div>
  58.     </body>
  59. </html>
[HTML] pobierz, plaintext
Działający przykład do edycji: https://jsfiddle.net/mdhpLa7m/
Działający przykład na pełnym ekranie: https://jsfiddle.net/mdhpLa7m/embedded/result/


--------------------
„Jesteśmy różni, pochodzimy z różnych stron Polski, mamy różne zainteresowania, ale łączy nas jeden cel. Cel ten to Ojczyna, dla której chcemy żyć i pracować.” Roman Dmowski
Go to the top of the page
+Quote Post
kafowi
post 21.06.2015, 09:32:13
Post #2





Grupa: Zarejestrowani
Postów: 75
Pomógł: 20
Dołączył: 13.02.2015

Ostrzeżenie: (0%)
-----

Zakładając, że obrazek ma stałą szerokość (albo ustawiasz każdemu na sztywno) to:

Kod
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Galeria</title>
  <style>
  .obrazek1 {float:left;width:200px;height:220px;}
  .hint_prawy1 {float:right;width: calc(100% - 200px);background:yellow;}
    
  .obrazek2 {float:right;width:200px;height:220px;}
  .hint_lewy2 {float:left;width: calc(100% - 200px);background:red;}
    
  .odstep {clear:both;padding-top:10px;}
  </style>
</head>
<body>

<div class="sklep">
<img class="obrazek1" src="http://news.nationalgeographic.com/news/2009/09/photogalleries/crop-circles-pictures/images/primary/090915-05-firefox-crop-circle_big.jpg" alt="">
<div class="hint_prawy1">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
</div>
</div>

<div class="odstep"></div>

<div class="sklep">
<img class="obrazek2" src="http://news.nationalgeographic.com/news/2009/09/photogalleries/crop-circles-pictures/images/primary/090915-05-firefox-crop-circle_big.jpg" alt="">
<div class="hint_lewy2">Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
</div>
</div>
    
</body>
</html>


W innym przypadku w czystym css nie widzę rozwiązania.

edit@
Można by też spróbować z align dla obrazka.

Ten post edytował kafowi 21.06.2015, 09:38:19
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 25.04.2024 - 20:09
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn