Thomas: Tabelle mit Grafiken nahtlos an Image anfügen

Hallo!

Gibt es eine Möglichkeit eine Tabelle direkt (also nahtlos) an ein Image anzufügen? Bei mir bleibt zwischen dem Image und der anschließenden Tabelle immer ein Zwischenraum übrig. Zu sehen ist das ganze unter: http://www.zeichenwasser.de/test
Ich kann das Image nicht mit in die Tabelle packen weil die Seite, so wie sie dargestellt ist, in einen Frame kommt. Würde ich einfach jeweils die Tabellen mit den Grafiken in die Frames setzen, taucht an den Stellen, wo Grafiken aneinanderstoßen immer eine schwarze Naht auf. Und gegen die kann man scheinbar nichts machen (border, framborder, etc. gleich Null setzen bringt nix). Wenn ich allerdings an der Framegrenze ein Image hinsetze, gibt es diese Naht nicht.

Thomas

  1. Hallo, Thomas.

    Gibt es eine Möglichkeit eine Tabelle direkt (also nahtlos) an ein Image anzufügen?

    Das liegt an der Positionierung der Grafik in der Line Box, siehe http://devedge.netscape.com/viewsource/2002/img-table/. Soweit ich das sehe, wäre hier display:block hilfreich.

    Bei mir bleibt zwischen dem Image und der anschließenden Tabelle immer ein Zwischenraum übrig. Zu sehen ist das ganze unter: http://www.zeichenwasser.de/test/

    Ehrlich und mit Verlaub: die komplette Seite ist ausnahmslos Müll. Ich nehme einmal an, dass du sie auf die Öffentlichkeit loslassen willst, wenn es nur eine Präsentation ist, gelten einige Anmerkungen nicht, aber die Makel des Aufbaus bleiben:
    1. Die Seite ist fest auf 1024x768 ausgerichtet, wobei die Grafik und die Tabelle mit den Grafiken *genau* 1024 Pixel breit sind, wodurch selbst bei einer Auflösung von 1027x768 eine horizontale Scrolleiste angezeigt wird (selbst im Kiosk-/Präsentations-Modus). In Wirklichkeit besteht aber kein Grund, die Seite auf eine Auflösung zu schreiben.
    2. Die komplette Layouttabelle, welche die Grafiken positioniert, ist unnütz. Wenn du keine Mouseover-Effekte oder Links den einzelnen Teilgraifken zuordnen willst, ist es kontraproduktiv und absolut hirnrissig, die *eine* Grafik in siebzehn (!) kleine Grafiken aufzuspalten. Rechne dir bitte einmal aus, wieviel Traffic dadurch entsteht, alleine der HTTP-Overhead erzeugt insgesamt mehr Traffic als *eine* große Grafik je insgesamt brauchen würde.
    3. Die dutzenden Platzhaltergrafik sind wohl eher ein Witz:

    <tr>
       <td><img src="_bilder/spacer.gif" width="543" height="1" border="0"></td>
       <td><img src="_bilder/spacer.gif" width="120" height="1" border="0"></td>
       <td><img src="_bilder/spacer.gif" width="91" height="1" border="0"></td>
       <td><img src="_bilder/spacer.gif" width="45" height="1" border="0"></td>
       <td><img src="_bilder/spacer.gif" width="48" height="1" border="0"></td>
       <td><img src="_bilder/spacer.gif" width="177" height="1" border="0"></td>
       <td><img src="_bilder/spacer.gif" width="1" height="1" border="0"></td>
      </tr>

    Krass, sage ich nur, absolut krass. Für so etwas gibt es die CSS-Eigenschaften margin, padding, height, table-layout:fixed oder zumindest colspan, wenn du unbedingt auf Grafiken aus bist. Hast du auch nur ein Blick in den Quelltext geworfen oder hat den irgendein Programm für dich erstellt? Nicht einmal Alternativtexte sind gesetzt, eine Dokumenttypdefinition gibt es auch nicht, wodurch die Browser deine Seite im Quirks-Modus rendern.

    Die Seite könntest du dermaßen einfach aufbauen: ein p-Element um die *eine* Grafik, welches ein Hintergrundbild hat, welches die sich fortsetzende Hälfte von start_zw_o.png enthält; dies lässt du sich nur horizontal fortsetzen. Die Grafik richtest du mit text-align rechts aus. Dem p-Element oder besser gleich dem html- und body-Elementen gibst du diese graue Hintergrundfarbe, zusätzlich html,body,p {margin:0; padding:0} - und das wäre alles.

    Ich kann das Image nicht mit in die Tabelle packen weil die Seite, so wie sie dargestellt ist, in einen Frame kommt.

    Wie geht das...!?! Die Seite ist auf haargenau 1024 Pixel Breite ausgerichtet, wo soll da noch ein Frameset hin? Falls es den unteren Bildbereich ausfüllen soll: Du verbrauchst schon 300 Pixel für die Seitenkopf (die Grafiken), bei 800x600 ist bei mir der Bereich, den eine Webseite zur Verfügung hat, 363 Pixel (!) hoch, selbst bei 1024x768 sind es nur 531 Pixel, wo soll da noch ein Inhaltsframe hin...?

    Ich mutmaße einmal, dass du Frames genauso unreflektiert einsetzen wirst, wie du es bei dieser Seite gezeigt hast, deshalb weise ich dich schon einmal prophylaktisch darauf hin, dass du das Frameset zugänglich gestalten solltest. Im in Selfhtml und im Archiv findest du dazu (auch von mir) dutzende Hinweise.

    Würde ich einfach jeweils die Tabellen mit den Grafiken in die Frames setzen, taucht an den Stellen, wo Grafiken aneinanderstoßen immer eine schwarze Naht auf. Und gegen die kann man scheinbar nichts machen (border, framborder, etc. gleich Null setzen bringt nix).

    Wenn du anstatt diesen überflüssigen HTML-Formatierungen CSS benutzen würdest, sähe es schon viel besser aus. Wenn du zusätzlich auf alle Seiten die oben genannten Verbesserungen anwendest, dürften keine unerwünschten Linien mehr auftauchen.

    Wenn ich allerdings an der Framegrenze ein Image hinsetze, gibt es diese Naht nicht.

    Nee, lass es lieber, solche komischen Workarounds zu erfinden, wo Ränder und Abstände mit Bildern bewerkstelligt werden. Das alles kann man tausendmal einfacher und mit enorm geringeren Ladezeiten mit CSS gestalten, und darüber gibt es in Selfhtml ein komplettes Kapitel, welches du dir zu Gemüte führen solltest: http://selfhtml.teamone.de/css/index.htm.

    Grüße,
    Mathias