• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme bei der Darstellung von Bildern

J

JolloyRoger

Neues Mitglied
Hallo zusammen,

ich verwalte eine kleine Schulschach-Homepage, bei der nach Turnieren immer eine Anzahl Bilder einzupflegen ist. Nun habe ich das Problem, dass die Bilder bei Aufruf der Homepage untereinander angezeigt werden, aber eigentlich sollten sie nebeneinander stehen. Ich möchte einen Aufbau mit Tabellen für die Bilder nebeneinander vemeiden, vielleicht hat jemand eine andere Lösung parat oder erkennt den Fehler im Code Aufbau der die Bilderanzeige nebeneinander verhindert.

Hier ist der aktuelle Code, wie gesagt, die Bilder ab Feldnummer 133 (ab da, wo der Code in blau gekennzeichnet ist) im unteren Teil der Seite sollten nebeneinander angezeigt werden:

(Alternativ die Url: http://www.wns-schulschach.bplaced.net/Turniere/Turnierbericht2.RundeHSSMM2013.html
<!doctype html>
<html lang="en">
<head>
<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;
}
</style>
<meta charset="ISO-8859-1" />
<title>Wilhelm-Neuhaus-Schule - Deutsche Schachschule</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div id="wrapper"><!-- #wrapper -->
<header style="width: 969px"><!-- header -->
<h1 style="width: 979px; height: 246px;">
<img class="auto-style5" height="291" src="http://www.html.de/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:[email protected]">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>
&nbsp;</strong></p>
<p class="auto-style19" style="width: 969px;"><span lang="de">
<strong>Bericht:</strong></span></p>
<p class="auto-style19" style="width: 969px;">&nbsp;</p>
<p class="auto-style19" style="width: 969px;"><strong>Tabelle:</strong><br>
<br>
</p>
<p class="auto-style19" style="width: 969px;"><strong><span lang="de">
Bilder</span></strong>&nbsp;&nbsp;&nbsp;&nbsp; <strong><span lang="de">
<br>
</span></strong></p>
<p class="auto-style19" style="width: 969px; height: 147px;">
<br>
&nbsp;<a href="http://www.html.de/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="http://www.html.de/images/HMM_27.11.13_WKG4.JPG" class="style43"></a><a href="http://www.html.de/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="http://www.html.de/images/HMM_27.11.13_WKG2.JPG" class="style43"></a><a href="http://www.html.de/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="http://www.html.de/images/HMM_27.11.13_WKG1.jpg" class="style43"></a><a href="http://www.html.de/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="http://www.html.de/images/HMM_27.11.13_WKG3.JPG" class="style43"></a><a href="http://www.html.de/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="http://www.html.de/images/HMM_27.11.13_WKG5.JPG" class="style43"></a><a href="http://www.html.de/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="http://www.html.de/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>
</div><!-- #wrapper -->
</body>
</html>

_________________________________________________________________________________________

Im voraus vielen Dank
 
Zuletzt bearbeitet:
Werbung:
Hallo,

ich denke, du könntest mit:
Code: 
 display: inline;
Abhilfe schaffen!

Poste doch nächstes mal den Quelltext in Code-Tags, das machts einfacher :)
 
Hallo,

also ändere mal in style.css zeile112 bei "header img" das display ind
Code: 
display: inline-block;
nur inline ist falsch.

Cheffchen
 
Werbung:
Hallo,

zunächst einmal vielen Dank für die schnellen Antworten.
Ich blicke nur noch nicht ganz durch wo genau ich
Code: 
  display: inline-block;  [Code/] platzieren muß.
 
Werbung:
So, der "inline-block" wirkt. Die Bilder werden einwandfrei angezeigt. Die Bildanzeige habe ich noch mit der Fancybox verschönert.

Vielen Dank nochmal an Liskel und Cheffchen für den Tipp!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben