Horizontale Bildershow

[Chakotay1308]

Hi,

ich versuche gerade irgendwie eine Menge Bilder horizontal nebeneinander anzuordnen. Ich will, dass die ganzen Bilder (35 Stk., 240px breit) horizontal nebeneinander in einem DIV liegen - aber ohne Umbruch. Bilder, die nicht ganz hinein passen sollen nur teilweise angezeigt werden.
So als ob ich Fotos nebeneinander geklebt habe. Das ganze ohne Scrollbar (soll nachher mit JS automatisch gescrollt werden).

Leider treibt mich HTML/CSS gerade in den Wahnsinn und bricht immer um. D.h. es werden zwei Bilder nebeneinander angezeigt, der Rest wird in die nächste Zeile umgebrochen.

CSS-Code:

	#moviecontainer {
		height: 180px;
		position: absolute;
		top: 200px;
		left: 300px;
		width: 500px;
		/* overflow: hidden; */
	}
	#viewer {
		white-space: nowrap;
	}
	#viewer img {
		float: left;
		width: 240px;
		height: 180px;
		margin: 0; padding: 0;
	}

HTML:

	<div id="moviecontainer" class="clearfix">
		<div id="viewer" class="clearfix">
			<img src="images/slideshow/behandlung_1.jpg" alt="" />
			<img src="images/slideshow/behandlung_2.jpg" alt="" />
			<img src="images/slideshow/behandlung_3.jpg" alt="" />
			<img src="images/slideshow/behandlung_4.jpg" alt="" />
			...
		</div>
	</div>

Ich stehe da gerade irgendwie auf dem Schlauch. Wer kann mir weiterhelfen?

Danke im Voraus!
Christopher

 

[rm -r *]

...
Leider treibt mich HTML/CSS gerade in den Wahnsinn und bricht immer um. D.h. es werden zwei Bilder nebeneinander angezeigt, der Rest wird in die nächste Zeile umgebrochen.
...

Ich habe das jetzt nicht getestet, aber imho liegt das daran, das dein moviecontainer eine feste Breite hat und keine Scrollbalken (overflow) erlaubt sind.

Bilder die dann nicht mehr nebeneinander passen werden dann halt umgebrochen.

Wenn Du bei der festen Breite des moviecontainers bleiben möchtest, müßtest Du die ganzen Bilder per CSS übereinander schieben, was im moment ja nicht passiert.

 

[Chakotay1308]

Wenn Du bei der festen Breite des moviecontainers bleiben möchtest, müßtest Du die ganzen Bilder per CSS übereinander schieben, was im moment ja nicht passiert.

Und wie mache ich das? Das ist ja gerade das Problem. ;-)

 

[rm -r *]

Wenn Du jedem einzelnen Bild einen anderen z-index gibst und die "einfach" über die Positionierung übereinanderschiebst, müßte das gehen.

Ach ja.
Wenn Du mal bei google gegucked hättest, hättest Du in 10 Sekunden eine Antwort mit Beispiel gefunden.

http://www.homepage-total.de/css/z-index.php

 

[Chakotay1308]

Ach, so hast du das gemeint. Das war eh nicht was ich wollte.
Habe das jetzt hinbekommen.

#viewer musste eine Breite von 35*240px bekommen, #moviecontainer eine von 500px mit overflow: hidden;

Jetzt funktioniert's.

 

[rm -r *]

Ach so, dann wolltest Du die Bilder gar nicht übereinander stapeln ?

Zeig doch mal die Seite.
Ich kann mir das immer noch icht so richtig vorstellen, was Du meinst.

 

[thebug]

Ach, so hast du das gemeint. Das war eh nicht was ich wollte.
Habe das jetzt hinbekommen.

#viewer musste eine Breite von 35*240px bekommen, #moviecontainer eine von 500px mit overflow: hidden;

Jetzt funktioniert's.

Genau, das ist meines Wissens nach die einzige Möglichkeit. Weswegen ich das bis auch noch nicht genutzt hab,...

 

[Chakotay1308]

http://www.kleintierpraxis-wygand.de
Ging um den Film oben rechts.

Gruß
Christopher

 

[rm -r *]

Ok, danke.

Jetzt weiß ich was gemeint war.