Problem bei der Darstellung von Bildern nebeneinander

Webdesign & Technik HTML & CSS
1

Hallo zusammen,
ich verwalte eine kleine Schulschach-Homepage, bei der nach Turnieren eine Anzahl von Bildern einzupflegen ist. Nun habe ich das Problem, dass die Bilder bei Aufruf der Homepage nicht nebenander sondern untereinander angezeigt werden. Ich möchte einen Aufbau in Tabellenform vermeiden, vielleicht hat jemand eine andere Lösung parat oder sieht den Fehler im Code der die Anzeige de Bilder nebeneinander verhindert.

Hier der aktuelle Code :

(alternativ die Url)
http://www.wns-schulschach.bplaced.net/Leere_Seite0_Fanzybox.html

wie gesagt die Bilder ab Feldnummer 133 im unteren Teil des Dokuments sollten nebeneinder stehen.

Im voraus vielen Dank!

[code]<!doctype html>

	<style>#gk-daily-puzzle td { border: 0px !important; vertical-align: middle !important; }

.boardlabel td { font-size: 75% !important; text-align: center !important; padding: 0px !important; margin: 0px !important; overflow: hidden !important; }
.auto-style15 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: small;
color: #FF0000;
}
.auto-style16 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: small;
}
.auto-style17 {
margin-bottom: 0;
}


Wilhelm-Neuhaus-Schule - Deutsche Schachschule




.auto-style4 {
text-align: left;
}
.auto-style5 {
margin-right: 0;
}
.style6 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: small;
font-style: normal;
color: #000000;
text-align: center;
text-decoration: underline;
}
.auto-style6 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: large;
text-decoration: underline;
}
b {
font-family: Arial, Helvetica, Sans-Serif;
font-size: small;
}
.text { font-family: “Courier New”, Courier, mono; font-size: 9pt; font-style: normal; color: #000000}

#centerColumn h2 {
margin:0 0 -1em 0;
padding:0;
font-size:1em;
letter-spacing:.1em;
}

.auto-style19 {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
font-style: normal;
color: #000000;
text-align: left;

}
.style43 {
border-style: solid;
border-width: 2px;
}
.style44 {
font-family: Arial, Helvetica, Sans-Serif;
font-size: medium;
text-decoration: underline;
}
.style45 {
font-size: medium;
}

<header style="width: 969px"><!-- header -->
	<h1 style="width: 979px; height: 246px;">
	<img class="auto-style5" height="291" src="images/WNS_SCHULSCHACH.gif" width="950"></h1>

	<nav><!-- top nav -->
	<div class="menu" style="width: 965px">
		<ul>
			<li><a href="index.html"><span lang="de">Startseite</span></a></li>
			<li style="left: 0px; top: 0px; width: 99px">
			<a href="Termine_Startseite.html"><span lang="de">Termine</span></a>
		    <li class="auto-style17" style="left: 0px; top: 0px; height: 38px">
			<a href="Turniere_Startseite.html"><span lang="de">Turniere</span></a>
			<li><a href="Aktuelles_Startseite.html"><span lang="de">Aktuelles</span></a></li>
			<li><a href="Neue%20Homepage/HP_WNS_Schulschach_2012/Gastbuch_Startseite.html"><span lang="de">Gästebuch</span></a></li>
			<li><span lang="de"><a href="spielen_Startseite.html">Spielen</a></span></li>
			<li><span lang="de"><a href="mailto:wns-schulschach@freenet.de">Kontakt</a></span></li>
			<li><span lang="de"><a href="Ausschreibungen_Startseite.html">Ausschreibungen</a></span></li>
		</ul>
	</div>
</nav>
	<br><br><br><br><br>
	<table style="width: 100%">
		<tr>
			<td style="height: 11px"></td>
			<td style="height: 11px"></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</table>
	<br><br>
	<p class="style6" style="width: 969px; height: 82px;"><strong>
	<span class="style45">2. Runde zum Schulschach-Mannschaftswettbewerb WKG 
	2013</span></strong><br>
	<strong class="style44"><br>
	27.11.2012 Königstorschule<br>

 



Bericht:


 


Tabelle:





Bilder     

	</span></strong></p>
	 <p class="auto-style19" style="width: 969px; height: 147px;">
	<br>
	&nbsp;<a href="images/HMM_27.11.13_WKG4.JPG"><img src="imgages_thumbnail/HMM_27.11.13_WKG4_small.JPG" width="100" height="75" xthumbnail-orig-image="images/HMM_27.11.13_WKG4.JPG" class="style43"></a><a href="images/HMM_27.11.13_WKG2.JPG"><img src="imgages_thumbnail/HMM_27.11.13_WKG2_small.JPG" width="100" height="75" xthumbnail-orig-image="images/HMM_27.11.13_WKG2.JPG" class="style43"></a><a href="images/HMM_27.11.13_WKG1.jpg"><img src="imgages_thumbnail/HMM_27.11.13_WKG1_small.jpg" width="100" height="75" xthumbnail-orig-image="images/HMM_27.11.13_WKG1.jpg" class="style43"></a><a href="images/HMM_27.11.13_WKG3.JPG"><img src="imgages_thumbnail/HMM_27.11.13_WKG3_small.JPG" width="100" height="75" xthumbnail-orig-image="images/HMM_27.11.13_WKG3.JPG" class="style43"></a><a href="images/HMM_27.11.13_WKG5.JPG"><img src="imgages_thumbnail/HMM_27.11.13_WKG5_small.JPG" width="100" height="75" xthumbnail-orig-image="images/HMM_27.11.13_WKG5.JPG" class="style43"></a><a href="images/HMM_27.11.13_WKG6.JPG"><img src="imgages_thumbnail/HMM_27.11.13_WKG6_small.JPG" width="100" height="75" xthumbnail-orig-image="images/HMM_27.11.13_WKG6.JPG" class="style43"></a><br>
	<p class="auto-style19" style="width: 969px; height: 147px;">
	<br>
	
	<br>
	<br><br>
				<br><br>
	<table style="width: 103%; height: 217px">
		<tr>
			<td class="auto-style4" style="width: 214px; height: 250px">
			&nbsp;</td>
			<td class="auto-style4" style="width: 201px; height: 250px">
			&nbsp;</td>
			<td class="auto-style4" style="width: 204px; height: 250px">
			&nbsp;</td>
			<td class="auto-style4" style="height: 250px">
			&nbsp;</td>
		</tr>
	</table>
	<br>
</header><!-- end of header -->

	<!-- end of top nav -->


<!-- end of #main content and sidebar-->

<footer>
	<section id="footer-area">

		<section id="footer-outer-block">
				<aside id="first" class="footer-segment">
				</aside><!-- end of #first footer segment -->

				<!-- end of #second footer segment -->

				<aside id="third" class="footer-segment" style="width: 220px">
				</aside><!-- end of #third footer segment -->
				
				<aside id="fourth" class="footer-segment">
						<h3><span lang="de">Erstellt von:</span></h3>
							<p>&nbsp;<span lang="de">Wilhelm-Neuhaus-Schule<br>&nbsp;</span>© 
							201<span lang="de">2</span></p>
				</aside><!-- end of #fourth footer segment -->

		</section><!-- end of footer-outer-block -->

						<h3>&nbsp;</h3>

	</section><!-- end of footer-area -->
</footer>
[/code]
2

Also, wenn man die Interpretation von CSS im browser deaktiviert, sind die Bilder nebeneinander.
Irgendwo im CSS muß da also ein entsprechender Selektor stehen, der auf die Bilder oder die
a-Elemente zutrifft. Du mußt ihn nur finden…

Als erstes solltest du mal die Fehler aus dem (X)HTML beseitigen, sogar gemäß dem Validator
für den HTML5-Arbeitsentwurf ist das fehlerhaft ;o)
Dazu leere und überflüssige Elemente wegwerfen, etwa eine leere Tabellen und diese br-Orgien

Als nächsten Schritt solltest du die veralteten style-Attribute rauswerfen und die ganzen
CSS-Anweisungen aufräumen.
Am besten den ganzen anderen CSS-Kram auch wegwerfen, den du nicht sofort überblickst -
und dann bastelst du dir Schritt für Schritt deine eigene Stilvorlage zusammen.

In styles.css steht dann vermutlich auch der verantwortliche Selektor, den du wohl vergeblich
gesucht hast:

header img {
clear: both;
border-top: 2px solid #333;
display: block;
}
3

Ein Dankeschön an “Hoffmann” für die Tipps.

Ich versuche dann die Seite mal aufzuräumen und hoffe, die Bilder finden sich dann auf der richtigen Position.

4

Sollte das Problem noch bestehen: Setz in deinem style mal folgendes ein:

ul li {
display: inline;
}

Dann werden die

  • -Elemente nicht mehr vertikal angezeigt sondern horizontal.