Forum PHP.pl

Witajcie,

Znowu natknąłem się na niby błahostkę. Niby banał, a jednak.. Przejdę do rzeczy.
Mój plan :
Umieścić na stronie galerię zdjęć. Zdjęcia byłyby wyświetlane obok siebie, tak aby można je było przesuwać w lewo i w prawo za pomocą przycisków.
Hm.. łatwe prawda ? A jednak nie.

Więc zabrałem się za pisanie. Wszystko ładnie wygląda - tak jak zaplanowałem. Grafika gotowa. Kod mniej więcej jest. No właśnie "mniej więcej", ponieważ nie mogę ustawić obrazków. Chciałbym żeby zdjęcia leżały obok siebie. Teraz zdjęcia, które się mieszczą w szerokości <div> , natomiast reszta przechodzi linię niżej.

Zresztą sami spróbujcie.

CSS:

[HTML] pobierz, plaintext 
#event_photos {
	width: 820px;
	height: 170px;
	background: #333333;
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	}
#event_photos .content {
	height: 130px;
	width: 740px;
	padding: 20px;
	overflow-x: auto;
	overflow-y: hidden;
	float: left;
	}
#event_photo {
	background: #eeeeee; 
	border: 1px solid #000000; 
	padding: 5px; 
	margin-right: 10px;
	float: left;
	}
img.event_photo {
	max-width: 500px; 
	max-height: 120px;
	}
#event_photo_left {
	width: 20px;
	height: 170px;
	background: #444444;
	background-repeat: no-repeat;
	background-position: left;
	float: left;
	}
#event_photo_right {
	width: 20px;
	height: 170px;
	background: #444444;
	background-repeat: no-repeat;
	background-position: left;
	float: right;
	}
#event_photo_left:hover {
	background: #555555;
	}
#event_photo_right:hover {
	background: #555555;
	}
[HTML] pobierz, plaintext 

HTML:

[HTML] pobierz, plaintext 
	<div id="event_photos">
		<div id="event_photo_left"></div>
		<div class="content">
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		<div class="event_photo">
			<img src="http://xroads.pl/wp-content/uploads/2011/06/wpid-magiczny-krakow-czyli-zwiedzamy-polske-z-aven-travel-9b7b3c81b0f7c8223854163d2d041bcb.jpg" class="event_photo">
		</div>
		</diV>
		<div id="event_photo_right"></div>
	</div>
[HTML] pobierz, plaintext 

No niestety nie działa. Nie wiem z której strony to ugryźć. Czytałem trochę o tym w Internecie. Ludzie też mają z tym problemy. Nawet znalazłem gotowy skrypt, lecz był on zastrzeżony prawami autorskimi i nie mógł bym ze strony w przyszłości czerpać zysków.

Macie jakiś pomysł, rozwiązanie ? Może nakierujecie mnie na coś. Albo mieliście już kiedyś taki problem.

PS. Zdjęcia poglądowe.
Pozdrawiam,
jpowie01

Ten post edytował jpowie01 19.07.2011, 16:28:18