Falsche Formatierung einer UL

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich habe ein sehr gutes Albumskript in meine Seite eingebaut und an dem Stylesheet gebastelt. Ich habe 2 Probleme damit:

  1. Aus irgendeinem Grund wird die

      nicht ganz normal angezeigt, sondern nach der 2.Zeile (= nach 8 Fotos) entstehen auf einmal 2 Leerfelder → 2 Bilder → 3 Leerfelder → 2 Bilder. Ich habe keine Ahnung, warum das passiert, da die UL keine besonderen Formatierungen hat. Es hängt aber definitiv mit der Breite des darüberliegenden DIVs zusammen.

    • Wenn ich das Skript in einen Frame lege, der 800 px breit ist, erscheint unten ein Scrollbar. D.h. die Breite der Liste (oder des Navbars oder was auch immer) scheint größer zu sein als 800px. Ich habe aber dezidiert die Breite 780px angegeben, wodurch sich das super ausgehen sollte.

Beide Probleme kann man sich unter http://sc000613.host.inode.at/forumalbum.html anschauen!

Ich bin für jede Hilfe sehr dankbar. Lg
Willy m.F.

<HTML>

<HEAD><TITLE>WmF - </TITLE>
<style type='text/css'>
<!--
#container {width: 100%; margin: 0; text-align: center; }
h1 {font-size: 16px; margin: 1em; }
#dirnav { width: 100%;  overflow: auto; position: relative; margin: auto auto 5px auto; clear: both;     text-align: center; padding: 0; background-color: E5E5E5; border: 0px solid; color: 000000 }    
#dirnav ul {width: 100%; }    
#dirnav ul, #dirnav li { margin: auto; padding: 0; list-style-type: none; }    
#dirnav li {width: 20%; border-bottom: 0px solid; border-right: 0px solid;        margin-right: -1px; float: left; text-align: center;  }    
#dirnav a {display: block; padding: 2px 5px 2px 5px; }    
#dirnav a:hover {background-color: #ddd; color: #000; }
#thumbnails { }
p.thumb {width: 172px; height: 182px margin: 1em; padding: 3px; float: left;    font-size: 10px; text-align: center; background-color: E5E5E5; border: 0px solid #ccc; border-style: solid; border-width: 0px; border-color: #ccc #a0a0a0 #a0a0a0 #ccc;}
p.thumb a {color: #000; font-weight: bold; border: 0px}
tt {font-family: verdana; font-size: 10px; color: #000; }
.pagenav {position: relative; margin: auto; clear: both; float: left; height: 20px; width: 100%; text-align: left; }    
.pagenav ul, .pagenav li {margin: auto; padding: 0; list-style-type: none; }    
.pagenav li {float: left; text-align: center;  }    
.pagenav li.current a.page {font-weight: bold; color: #000000; background-color: #aaa; }    
.pagenav a.page {display: block; padding: 2px 5px 2px 5px; color: #000000; }    
.pagenav a.prev, .pagenav a.next, .pagenav .prev, .pagenav .next {display: block; width: 65px; padding: 2px 5px 2px 5px; }    
.pagenav a:hover {color: #000;  }
a {color: 000000; text-decoration: none; }
a:hover, a:active {color: #d0d0d0; }
a img {border-width: 1px; border-style: solid; border-color: #aaa #ccc #ccc #aaa;  padding: 0; background-color: #ccc; }
a:hover img {border: 1px solid #000000; }
p.footer {position: relative; float: right; clear: both; margin: -20px auto auto auto; }
//-->
</style>
</HEAD>
<BODY BGCOLOR='E5E5E5' LINK='000000' VLINK='000000' ALINK='000000'><BASEFONT FACE='century gothic, sans-serif'><DIV style='WIDTH: 780px; FONT-SIZE: 15; color: 000000; POSITION: absolute; font-family: century gothic, sans-serif; text-align: justify'><SPAN><div id='dirnav'><ul>
<li> <a href='?pageno=7'>Home &raquo; </a></li>
<li><a href='?pageno=7&d=album/Familienfotos/Fotos2'>Fotos2</a></li>
</ul>
</div>
<div class='pagenav'>

<ul>
<li class="current"><a class='page' href='?pageno=7&d=album/Familienfotos&pg=1'>1</a></li>
<li><a class='page' href='?pageno=7&d=album/Familienfotos&pg=2'>2</a></li>
<li><a class='next' href='?pageno=7&d=album/Familienfotos&pg=2'>&raquo;</a></li>
</ul>
</div><div id='container'>Photo Gallery: Familienfotos<div id='thumbnails'><p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8573.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8573.jpg&w=180&h=150' alt='_MG_8573.jpg' /><br /><span class="iname">_MG_8573</span> - November 29  </a>
<br /><span class="idim">350 x 233</span> - <span class="isize">[21.62 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8576.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8576.jpg&w=180&h=150' alt='_MG_8576.jpg' /><br /><span class="iname">_MG_8576</span> - November 29  </a>
<br /><span class="idim">350 x 233</span> - <span class="isize">[21.73 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8579.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8579.jpg&w=180&h=150' alt='_MG_8579.jpg' /><br /><span class="iname">_MG_8579</span> - November 29  </a>

<br /><span class="idim">350 x 233</span> - <span class="isize">[21.15 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8580.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8580.jpg&w=180&h=150' alt='_MG_8580.jpg' /><br /><span class="iname">_MG_8580</span> - November 29  </a>
<br /><span class="idim">350 x 233</span> - <span class="isize">[21.6 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8585.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8585.jpg&w=180&h=150' alt='_MG_8585.jpg' /><br /><span class="iname">_MG_8585</span> - November 29  </a>
<br /><span class="idim">350 x 233</span> - <span class="isize">[22.4 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8592.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8592.jpg&w=180&h=150' alt='_MG_8592.jpg' /><br /><span class="iname">_MG_8592</span> - November 29  </a>

<br /><span class="idim">233 x 350</span> - <span class="isize">[19.85 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8594.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8594.jpg&w=180&h=150' alt='_MG_8594.jpg' /><br /><span class="iname">_MG_8594</span> - November 29  </a>
<br /><span class="idim">350 x 233</span> - <span class="isize">[14.73 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8595.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8595.jpg&w=180&h=150' alt='_MG_8595.jpg' /><br /><span class="iname">_MG_8595</span> - November 29  </a>
<br /><span class="idim">350 x 233</span> - <span class="isize">[15.13 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8597.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8597.jpg&w=180&h=150' alt='_MG_8597.jpg' /><br /><span class="iname">_MG_8597</span> - November 29  </a>

<br /><span class="idim">233 x 350</span> - <span class="isize">[17.9 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8598.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8598.jpg&w=180&h=150' alt='_MG_8598.jpg' /><br /><span class="iname">_MG_8598</span> - November 29  </a>
<br /><span class="idim">350 x 233</span> - <span class="isize">[15.24 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8600.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8600.jpg&w=180&h=150' alt='_MG_8600.jpg' /><br /><span class="iname">_MG_8600</span> - November 29  </a>
<br /><span class="idim">233 x 350</span> - <span class="isize">[17.15 KB]</span></tt></p>

<p class='thumb'><tt>
  <a href='album/Familienfotos/_MG_8601.jpg' target='image'>  <img src='album_thumbnail.php?i=album/Familienfotos/_MG_8601.jpg&w=180&h=150' alt='_MG_8601.jpg' /><br /><span class="iname">_MG_8601</span> - November 29  </a>

<br /><span class="idim">233 x 350</span> - <span class="isize">[18.39 KB]</span></tt></p>

</div></div></div></SPAN></DIV></BODY>
</HTML>
2

Ich weiß das es unhöflich ist mit einer Gegenfrage zu antworten, aber warum nutz du für die Darstellung der Bilder nicht einfach eine Tabelle? das ist doch etwas übersichtlicher im HTML-Code

3

Wie geschrieben, habe ich das Skript nur eingebunden und nicht selbst erstellt. Ich dachte mir aber, daß es eine ganz gute Lösung ist, da man nicht festlegen muß, wieviele Bilder in einer Reihe erscheinen und es daher Auflösungsunabhängig wäre… Bei Tabellen muß ich festlegen, wieviele Bilder angezeigt werden und nachdem die Bilder eine fixe Breite haben, kann es je nach Auflösung sein, daß gerade mal die Hälfte des genutzt wird…