Forum Gry Hobby Sprzęt Rozmawiamy Archiwum Regulamin

Forum: Kto dobrze ogarnia HTML itp.?. Potrzebna pomoc.

10.02.2013 12:27
1
Babiczka
107
Senator
Image

Kto dobrze ogarnia HTML itp.?. Potrzebna pomoc.

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ść.

10.02.2013 13:19
2
odpowiedz
Hakim
184
Senator

Poszukaj jakiegoś slidera wykorzystującego jquery.
http://www.google.pl/search?q=jquery+slider

10.02.2013 14:59
👍
3
odpowiedz
Babiczka
107
Senator

Dzięki, zaraz sprawdzę czy coś się nada :)

10.02.2013 22:24
4
odpowiedz
Babiczka
107
Senator

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?

10.02.2013 22:44
5
odpowiedz
Hakim
184
Senator

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ć.

10.02.2013 22:50
6
odpowiedz
Babiczka
107
Senator

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;

11.02.2013 11:34
7
odpowiedz
Babiczka
107
Senator

Hakim moge przeslać cały folder ze strona i zobaczysz o co chodzi.

Forum: Kto dobrze ogarnia HTML itp.?. Potrzebna pomoc.