Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Zastąpienie position: absolute; w szablonie allegro
Forum PHP.pl > Forum > Przedszkole
t9omek
8.04.2015, 15:11:04
Witam, w szablonie allegro chciałbym wykorzystać slider (html i css), jednak zawiera on elementy position: absolute z którymi nie współpracuje allegro, czy da się je jakoś zastąpić ?

[HTML] pobierz, plaintext 
  1. <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  2. <style>
  3. <!--
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11.  
  12. @font-face {
  13.     font-family: 'WebSymbolsRegular';
  14.     src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot');
  15.     src: url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.woff') format('woff'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont.ttf') format('truetype'), url('http://html5css3demos.bplaced.net/css3-slider-v3/websymbols-regular-webfont#WebSymbolsRegular') format('svg');
  16. }
  17.  
  18. @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);
  19.  
  20. * {
  21.     margin: 0;
  22.     padding: 0;
  23. }
  24.  
  25. body {
  26.     height: 900px;
  27.     padding: 1px;
  28. }
  29.  
  30.  
  31. #slideshow-wrap {
  32.     display: block;
  33.     height: 458px;
  34.     min-width: 500px;
  35.     max-width: 900px;
  36.     margin: auto;
  37.     border: 12px rgba(255,255,240,1) solid;
  38.     -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
  39.     -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
  40.     box-shadow: 0px 0px 5px rgba(0,0,0,.8);
  41.     margin-top: 20px;
  42.     position: relative;
  43. }
  44.  
  45. #slideshow-inner {
  46.     width: 100%;
  47.     height: 100%;
  48.     background-color: rgb(0,0,0);
  49.     overflow: hidden;
  50.     position: relative;
  51. }
  52.  
  53. #slideshow-inner>ul {
  54.     list-style: none;
  55.     height: 100%;
  56.     width: 600%;
  57.     overflow: hidden;
  58.     position: relative;
  59.     left: 0px;
  60.     -webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  61.     -moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  62.     -o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  63.     transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
  64. }
  65.  
  66. #slideshow-inner>ul>li {
  67.     width: 16.66%;
  68.  
  69.     float: left;
  70.     position: relative;
  71. }
  72.  
  73. #slideshow-inner>ul>li>img {
  74.     margin: auto;
  75.     height: 100%;
  76. }
  77.  
  78. #slideshow-wrap input[type=radio] {
  79.     position: absolute;
  80.     left: 50%;
  81.     bottom: 15px;
  82.     z-index: 100;
  83.     visibility: hidden;
  84. }
  85.  
  86. #slideshow-wrap label:not(.arrows):not(.show-description-label) {
  87.     position: absolute;
  88.     left: 50%;
  89.     bottom: -45px;
  90.     z-index: 100;
  91.     width: 12px;
  92.     height: 12px;
  93.     background-color: rgba(200,200,200,1);
  94.     -webkit-border-radius: 50%;
  95.     -moz-border-radius: 50%;
  96.     border-radius: 50%;
  97.     cursor: pointer;
  98.     -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
  99.     -moz-box-shadow: 0px 0px 3px rgba(0,0,0,.8);
  100.     box-shadow: 0px 0px 3px rgba(0,0,0,.8);
  101.     -webkit-transition: background-color .2s;
  102.     -moz-transition: background-color .2s;
  103.     -o-transition: background-color .2s;
  104.     transition: background-color .2s;
  105. }
  106.  
  107. #slideshow-wrap label:not(.arrows):active { bottom: -46px }
  108.  
  109. #slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }
  110.  
  111. #slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }
  112.  
  113. #slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }
  114.  
  115. #slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }
  116.  
  117. #slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) }
  118.  
  119. #slideshow-wrap input[type=radio]#button-6:checked~label[for=button-6] { background-color: rgba(100,100,100,1) }
  120.  
  121. #slideshow-wrap label[for=button-1] { margin-left: -36px }
  122.  
  123. #slideshow-wrap label[for=button-2] { margin-left: -18px }
  124.  
  125. #slideshow-wrap label[for=button-4] { margin-left: 18px }
  126.  
  127. #slideshow-wrap label[for=button-5] { margin-left: 36px }
  128.  
  129. #slideshow-wrap label[for=button-6] { margin-left: 54px }
  130.  
  131. #slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }
  132.  
  133. #slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }
  134.  
  135. #slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }
  136.  
  137. #slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }
  138.  
  139. #slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }
  140.  
  141. #slideshow-wrap input[type=radio]#button-6:checked~#slideshow-inner>ul { left: -500% }
  142.  
  143. label.arrows {
  144.     font-family: 'WebSymbolsRegular';
  145.     font-size: 25px;
  146.     color: rgb(255,255,240);
  147.     position: absolute;
  148.     top: 50%;
  149.     margin-top: -25px;
  150.     display: none;
  151.     opacity: 0.7;
  152.     cursor: pointer;
  153.     z-index: 1000;
  154.     background-color: transparent;
  155.     -webkit-transition: opacity .2s;
  156.     -moz-transition: opacity .2s;
  157.     -o-transition: opacity .2s;
  158.     transition: opacity .2s;
  159.     text-shadow: 0px 0px 3px rgba(0,0,0,.8);
  160. }
  161.  
  162. label.arrows:hover { opacity: 1 }
  163.  
  164. label.arrows:active { margin-top: -23px }
  165.  
  166. input[type=radio]#button-1:checked~.arrows#arrow-2, input[type=radio]#button-2:checked~.arrows#arrow-3, input[type=radio]#button-3:checked~.arrows#arrow-4, input[type=radio]#button-4:checked~.arrows#arrow-5, input[type=radio]#button-5:checked~.arrows#arrow-6, input[type=radio]#button-6:checked~.arrows#arrow-1  {
  167.     right: -55px;
  168.     display: block;
  169. }
  170.  
  171. input[type=radio]#button-1:checked~.arrows#arrow-6 ,input[type=radio]#button-2:checked~.arrows#arrow-1, input[type=radio]#button-3:checked~.arrows#arrow-2, input[type=radio]#button-4:checked~.arrows#arrow-3, input[type=radio]#button-5:checked~.arrows#arrow-4,input[type=radio]#button-6:checked~.arrows#arrow-5 {
  172.     left: -55px;
  173.     display: block;
  174.     -webkit-transform: scaleX(-1);
  175.     -moz-transform: scaleX(-1);
  176.     -ms-transform: scaleX(-1);
  177.     -o-transform: scaleX(-1);
  178.     transform: scaleX(-1);
  179. }
  180. input[type=radio]#button-1:checked~.arrows#arrow-6 { left: -110px }
  181.  
  182. input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }
  183.  
  184. input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }
  185.  
  186. input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }
  187.  
  188. input[type=radio]#button-6:checked~.arrows#arrow-5 { left: -93px }
  189.  
  190. .description {
  191.     position: absolute;
  192.     top: 0;
  193.     left: 0;
  194.     width: 260px;
  195.     font-family: 'Yanone Kaffeesatz';
  196.     z-index: 1000;
  197. }
  198.  
  199. .description input { visibility: hidden }
  200.  
  201. .description label {
  202.     font-family: 'WebSymbolsRegular';
  203.     background-color: rgba(255,255,240,1);
  204.     position: relative;
  205.     left: -17px;
  206.     top: 00px;
  207.     width: 40px;
  208.     height: 27px;
  209.     display: inline-block;
  210.     text-align: center;
  211.     padding-top: 7px;
  212.     border-bottom-right-radius: 15px;
  213.     cursor: pointer;
  214.     opacity: 0;
  215.     -webkit-transition: opacity .2s;
  216.     -moz-transition: opacity .2s;
  217.     -o-transition: opacity .2s;
  218.     transition: opacity .2s;
  219.     z-index: 5;
  220.     color: rgb(20,20,20);
  221. }
  222.  
  223. #slideshow-inner>ul>li:hover .description label { opacity: 1 }
  224.  
  225. .description input[type=checkbox]:checked~label { opacity: 1 }
  226.  
  227. .description .description-text {
  228.     background-color: rgba(255,255,230,.5);
  229.     padding-left: 45px;
  230.     padding-top: 25px;
  231.     padding-right: 15px;
  232.     padding-bottom: 15px;
  233.     position: relative;
  234.     top: -35px;
  235.     z-index: 4;
  236.     opacity: 0;
  237.     -webkit-transition: opacity .2s;
  238.     -moz-transition: opacity .2s;
  239.     -o-transition: opacity .2s;
  240.     transition: opacity .2s;
  241.     color: rgb(20,20,20);
  242. }
  243.  
  244. .description input[type=checkbox]:checked~.description-text { opacity: 1 }
  245.  
  246.  
  247.  
  248. -->
  249. </style>
  250.  
  251.  
  252.  
  253.  
  254.  
  255.  
  256.  
  257.  
  258.  
  259.  
  260.  
  261.  
  262.  
  263.  
  264.  
  265.  
  266.  
  267.  
  268.  
  269.  
  270.  
  271.  
  272.  
  273.  
  274.  
  275.  
  276.     <div id="slideshow-wrap">
  277.         <input type="radio" id="button-1" name="controls" checked="checked"/>
  278.         <label for="button-1"></label>
  279.         <input type="radio" id="button-2" name="controls"/>
  280.         <label for="button-2"></label>
  281.         <input type="radio" id="button-3" name="controls"/>
  282.         <label for="button-3"></label>
  283.         <input type="radio" id="button-4" name="controls"/>
  284.         <label for="button-4"></label>
  285.         <input type="radio" id="button-5" name="controls"/>
  286.         <label for="button-5"></label>
  287. 		  <input type="radio" id="button-6" name="controls"/>
  288. 		   <label for="button-6"></label>
  289.  
  290.  
  291.  
  292.  
  293.  
  294.  
  295.  
  296.  
  297.         <label for="button-1" class="arrows" id="arrow-1">></label>
  298.         <label for="button-2" class="arrows" id="arrow-2">></label>
  299.         <label for="button-3" class="arrows" id="arrow-3">></label>
  300.         <label for="button-4" class="arrows" id="arrow-4">></label>
  301.         <label for="button-5" class="arrows" id="arrow-5">></label>
  302. 		  <label for="button-6" class="arrows" id="arrow-6">></label>
  303.  
  304.         <div id="slideshow-inner">
  305.             <ul>
  306.                 <li id="slide1">
  307.                     <img src="http://zapodaj.net/images/c478124c409a0.png" />
  308.  
  309.                 </li>
  310.                 <li id="slide2">
  311.                  <img src="http://zapodaj.net/images/c478124c409a0.png" />
  312.  
  313.                 </li>
  314.                 <li id="slide3">
  315.                   <img src="http://zapodaj.net/images/c478124c409a0.png" />
  316.  
  317.                 </li>
  318.                 <li id="slide4">
  319.                  <img src="http://zapodaj.net/images/c478124c409a0.png" />
  320.  
  321.                 </li>
  322.                 <li id="slide5">
  323.                     <img src="http://zapodaj.net/images/c478124c409a0.png" />
  324.  
  325.                 </li>
  326.  
  327.  
  328.                 <li id="slide6">
  329.                   <img src="http://zapodaj.net/images/c478124c409a0.png" />
  330.  
  331.                 </li>
  332.             </ul>
  333.         </div>
  334.     </div>
  335.  
  336.  
  337.  
  338.  
  339.  
  340.  
[HTML] pobierz, plaintext
ZeTu
8.04.2015, 17:39:04
Myślę, że najlepszym rozwiązaniem jest napisanie do allegro, może odpowiedzą Ci na to pytanie.
tzm
8.04.2015, 17:41:26
Allegro nie przewiduje takich bajerow. Nie ogarniesz, zawroc poki nie zmarnowales czasu.
t9omek
8.04.2015, 18:08:23
a znacie jakiś przykład galerii która może być zastosowana w szablonie allegro ?

a znacie jakiś przykład galerii która może być zastosowana w szablonie allegro ?
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.