Probleme mit einem Bilderscript

napsi · 18. Januar 2011

Guten Morgen!

Irgendwo habe ich da einen Fehler eingebaut und weiß nicht genau wo:

Auf folgender Seite sollten die beiden Thumbs nebeneinander dargestellt werden, sie werden aber untereinander dargestellt, warum?

http://www.uehv-hawks.at/saison2010_11_Kampfmannschaft_Krems_20101229.asp

Code:

// JavaScript-Funktionen fuer die Bilder-Galerie
// Copyright (C) 2005 Alexander Mueller
// Autor: Alexander Mueller
// Web:   http://www.EvoComp.de/
// Datei: galerie.js
// The copyright notice must stay intact for use!
// You can obtain this and other scripts at http://www.EvoComp.de/scripts/skripte.html
//
// This program is distributed in the hope that it will be useful,
// but without any warranty, expressed or implied.

// Datenstruktur, in der die einzelnen Bilddaten gespeichert werden,
// in Form eines assoziativen Arrays anlegen
var Photos = new Array();

// Photo zur Galerie hinzufuegen
// thumbnail - URL zum Thumbnail
// bild - URL zum Detailbild
// alt - Beschreibung die angezeigt werden soll, wenn man mit der Maus ueber das Bild faehrt
// beschreibung - Beschreibung des Bildes, welches als Beschriftung unter dem Detailbild angezeigt werden soll
function addPhoto (thumbnail, bild, alt, beschreibung)
{
	Photos[Photos.length] = new Object();
	// URL des Thumbnail
	Photos[Photos.length - 1]["datei"] = thumbnail;
	// URL des Bildes
	Photos[Photos.length - 1]["datei_gross"] = bild;
	// Text der angezeigt werden soll, wenn das Bild unter der angegebenen URL nicht gefunden wurde
	Photos[Photos.length - 1]["alt"] = alt;
	// Kurze Bildbeschreibung zum jeweiligen Bild
	Photos[Photos.length - 1]["beschreibung"] = beschreibung;
}

// Zaehlt Bilder mit IDs, die mit 'thumbnail' beginnen und einer ganzen Zahl
// enden und liefert die Anzahl als Rueckgabewert.
// Diese ID muessen die Image-Tags haben, die als Thumbnails verwendet werden.
function zaehle_thumbnails ()
{
	var tn = 0;

	for (i = 0; i < document.images.length; i++)
		if ((document.images[i].id).match (/^thumbnail[0-9]+$/))
			tn++;
	return tn;
}

// Thumbnails automatisch erzeugen, um Fehler zu vermeiden
function erzeuge_thumbnails ()
{
	// 'anzahl_thumbnails' Thumbnails erzeugen
	for (i = 0; i < anzahl_thumbnails; i++)
	{
		// Ein Thumbnail besteht aus einem LI-Tag, ...
		eintrag = document.createElement ("li");
		// einem Link ...
		link = document.createElement ("a");
		// , der per JavaScript das entsprechende Bild austauscht
		link.href = "javascript:grosses_bild_anzeigen (" + (i + 1) + ")";
		// und einem IMG-Tag fuer den eigentlichen Thumbnail
		bild = document.createElement ("img");
		bild.border = "0";
		bild.id = "thumbnail" + (i + 1);

		// erzeugtes hierarchisch zusammenfuegen
		link.appendChild (bild);
		eintrag.appendChild (link);

		// und unter Tag mit der ID 'thumb' ins Dokument einhaengen
		document.getElementById ("thumbs").appendChild (eintrag);
	}
}

// Thumbnails auf Groesse 'thumb_groesse' ausrichten
function ausrichten ()
{
	for (i = 0; i < anzahl_thumbnails; i++)
	{
		// Thumbnails vertikal ausrichten
		document.getElementById ('thumbnail' + (i + 1)).vspace = (thumb_groesse - document.getElementById ('thumbnail' + (i + 1)).height) / 2;
		// Thumbnails horizontal ausrichten
		document.getElementById ('thumbnail' + (i + 1)).hspace = (thumb_groesse - document.getElementById ('thumbnail' + (i + 1)).width) / 2;
	}
	// Thumbnail-Navigation ausrichten
	document.getElementById ('zurueck').vspace = (thumb_groesse - document.getElementById ('zurueck').height) / 2;
	document.getElementById ('pgup').vspace = (thumb_groesse - document.getElementById ('pgup').height) / 2;
	document.getElementById ('weiter').vspace = (thumb_groesse - document.getElementById ('weiter').height) / 2;
	document.getElementById ('pgdown').vspace = (thumb_groesse - document.getElementById ('pgdown').height) / 2;
}

// Thumbnails gemaess aktuellem index_erstes_bild anzeigen
function thumbnails_auffrischen ()
{
	// Bei allen Thumbnails Daten des jeweiligen IMG-Tags (b1..b3) auffrischen
	for (i = 0; i < anzahl_thumbnails; i++)
	{
		// Bild austauschen
		document.getElementById ('thumbnail' + (i + 1)).src = Photos[index_erstes_bild + i]["datei"];
		// Alt-Text austauschen
		document.getElementById ('thumbnail' + (i + 1)).alt = Photos[index_erstes_bild + i]["alt"];
		// Title-Text austauschen
		document.getElementById ('thumbnail' + (i + 1)).title = Photos[index_erstes_bild + i]["alt"];
	}

	// Navigationslinks fuer Thumbnails anzeigen
	if (index_erstes_bild > 0)
	{
		document.getElementById ('zurueck').src = pfad_zu_navbildern + "/back.gif";
		document.getElementById ('pgup').src = pfad_zu_navbildern + "/pgup.gif";
	}
	else
	{
		document.getElementById ('zurueck').src = pfad_zu_navbildern + "/first.gif";
		document.getElementById ('pgup').src = pfad_zu_navbildern + "/pgup_first.gif";
	}
	if (index_erstes_bild + anzahl_thumbnails < anzahl_bilder)
	{
		document.getElementById ('weiter').src = pfad_zu_navbildern + "/forward.gif";
		document.getElementById ('pgdown').src = pfad_zu_navbildern + "/pgdown.gif";
	}
	else
	{
		document.getElementById ('weiter').src = pfad_zu_navbildern + "/last.gif";
		document.getElementById ('pgdown').src = pfad_zu_navbildern + "/pgdown_last.gif";
	}

	// Falls das P-Tag mit der ID 'thumb_beschriftung' keine Kind-Elemente hat muss eines erzeugt werden,
	// damit die Beschriftungsdaten darin gespeichert werden koennen
	if (!document.getElementById ('thumb_beschriftung').firstChild)
		document.getElementById ('thumb_beschriftung').appendChild (document.createTextNode (""));
	// Variablen in Beschriftungsstring ersetzen
	tnstr = thumbnail_string.replace (/%index_erster%/i, (index_erstes_bild + 1));
	tnstr = tnstr.replace (/%index_letzter%/i, (index_erstes_bild + anzahl_thumbnails));
	tnstr = tnstr.replace (/%anzahl_bilder%/i, anzahl_bilder);
	// Beschriftung der Thumbnails im zugehoerigen P-Tag setzen
	document.getElementById ('thumb_beschriftung').firstChild.data = tnstr;
}

// Thumbnail-Liste ein Bild zurueck scrollen
function zurueck ()
{
	// Aenderung nur noetig, wenn der erste Thumbnail noch nicht vorne ist
	if (index_erstes_bild > 0)
	{
		// Index des ersten anzuzeigenden Thumbnails runterzaehlen
		// damit die Bilder beim Auffrischen um eine Stelle nach links verschoben werden
		index_erstes_bild--;
		// Anzeige der Thumbnails aktualisieren
		thumbnails_auffrischen ();
	}
}

// Thumbnail-Liste ein Bild vorwaerts scrollen
function weiter ()
{
	// nur wenn der letzte Thumbnail noch nicht erreicht ist
	if (!(index_erstes_bild + anzahl_thumbnails > anzahl_bilder - 1))
	{
		// Index des ersten anzuzeigenden Thumbnails hochzaehlen
		// damit die Bilder beim Auffrischen um eine Stelle nach rechts verschoben werden
		index_erstes_bild++;
		// Anzeige der Thumbnails aktualisieren
		thumbnails_auffrischen ();
	}
}

// Thumbnails um 'anzahl_thumbnails' zurueckblaettern
function pgup ()
{
	// nur um 'anzahl_thumbnails' Thumbnails zurueck, wenn noch genuegend vor aktuellem Index
	if (index_erstes_bild - anzahl_thumbnails > 0)
		index_erstes_bild = index_erstes_bild - anzahl_thumbnails;
	// ansonsten Thumbnails ab dem ersten Bild anzeigen
	else
		index_erstes_bild = 0;
	// Anzeige der Thumbnails aktualisieren
	thumbnails_auffrischen ();
}

// folgende 'anzahl_thumbnails' Thumbnails anzeigen
function pgdown ()
{
	// um 'anzahl_thumbnails' weiter, wenn noch genuegend Thumbnails in der Liste
	if (index_erstes_bild + 2 * anzahl_thumbnails < anzahl_bilder)
		index_erstes_bild = index_erstes_bild + anzahl_thumbnails;
	// oder eben die letzten 'anzahl_thumbnails' anzeigen
	else
		index_erstes_bild = anzahl_bilder - anzahl_thumbnails;
	// Anzeige der Thumbnails aktualisieren
	thumbnails_auffrischen ();
}

// Index des aus den Thumbnails ausgewaehlten grossen Bildes setzen und Anzeige des grossen Bildes auffrischen
function grosses_bild_anzeigen (i)
{
	// neuer Index des grossen Bildes
	index_grosses_bild = index_erstes_bild + i - 1;
	// Anzeige des grossen Bildes auffrischen
	grosses_bild_auffrischen ();
}

// grosses Bild und zugehoerige Beschriftung im IMG mit der ID 'gross' anzeigen (nach index_grosses_bild)
function grosses_bild_auffrischen ()
{
	// URL des Bildes setzen
	document.getElementById ('gross').src = Photos[index_grosses_bild]["datei_gross"];
	// Alt-Text des Bildes setzen
	document.getElementById ('gross').alt = Photos[index_grosses_bild]["alt"];
	// Title-Text des Bildes setzen
	document.getElementById ('gross').title = Photos[index_grosses_bild]["alt"];

	// Falls das P-Tag mit der ID 'beschriftung' keine Kind-Elemente hat muss eines erzeugt werden,
	// damit die Beschriftungsdaten darin gespeichert werden koennen
	if (!document.getElementById ('beschriftung').firstChild)
		document.getElementById ('beschriftung').appendChild (document.createTextNode (""));
	// Variablen in Beschriftungsstring ersetzen
	tstr = bild_beschriftung.replace (/%index_gross%/i, (index_grosses_bild + 1));
	tstr = tstr.replace (/%anzahl_bilder%/i, anzahl_bilder);
	tstr = tstr.replace (/%beschreibung%/i, Photos[index_grosses_bild]["beschreibung"]);
	// Beschriftung des Bildes im zugehoerigen P-Tag setzen
	document.getElementById ('beschriftung').firstChild.data = tstr;

	// Navigationslinks fuer grosse Bilder anzeigen
	if (index_grosses_bild > 0)
		document.getElementById ('zurueck_gross').src = pfad_zu_navbildern + "/back.gif";
	else
		document.getElementById ('zurueck_gross').src = pfad_zu_navbildern + "/first.gif";

	if (anzahl_bilder > index_grosses_bild + 1)
		document.getElementById ('weiter_gross').src = pfad_zu_navbildern + "/forward.gif";
	else
		document.getElementById ('weiter_gross').src = pfad_zu_navbildern + "/last.gif";
}

// vorheriges Bild (gross) aus Bilderliste anzeigen
function zurueck_gross ()
{
	// nur noetig, wenn nicht schon das erste Bild angezeigt wird
	if (index_grosses_bild > 0)
	{
		// zum vorherigen Bild
		index_grosses_bild--;
		// grosses Bild aktualisieren
		grosses_bild_auffrischen ();
	}
}

// naechstes Bild (gross) aus Bilderliste anzeigen
function weiter_gross ()
{
	// nur wenn nicht schon beim letzten Bild angekommen
	if (index_grosses_bild + 1 < anzahl_bilder)
	{
		// zum naechsten Bild
		index_grosses_bild++;
		// grosses Bild aktualisieren
		grosses_bild_auffrischen ();
	}
}

HTML:

<div id="thumbcontainer">
			<a href="javascript:pgup();"><img border="0" src="img/nav/transparent.gif" id="pgup" alt="Seite zur&uuml;ck" title="Seite zur&uuml;ck"></a>
			<a href="javascript:zurueck();"><img border="0" src="img/nav/transparent.gif" id="zurueck" alt="zur&uuml;ck" title="zur&uuml;ck"></a>
			<ul id="thumbs"></ul>
			<a href="javascript:weiter();"><img border="0" src="img/nav/transparent.gif" id="weiter" alt="weiter" title="weiter"></a>
			<a href="javascript:pgdown();"><img border="0" src="img/nav/transparent.gif" id="pgdown" alt="n&auml;chste Seite" title="n&auml;chste Seite"></a>
			<p id="thumb_beschriftung">&nbsp;</p>
		</div>
		<div id="grosscontainer">
			<img border="0" id="gross" src="img/nav/transparent.gif" alt="" title="">
			<p id="beschriftung">&nbsp;</p>
			<a href="javascript:zurueck_gross();"><img border="0" src="img/nav/transparent.gif" id="zurueck_gross" alt="zur&uuml;ck" title="zur&uuml;ck"></a>
			<a href="javascript:weiter_gross();"><img border="0" src="img/nav/transparent.gif" id="weiter_gross" alt="weiter" title="weiter"></a>
		</div>

		<script language="JavaScript1.5" type="text/javascript">
		<!-- // fuer Browser ohne JavaScript auskommentieren
			/* JavaScript-Bereich fuer die Bilder-Galerie
			 * Copyright (C) 2005 Alexander Mueller
			 * Autor: Alexander Mueller
			 * Web:   http://www.EvoComp.de/
			 * The copyright notice must stay intact for use!
			 * You can obtain this and other scripts at http://www.EvoComp.de/scripts/skripte.html
			 *
			 * This program is distributed in the hope that it will be useful,
			 * but without any warranty, expressed or implied.
			 */

			// Maximalwert aus x und y Ausdehnung aller Thumbnails (in Pixel)
			// Wird zur Formatierung der Thumbnails und Navigationsbilder benoetigt um ein
			// 'Verrutschen' von Navigation und Thumbnails zu verhindern.
			var thumb_groesse = 100; // x und y Ausdehnung der Thumbnails (zum Ausrichten)
			// Anzahl der Thumbnails, die erzeugt werden sollen
			var anzahl_thumbnails = 2;
			// Zeichenkette, mit der die Thumbnails beschriftet werden sollen (bei Leerstring wird nichts angezeigt)
			// Dabei werden folgende Bestandteile durch entsprechende Werte ersetzt:
			//   %index_erster%   - Index des Bildes, welches als erster Thumbnail angezeigt wird
			//   %index_letzter%  - Index des letzten angezeigten Thumbnails
			//   %anzahl_bilder%  - Anzahl der Bilder in der Galerie
			var thumbnail_string = "Bilder %index_erster% bis %index_letzter% von %anzahl_bilder%";
			// Zeichenkette, mit der das gewaehlte Detailbild beschriftet werden soll
			// Hier werden folgende Bestandteile durch Werte ersetzt:
			//   %index_gross%   - Index des Detailbildes, welches angezeigt wird
			//   %anzahl_bilder% - Anzahl der Bilder in der Galerie
			//   %beschreibung%  - Beschreibung zum angezeigten Detailbild
			var bild_beschriftung = "Bild %index_gross% / %anzahl_bilder%: %beschreibung%";
			// Hier kann der absolute Pfad zu den Navigationsbuttons und dem
			// Platzhalter (transparent.gif) angegeben werden, falls diese
			// nicht im selben Verzeichnis liegen, wie die HTML-Datei, welche
			// die Galerie enthaelt.
			var pfad_zu_navbildern = "./img/nav";

			// Bilder zur Galerie hinzufuegen
			// 1. Parameter: URL zum Thumbnail
			// 2. Parameter: URL zum Detailbild
			// 3. Parameter: Kurzbeschreibung, wenn die Maus ueber dem Bild ist
			// 4. Parameter: Beschriftung des Detailbildes
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_01_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_01.jpg", "Endstand", "5:3 Sieg");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_02_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_02.jpg", "Parade", "Sieger feiern");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_03_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_03.jpg", "Parade", "Sieger feiern");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_04_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_04.jpg", "Parade", "Sieger feiern");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_05_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_05.jpg", "Kapitän", "Ratz Manuel - Kapitän in Abwesenheit von Huber Patrik");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_06_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_06.jpg", "Enge Deckung", "Pröstler Michael kämpft gegen eine enge Deckung");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_07_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_07.jpg", "Hanzlik Peter", "unsere 99 ist immer noch schnell auf den Beinen");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_08_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_08.jpg", "Bulli", "Das Bulli ging oft an die Hawks");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_09_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_09.jpg", "Erfolgsgeheimnis", "Mit vielen Spielern vorm eigenen Tor und dem Gegner keinen Platz lassen");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_10_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_10.jpg", "Der Goalie", "Scholli wie immer unser starker Rückhalt");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_11_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_11.jpg", "Pröstler Michael", "So viel Platz hatte unser Goalgetter selten");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_12_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_12.jpg", "Scholli", "Auch wenn Smejkal hier das Nachsehen hatte, Scholli war am Posten");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_13_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_13.jpg", "Gril Manuel", "Der Trainerssohn beim Bulli");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_14_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_14.jpg", "Schiedsrichtertisch", "Auch die Helfer abseits des Eises kamen ins Schwitzen");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_15_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_15.jpg", "Scholli", "Wieder war kein Vorbeikommen an unserem Schlussmann");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_16_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_16.jpg", "Krüger Manfred ", "Krüger Manfred scheiterte am Kremser Schlussmann");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_17_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_17.jpg", "Torjubel", "Ein von 5 Torjubel in diesem Spiel");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_18_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_18.jpg", "Hudelist Bernd", "Mit viel Einsatz fand er gut ins Spiel");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_19_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_19.jpg", "Kremser Tor", "Die Hawks waren meist gefährlich vor dem Kremser Tor");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_20_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_20.jpg", "Zweikampf", "Grill war immer wieder in harte Zweikämpfe verwickelt");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_21_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_21.jpg", "TOR", "TOR, TOR, TOR - I wiar narisch******");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_22_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_22.jpg", "Hamrit Stefan", "Stefan hatte immer was tun");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_23_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_23.jpg", "Scholli der Rückhalt", "Scholli hatte großen Anteil am Sieg");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_24_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_24.jpg", "Hanzlik Peter ", "Auch der 99er trug sich in die Schützenliste ein");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_25_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_25.jpg", "kurze Pause", "Aufgrund des kleinen Kaders hatten unsere Spiel kaum Zeit zum Rasten");
			addPhoto ("Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_26_k.jpg", "Img/Saison2010_11/Kampfmannschaft/Krems20101229/Krems20101229_26.jpg", "Angriff", "Viele Angriffe auf das Tor von Krems");
			
			// intern genutzte Variablen (keine Anpassung noetig)
			var index_erstes_bild = 0; // erstes Bild in der Liste (zur Initialisierung)
			var index_grosses_bild = 0; // Bildindex fuer anzuzeigendes grosses Bild
			var anzahl_bilder = Photos.length; // Anzahl der Bilder insgesamt

			// Anzahl der Thumbnails darf hoechstens so gross sein, wie die Gesamtzahl der Bilder
			if (anzahl_thumbnails > anzahl_bilder)
				anzahl_thumbnails = anzahl_bilder;

			// Thumbnails erzeugen
			erzeuge_thumbnails ();
			// den ersten Satz Thumbnails nach der Initialisierung anzeigen
			thumbnails_auffrischen ();
			// zyklisch Thumbnails positionieren
			window.setInterval ("ausrichten ()", 5);
		// -->
		</script>

Code:

#grosscontainer {
	margin:20px;
	padding-top:15px;
	text-align:center;
	color:blue;
}
#grosscontainer #gross {
	border-style:outset;
	border-width:1px;
}
#grosscontainer a img {
	display:inline;
}
#grosscontainer p {
	margin:5px 0 0px 0;
}

Mit der Bitte um kurze Hilfe

lg.

Gerald

CPoly · 18. Januar 2011

Das ist für eine Liste ganz normales Verhalten, man schreibt selten Aufzählungen nebeneinander. Mit folgendem Regelsatz solltest du schon ein Stück weiter kommen

CSS:

#thumbs {
    display:block;
    float:left;
}

#thumbs li {
    display:block;
    float:left;
}

Jetzt musst du entsprechend das drumherum noch anpassen. Dafür ist "clear:both;" ganz hilfreich.

Probleme mit einem Bilderscript

napsi

Erfahrenes Mitglied

CPoly

Mitglied Weizenbier

Neue Beiträge