• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Przesuwające się obrazki nie chcą pojawić się w środku diva, tylko znajdują się pod nim.

VPS Starter Arubacloud
0 głosów
262 wizyt
pytanie zadane 22 września 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)
zamknięte 24 września 2016 przez Krzysiek_34

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;
}

 

komentarz zamknięcia: Problem został w końcu rozwiązany i temat uważam za zamknięty
komentarz 22 września 2016 przez Barttyyy Gaduła (4,680 p.)
Nie musisz wpisywać "tu będzie tekst" możesz użyć lorem ipsum hah :D
1
komentarz 22 września 2016 przez Marven88 Użytkownik (750 p.)
a czym różni się zapis "tu będzie tekst" od "lorem ipsum" ?  niczym.
komentarz 23 września 2016 przez Barttyyy Gaduła (4,680 p.)
tym, że nie potrzebnie marnować czas na klikanie ctrl+v, szcegolnie przy dłuzszym uzupelnieniu tekstem

2 odpowiedzi

0 głosów
odpowiedź 22 września 2016 przez Marven88 Użytkownik (750 p.)

czesc,

Opcja 1.

zamykasz czałość w jednym divie i dajesz mu position:relative następnie uzywasz style na divie ze zdjęciami position absolute i top i left do ustawienia .tak jak cchesz by bylo.

opcja 2 

przenieść 

<div class="photobanner">

do

<div class="photobanner">

do

<div class="box1">

i potestować ustawienie 

komentarz 22 września 2016 przez Krzysiek_34 Mądrala (6,050 p.)
Prawdopodobnie stosowałem już wcześniej Twoją opcje nr 1 z position: relative i dalej było źle. Chyba, że źle coś zrobiłem.

Podaj mi swoje rozwiązanie i wtedy będę wiedział czy na 100% tak samo zrobiłem, ok?
komentarz 22 września 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Lepiej przetestować w praktyce swoje pomysły niż strzelać teoriami.smiley Twój pomysł z opcją nr 1 i opcją nr 2 teoretycznie nie jest zły, ale w praktyce nie ma efektu końcowego.

komentarz 23 września 2016 przez Marven88 Użytkownik (750 p.)
a nie prościej zrobić w taki sposób:

czarny kontener podzielić na 3 kolumny w bocznych byłyby te białe prostokąty a w środkowym byłby na górze tekst a niżej te obrazki ala film?

wybacz niestety nie mam czasu testować.
komentarz 23 września 2016 przez Krzysiek_34 Mądrala (6,050 p.)
Niestety to nie jest zbyt dobry pomysł.
0 głosów
odpowiedź 24 września 2016 przez pablop76 VIP (123,060 p.)

Nie bardzo rozumiem.

Dlaczego nie umieścisz obiektu

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

wewnątrz obiektu box1

<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 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>
</div>

 

komentarz 24 września 2016 przez Krzysiek_34 Mądrala (6,050 p.)

Już zrobiłem tak, że jest dobrze. Wystarczyło wprowadzić kilka poprawek w stylach CSS:

.box1 .inner1
{
	padding: 10px 50px 145px;
	font-size: 11px;
	text-align: justify;
	color: white;
	line-height: 1.4;
}

.photobanner
{
	overflow: hidden;
	position: relative;
	bottom: 145px;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

Pozostałe style CSS pozostały bez zmian. W kodzie PHP nie musiałem nic zmieniać.

Dzięki chociaż za próbę pomocy i temat uważam za zamknięty.smiley

Podobne pytania

0 głosów
3 odpowiedzi 339 wizyt
0 głosów
1 odpowiedź 238 wizyt

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...