Grafiken in Tabellen

[highfly]

Hallo Miteinander,

ich hab da mal ne Frage. Und zwar hab ich auf ner Website eine Tabelle mit Grafiken darin gefunden. Diese wollte ich nachbauen. Klingt einfach, dacht ich. Aber ich brüte jetzt schon seit Stunden darüber und bekomms einfach nicht so hin, wie es sein soll.

Oben sieht man wies im original aussieht.
Unten, so wie es bei mir aussieht. Den Unterscheid hab ic hrot umrandet.
Aus einem mir unerfindlichen Grund ist bei meiner Version eine Lücke zwischen dem .gif und dem unteren Zellenrand, beim Original is das nicht der Fall.
Der einzige Unterscheid zwischen den Quelltexten liegt in der formatierung der selbigen. Meiner ist übersichtlicher. Aber ansonsten sind sie exakt identsich, desshalb versteh ich das auch net.
Das is der original Code:

<table width="100%" border="1" cellpadding="0" cellspacing="0">  
        <!--DWLayoutTable-->  
        <tbody><tr>  
          <td rowspan="2" valign="top" width="405"><div align="right"><a href="http://www.rcpowers.com/forum/blog.php?u=23" target="_blank"><img src="http://www.rcsuperpowers.com/images/clickhere.jpg" width="398" border="1" height="340"></a>  
            </div></td>  
  
          <td valign="top" width="405" height="300"><div align="left"><a href="http://www.rcpowers.com/forum/blog.php?u=23" target="_blank"><img src="http://www.rcsuperpowers.com/images/Mon-ultsales-anime.gif" width="400" border="1" height="298"></a></div></td>  
        </tr>  
        <tr>  
          <td valign="top" height="51"><div align="left"><a href="http://www.rcpowers.com/forum/blog.php?u=23" target="_blank"><img src="http://www.rcsuperpowers.com/images/todays.jpg" width="400" border="1" height="40"></a></div></td>  
        </tr>  
        <!--DWLayoutTable-->  
      </tbody></table>

Das is meiner:

<table width="100%" cellpadding="0" cellspacing="0" border="1">  
  <tbody>  
    <tr>  
	  <td rowspan="2" valign="top" width="405px">  
	    <div align="right">  
		  <a href="http://www.rcpowers.com/forum/blog.php?u=23" target="_blank">  
		    <img src="http://www.rcsuperpowers.com/images/clickhere.jpg" width="398" height="340" border="1" />  
		  </a>  
		</div>  
	  </td>  
	  <td valign="top" width="405px" height="300px">  
	    <div align="left">  
		  <a href="http://www.rcpowers.com/forum/blog.php?u=23" target="-blank">  
		    <img src="http://www.rcsuperpowers.com/images/Mon-ultsales-anime.gif" width="400px" height="298px" border="1" />  
		  </a>  
		</div>  
	  </td>  
	</tr>  
	<tr>  
	  <td valign="top" height="51">  
	    <div align="left">  
		  <a href="http://www.rcpowers.com/forum/blog.php?u=23" target="_blank">  
		    <img src="http://www.rcsuperpowers.com/images/todays.jpg" width="400px" height="40px" border="1" />  
		  </a>  
		</div>  
	  </td>  
	</tr>  
  </tbody>  
</table>

Was mach ich falsch oder hab ich übersehn?

Danke schonmal für eure Hilfe.

Gruß
Joachim

[Paul]

Moin Jochen,
da ist kein Bild ...

Paul

[highfly]

verdamm, hast recht.
Da is mir wohl n fehler unterlaufen, sry.

jetzt aber.

[Tim Tepaße]

Aus einem mir unerfindlichen Grund ist bei meiner Version eine Lücke zwischen dem .gif und dem unteren Zellenrand, beim Original is das nicht der Fall.

Hilfe zu diesem Forum; Häufig gestellte Fachfragen: Woher kommen die Lücken zwischen meinen Bildern in der Tabelle?

Besonders der zweite verlinkte Text dort ist für Dich interessant, weil er den Unterschied zwischen standards mode und almost standard mode erklärt (Mehr zu den unterschiedlichen Rendering-Modi findest Du in SELFHTML).

Der einzige Unterscheid zwischen den Quelltexten liegt in der formatierung der selbigen. Meiner ist übersichtlicher.

Das Original wird vermutlich im almost standard mode gerendert. Dir fällt dort sicherlich auf, dass dort keinerlei Zeilenumbrüche oder sonstiger Whitespace zwischen den Element-Tags stattfindet. In Deinem Versuch dagegen befindet sich Whitespace (Zeilenumbrüche und die Leerzeichen/Tabs der sauberen Einrückung) zwischen den Elementen. Dieser Whitespace wird zwar vom Browser zu einem Leerzeichen zusammengefasst, aber letztendlich ist dann immer noch ein Leerzeichen-Textknoten in der Arbeitsspeicherrepräsentation Deines Dokumentes. Und da Text, wenn auch nicht sichtbarer, da ist, wird Dein Bild nach den Regeln des almost standards mode auf die Text-Basislinie gesetzt und dadurch kommt der Leerraum unter den Bildern, der für die Unterlängen des Textes vorgesehen ist.

Du kannst jetzt einfach sämtlichen Whitespace zwischen den Element-Tags entfernen. Oder aber Du stellst Bilder mittels CSS auf Block-Elemente um. Letzteres dürfte auch praktisch sein, wenn Du irgendwann mal auf den richtigen standard mode wechseln dürftest.

Nebenbei wäre es geschickter, wenn Du sehr viel mehr mit CSS machen würdest. Praktisch alle layout-bestimmenden Attribute in Deinem Beispiel und die überflüssige div-Elemente können durch geeignete CSS-Regeln ersetzt werden.

[highfly]

Danke. Hab's jetzt über CSS als Block-Elemten gelöst.
Mit CSS bin ich leider noch net so fit.
Außerdem wollte ich den Quellcode möglichst exakt übernehmen um Fehler auszuschließen.

Vielen Dank.

Gruß
Joachim

[highfly]

N'Abend zusammen.

ich habe jetzt in den betreffenden img-tag folgendes reingeschrieben: style="display:block;". Funktioniert wunderbar. Und so hab ich die gewünschte Wirkung auch nur bei dem Bild, bei dem ichs brauch. Allerdings ergibt sich jetzt daraus ein neues Problem. Die Grafik soll ein Link sein. Mit der block-eigenschaft wird aber die gesammte zelle zum link, und nichtmehr nur das Bild. Wenn ich versuche die Zelle zu verkleinern, wird die grafik runterskaliert und es bleibt ein klickbarer Streifen neben dem Bild.

Wie kann ich das lösen?
hab nix paasendes dazu gefunden.