Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Zamknięcie obrazka w divie - problem z Nivo Slider
Forum PHP.pl > Forum > Przedszkole
apathedosheu
Mam problem z zamknięciem obrazka w divie. Na stronie korzystam z popularnego slidera "Nivo Slider v2.7.1". W celu zrozumienia mojego problemu: http://img832.imageshack.us/img832/1853/sdproblem.png

Plik strony (index.html)
  1. <div id="logo">
  2. <div class="slider-wrapper theme-default">
  3. <div class="ribbon"></div>
  4. <div id="slider" class="nivoSlider">
  5. <img src="logo/yellow.jpg" alt="yellow" />
  6. </div>
  7. </div>
  8. </div>


Plik Nivo Slider (nivo-slider.css)
  1. .nivoSlider {
  2. position:relative;
  3. }
  4. .nivoSlider img {
  5. position:absolute;
  6. top:0px;
  7. left:0px;
  8. }
  9. /* If an image is wrapped in a link */
  10. .nivoSlider a.nivo-imageLink {
  11. position:absolute;
  12. top:0px;
  13. left:0px;
  14. width:100%;
  15. height:100%;
  16. border:0;
  17. padding:0;
  18. margin:0;
  19. z-index:6;
  20. display:none;
  21. }
  22. /* The slices and boxes in the Slider */
  23. .nivo-slice {
  24. display:block;
  25. position:absolute;
  26. z-index:5;
  27. height:100%;
  28. }
  29. .nivo-box {
  30. display:block;
  31. position:absolute;
  32. z-index:5;
  33. }
  34. /* Caption styles */
  35. .nivo-caption {
  36. position:absolute;
  37. left:0px;
  38. bottom:0px;
  39. background:#000;
  40. color:#fff;
  41. opacity:0.8; /* Overridden by captionOpacity setting */
  42. width:100%;
  43. z-index:8;
  44. }
  45. .nivo-caption p {
  46. padding:5px;
  47. margin:0;
  48. }
  49. .nivo-caption a {
  50. display:inline !important;
  51. }
  52. .nivo-html-caption {
  53. display:none;
  54. }
  55. /* Direction nav styles (e.g. Next & Prev) */
  56. .nivo-directionNav a {
  57. position:absolute;
  58. top:45%;
  59. z-index:9;
  60. cursor:pointer;
  61. }
  62. .nivo-prevNav {
  63. left:0px;
  64. }
  65. .nivo-nextNav {
  66. right:0px;
  67. }
  68. /* Control nav styles (e.g. 1,2,3...) */
  69. .nivo-controlNav a {
  70. position:relative;
  71. z-index:9;
  72. cursor:pointer;
  73. }
  74. .nivo-controlNav a.active {
  75. font-weight:bold;
  76. }


Plik stylu index-a (style.css)
  1. #logo {
  2. -moz-border-radius: 10px;
  3. -webkit-border-radius: 10px;
  4. border-radius: 10px;
  5. float: right;
  6. margin-right: 5%;
  7. height: 240px;
  8. background: black;
  9. border: 5px solid #ffb300;
  10. width: 62%;
  11. }


Co zmienić?
Damonsson
Pokaż to online.

Do ramki musisz raczej dać overflow hidden, do obrazka z-index niższy niż ramki i position dla obydwóch elementów.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.