Witam.
Mam taki banalny problem, który z pozoru może wydawać się prosty. Chciałbym, aby przesuwające się obrazki znalazły się TYLKO w środku diva (na czarnym tle) i aby nie pojawiały się po za tym divem. Obecnie znajdują się po za tym divem (pod czarnym tłem). Próbowałem wielu sposobów, ale nadal jest źle. Jedyny sposób jaki zadziałał, to użycie position: absolute (left, top, right, botttom w px), ale pozycjonowanie odbywa się po całej stronie. A chodzi mi o pozycjonowanie tylko w wewnątrz diva. Za przesuwanie tych wszystkich obrazków odpowiadają style w ---> photobanner.
Co muszę poprawić w kodzie, aby rozwiązać ten problem?
Tak to wygląda:
http://imageshack.com/a/img924/8827/p7QrAz.jpg
<div class="box1">
<div class="border-left">
<div class="border-right">
<div class="inner1">
<p style="text-indent: 25px">Tu będzie tekst. Tu będzie tekst. Tu będzie tekst. Tu będzie tekst. Tu będzie tekst. Tu będzie tekst. Tu będzie tekst. Tu będzie tekst. Tu będzie tekst. Tu będzie tekst. Tu będzie tekst. Tu będzie tekst. Tu będzie tekst.</p>
</div>
</div>
</div>
</div>
<div class="photobanner">
<div id="photoSlider">
<div class="photos">
<img src="obrazki/film/01.jpg" style="margin-top: 17px" />
<img src="obrazki/film/02.jpg" style="margin-top: 17px" />
<img src="obrazki/film/03.jpg" style="margin-top: 17px" />
<img src="obrazki/film/04.jpg" style="margin-top: 17px" />
<img src="obrazki/film/05.jpg" style="margin-top: 17px" />
<img src="obrazki/film/06.jpg" style="margin-top: 17px" />
<img src="obrazki/film/07.jpg" style="margin-top: 17px" />
<img src="obrazki/film/08.jpg" style="margin-top: 17px" />
</div>
</div>
</div>
.box1
{
background-color: #000000;
width: 100%;
}
.box1 .border-left
{
background: url(obrazki/border-left.gif) repeat-y left top;
}
.box1 .border-right
{
background: url(obrazki/border-right.gif) repeat-y right top;
}
.box1 .inner1
{
padding: 10px 50px 180px;
font-size: 11px;
text-align: justify;
color: white;
line-height: 1.4;
}
.photobanner
{
overflow: hidden;
margin-left: auto;
margin-right: auto;
background-color: #0000ff;
width: 900px;
}
#photoSlider
{
width: 1100px;
height: 134px;
}
#photoSlider img
{
width: 200px;
height: 100px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#photoSlider img:hover
{
-webkit-transform: scale(1.3,1.3);
-moz-transform: scale(1.3,1.3);
-o-transform: scale(1.3,1.3);
-ms-transform: scale(1.3,1.3);
transform: scale(1.3,1.3);
cursor: pointer;
}
.photos
{
-webkit-animation: bannermove 400s linear infinite;
-moz-animation: bannermove 400s linear infinite;
-ms-animation: bannermove 400s linear infinite;
-o-animation: bannermove 400s linear infinite;
animation: bannermove 400s linear infinite;
}