Tworzę stronę w DW, HTML5. Mam pewną wizję, mianowicie, na stronie umieściłem aparat -> fotka.
Jak umieścić w zdjęciu pokaz slajdów?. Na wyświetlaczu, tego aparatu (zdjęcie), chcę, aby były tam inne zdjęcia z autoplay.
#photos ‹;;
clear: none;
float: left;
margin-left: 59%;
width: 41.0256%;
display: block;
height: 300px;
background-image: url(../fotki/aparat.png);
background-size: contain;
background-repeat: no-repeat;
margin-top: 60px;
overflow: hidden;
background-position: center;
›;;
W programowanie się bawię od paru dni, więc prosze o wyrozumiałość.
udało się, ale za nic nie mogę ustawić slidera w pionie. height, margin, padding nie daje efektu. Mam tak napisane:
#slides ‹
position: absolute;
margin-left: 75%;
z-index: 100;
width: -xxpx;
›
xx - wartosci nie wplywaja na polozenie
anyone?
Zakładam, że czarne tło do zdjęć to jakiś tam div, powiedzmy id="zdjęcia". Nadaj temu divovi position:relative.
Jeśli nie masz tam żadnych floatów to nie powinno się nic zepsuć.
Podejrzewam, że #slides w związku z tym, że ma pozycjonowanie absolutne, pozycjonuje jest względem elementu body.
Ale to tylko moje wróżby, bo bez wglądu na cały kod to można tylko strzelać.
Hakim kod już wklejam.
.gridContainer ‹
width: 79.1304%;
max-width: 1232px;
padding-left: 0.4347%;
padding-right: 0.4347%;
margin: auto;
overflow: hidden;
›
#LayoutDiv1 ‹
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
›
#header ‹
clear: both;
float: left;
margin-left: 0;
width: 100%;
height: 70px;
border-radius: 0px 0px 20px 20px;
background-color: #333;
vertical-align: top;
display: block;
overflow:hidden
text-overflow: ellipsis;
color: #FFF;
box-shadow: 3px 4px 2px 0px #000;
›
#photos ‹
clear: none;
float: left;
margin-left: 59%;
width: 41.0256%;
display: block;
height: 300px;
background-image: url(../fotki/logo1.png);
background-size: contain;
background-repeat: no-repeat;
margin-top: 60px;
overflow: hidden;
background-position: center;
position:relative;
›
#Mainframe ‹
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
›
#maintext ‹
clear: both;
float: left;
margin-left: 0px;
width: 45%;
display: block;
margin-top: -170px;
height: 230px;
font-size: 1.1em;
border-radius: 20px;
text-indent: 10px;
font-weight: normal;
word-wrap: break-word;
padding: 20px;
overflow: hidden;
background-color: #FFF;
background-position: fixed;
box-shadow: 3px 4px 2px 0px #000;
margin-bottom: 280px;
background-repeat: repeat-x;
background-image: url(../fotki/tlo2.png);
color: #FFF;
›
#stopka ‹
display: block;
margin-top: 60px;
border-radius: 20px 20px 0px 0px;
background-color: #333;
text-align: center;
font-size: 16px;
position: fixed;
bottom: 0px;
right: inherit;
width: 79%;
border-top-width: medium;
color: #FFF;
box-shadow: 2px 0px 1px 1px #000;
›
/*
Slideshow w aparacie
*/
#container ‹
width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
›
/*
Slideshow
*/
#slides ‹
position: absolute;
margin-left: 75%;
z-index: 100;
height: -345px;
›
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
.slides_container ‹
width: 277px;
overflow: hidden;
position: relative;
display: none;
›
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a ‹
width:277px;
height:210px;
display:block;
›
.slides_container a img ‹
display:block;
›
/*
Pagination
*/
.pagination ‹
margin:26px auto 0;
width:100px;
›
.pagination li ‹
float:left;
margin:0 1px;
list-style:none;
›
.pagination li a ‹
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url(../img/pagination.png);
background-position:0 0;
float:left;
overflow:hidden;
›
.pagination li.current a ‹
background-position:0 -12px;
