✔ Bilder nahtlos neben-/untereinander?

[randomize]

Hi,

ich habe jetzt einiges mit CSS, genullten margins und paddings ausprobiert, aber immernoch zu keinem zufriedenstellendem Ergebnis gekommen.
Ich möchte eine geslicte Navigation, die aus mehreren Bildzeilen sowie -spalten besteht, nun in HTML nahtlos aneinanderfügen. Dabei würde ich nur ungern auf Tabellen zurückgreifen.
Bis jetzt habe ich alle möglichen Borders etc auf null gesetzt, und die img-Tags der einzelnen Bildbestandteile einfach hintereinander gereiht (Zeilenumbruch bewirkt ja offensichtlich schon wieder einen Zwischenraum). Diese - horizontalen - Zwischenräume sind nun weg, auch wenn der HTML-Code ziemlich unübersichtlich ist, wegen der langen Kette an img-Tags hintereinander.
Dennoch gibt es immernoch einige wenige Pixel vertikal zwischen den einzelnen Reihen der "Bildkomposition"... Was kann ich noch probieren, um wirklich ALLE Abstände auf null zu kriegen?

Danke
randomize

<edit> Wäre nicht übel, wenn das ganze mit mindestens IE und FireFox kompatibel wäre... </edit>

 

[Matthias Reitinger]

Könntest du eine Beispielseite zur Verfügung stellen, bei der die fehlerhafte Anzeige auftritt?

 

[Gumbo]

Um alle Grafiken untereinander darzustellen, weise allen Grafiken durch die CSS-Eigenschaftsdeklaration display:block Block-Level-Element-Charakteristika zu. Wenn du sie zusätzlich durch float:left beziehungsweise float:right zuweist, werden sie direkt nebeneinander dargestellt – vorausgesetzt ist natürlich eine Null-Polsterung und einen Null-Randbereich.

 

[randomize]

Klasse Gumbo, funktioniert einwandfrei. Danke für die schnelle Hilfe...

 

[Knitter]

Problem - Überlappen dann

Ich hab das gleiche Problem und wenn ich das so mache wie ihr beschrieben, geht es zwar, das 6 Bilder in einer Reihe nebeneinander sind, aber die nächsten 6 die eigentlich eine Zeile weiter unten sein sollten, überlappen sich mit den daüber dann.

Die Seite ist zurzeit unter
http://www.kalterwind.de/test.html

Mit den Lücken von den Vorschaufotos. Der Aufbau soll so bleiben, nur das die Lücken komplett verschwinden.

 

[Maik]

Probier mal folgendes Stylesheet:

a img
{
border: 0;
display: block;
float: left;
}

.clear
{
clear: left;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

<a href="01.php"><img src="fotografie/th_01.jpg" alt="Fotografie" width="61" height="61" border="0" /></a><a href="02.php"><img src="fotografie/th_02.jpg" alt="Fotografie" width="61" height="61" border="0" /></a><a href="03.php"><img src="fotografie/th_03.jpg" alt="Fotografie" width="61" height="61" border="0" /></a><a href="04.php"><img src="fotografie/th_04.jpg" alt="Fotografie" width="61" height="61" border="0" /></a><a href="05.php"><img src="fotografie/th_05.jpg" alt="Fotografie" width="61" height="61" border="0" /></a><a href="07.php"><img src="fotografie/th_07.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
<br class="clear" />
<a href="08.php"><img src="fotografie/th_08.jpg" alt="Fotografie" width="61" height="61" border="0" /></a><a href="09.php"><img src="fotografie/th_09.jpg" alt="Fotografie" width="61" height="61" border="0" /></a><a href="10.php"><img src="fotografie/th_10.jpg" alt="Fotografie" width="61" height="61" border="0" /></a><a href="13.php"><img src="fotografie/th_13.jpg" alt="Fotografie" width="61" height="61" border="0" /></a><a href="14.php"><img src="fotografie/th_14.jpg" alt="Fotografie" width="61" height="61" border="0" /></a><a href="15.php"><img src="fotografie/th_15.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>

 

[Knitter]

Vielen Dank, das klappt, aber irgendwie bin ich gerade auch zu blöd die ganzen Fotos zentriert zu bekommen im div.

 

[Maik]

Probier mal folgendes:

div.margin
{
margin-left: 67px; /* 500px - 6*61px / 2 */
}

<div id="tabelle">
<img src="header_01.jpg" alt="Kalterwind" height="213" width="500" border="0" />

<div class="margin">
     <a href="01.php"><img src="fotografie/th_01.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
     <a href="02.php"><img src="fotografie/th_02.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
     <a href="03.php"><img src="fotografie/th_03.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
     <a href="04.php"><img src="fotografie/th_04.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
     <a href="05.php"><img src="fotografie/th_05.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
     <a href="07.php"><img src="fotografie/th_07.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
</div>
<br class="clear" />
<div class="margin">
     <a href="08.php"><img src="fotografie/th_08.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
     <a href="09.php"><img src="fotografie/th_09.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
     <a href="10.php"><img src="fotografie/th_10.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
     <a href="13.php"><img src="fotografie/th_13.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
     <a href="14.php"><img src="fotografie/th_14.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
     <a href="15.php"><img src="fotografie/th_15.jpg" alt="Fotografie" width="61" height="61" border="0" /></a>
</div>
<br class="clear" />
<!-- usw. -->

</div><!-- end DIV#tabelle -->

 

[Knitter]

Super, problem gelöst