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

Grafik an Tabellenzelle anpassen, so dass Grafik verzerrt

andi1000

Neues Mitglied
Hallo,

im folgenden Quelltext ist eine Tabelle, die sich jeweils der Auflösung des Bildschirms anpasst. In einer Zelle ist eine Grafik eingefügt. Diese soll sich jeweils der Zellengröße anpassen, d.h. die Grafik soll ihr Seitenverhältnis anpassen und verzerren. In Firefox funktioniert das auch mit dem unten angegebenen Quelltext, nur nicht im Internet Explorer. Ohne Grafik passt sich die Tabelle der Auflösung an, aber sobald ich die Grafik einfüge passt sich diese nur in der Höhe an und in der Breite zieht sie die Zelle auseinander, so dass die Grafik nicht verzerrt. Zudem erscheinen Scrollbalken. Was muss ich am Quelltext ändern, damit es auch im Internet Explorer funktioniert.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel</title>

<style type="text/css">
<!--
html, body { width: 100%; height: 100%; margin:0px; padding:0px; }
-->
</style>

</head>
<body>
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
<tr align="left" valign="top">
<th width="6%" height="20%">&nbsp;</td>
<th width="88%" height="20%">&nbsp;</td>
<th width="6%" height="20%">&nbsp;</td>
</tr>
<tr align="left" valign="top">
<td width="6%" height="10%">&nbsp;</td>
<th width="88%" height="10%">&nbsp;</td>
<td width="6%" height="10%">&nbsp;</td>
</tr>
<tr align="left" valign="top">
<td width="6%" height="50%">&nbsp;</td>
<td width="88%" height="50%"><img src="grafik.JPG" width="88%" height="100%"></td>
<td width="6%" height="50%">&nbsp;</td>
</tr>
<tr align="left" valign="top">
<td width="6%" height="20%">&nbsp;</td>
<th width="88%" height="20%">&nbsp;</td>
<td width="6%" height="20%">&nbsp;</td>
</tr>
</table>
</body>
 
Werbung:
im folgenden Quelltext ist eine Tabelle, die sich jeweils der Auflösung des Bildschirms anpasst.
Nein, tut sie nicht.
Das geht auch gar nicht mit HTML und auch nicht mit CSS. Beide kennen die Bildschirmauflösung nicht. Wozu auch? Sie ist für Webseiten irrelevant.

Ich verstehe den Sinn der Tabelle nicht. Ich sehe keine tabellarischen Daten, die Du als Tabelle auszeichnest. Außerdem scheint Dein Problem ein Darstellungsproblem zu sein, weswegen es im Bereich CSS besser aufgehoben wäre (obwohl Du kein CSS verwendest). CSS ist die Sprache, die Layout und Design einer Website definiert, HTML ist nur für die logische Auszeichnung des Inhalts da.

Vielleicht beschreibst Du einfach, was Du bezweckst, dann kann man Dir eine sinnvolle Lösung sagen.

In CSS ist es übrigens so, dass width:100% und height:100% das Bild in die Tabellenzelle auf die volle Größe der Zelle anpassen würde, denn width und height beziehen sich immer auf die Größe des Elternelements.
 
Also das mit der Tabelle ist so gemeint:
Egal welche Auflösung der Benutzer eingestellt hat oder auch wenn das Fenster verkleinert wird, nimmt
die 1. Zeile der Tabelle immer 20% des Fensterhöhe ein,
die 2. Zeile immer 10%,
die 3. Zeile immer 50%,
die 4.Zeile immer 20%.

die 1. Spalte immer 6% des Fensterbreite ein,
die 2. Spalte immer 88%,
die 3. Spalte immer 6%,

wenn ich nun eine Grafik in eine Zelle einfüge und diese dann auf width="100%" height="100%“ setze, hätte ich erwartet, dass sich diese in Höhe und Breite an die Zelle anpasst. Die Zelle ist doch hier das Elternelement. Das ist doch alles korrekt so und funktioniert ja auch in Firefox, aber eben nicht im Internet Explorer. Beim Internet Explorer verzieht es die Zelle.

Der Quelltext ist natürlich vereinfacht. In den Zellen wird teilweise noch Text eingefügt und natürlich der Border auf 0 gestellt. Habe den Border auf 1 gestellt, damit man die Zellen sieht, wenn man es im Browser betrachtet.
 
Werbung:
Du hast zwar

Ich verstehe den Sinn der Tabelle nicht.

beantwortet aber eindeutig nicht über

Ich sehe keine tabellarischen Daten, die Du als Tabelle auszeichnest.

nachgedacht. Tabellen werden nicht als Grundgerüst für Webseiten missbraucht. Aber genau das machst Du. Ohne dieses Tabellenkonstrukt würdest Du das was Du erreichen willst vermutlich viel einfacher erreichen.
 
Es besteht die Möglichkeit über Tabellen das Grundgerüst einer Seite festzulegen. Funktioniert ja auch so weit, nur einige Browser verstehen halt keine logischen Zusammenhänge.
Was muss ich ändern, wenn ich es aber trotzdem über Tabellen machen möchte? Es muss doch eine Möglichkeit geben, dass es der Internet Explorer auch versteht.
Was ist deiner Meinung nach die beste Möglichkeit das Grundgerüst einer Seite festzulegen.
 
Es besteht die Möglichkeit über Tabellen das Grundgerüst einer Seite festzulegen. Funktioniert ja auch so weit, nur einige Browser verstehen halt keine logischen Zusammenhänge.

Tabellen als Grundgerüst bilden keinen logischen Zusammenhang. Folglich kann man Tabellen zwar als Grundgerüst nutzen, muss damit aber gleichzeitig mit den vielen Nachteilen leben die Du nun erlebst.

Was ist deiner Meinung nach die beste Möglichkeit das Grundgerüst einer Seite festzulegen.

Nutzung der HTML-Elemente dafür wofür sie auch gedacht sind. h1 bis h6 für Überschriften, p für Absätze, strong für Betonungen, div für Gruppierungen etc.
 
Werbung:
Machs mit <div id="bild"> usw.. Dann in einer externen .css Datei die attribute festlegen. Ich wieß grad nciht was genau du machen möchtest mit der ganzen tabelle oder obs nur um das bild geht aber mit css gehts bestimmt =)

Wenn du icq hast kansnt auhc pm mit nr an mich shcicken geht einfacher -.-
gruß haynes
 
Es besteht die Möglichkeit über Tabellen das Grundgerüst einer Seite festzulegen.
Nicht alles, was möglich ist, macht auch Sinn. Du würdest auch nicht mit einem Bobby Car auf der Autobahn fahren wollen.

Was ist deiner Meinung nach die beste Möglichkeit das Grundgerüst einer Seite festzulegen.
Nicht nur seiner und meiner Meinung, und der vieler anderer, sondern die einzig sinnvolle Arbeitsweise ist: Logische Inhaltsauszeichnung in HTML, Layout und Design in CSS, strikte Trennung von Inhalt und Layout. Und das seit nunmehr ca. 10 Jahren, seit es CSS gibt. Das funktioniert wunderbar.

Machs mit <div id="bild"> usw.. Dann in einer externen .css Datei die attribute festlegen.
Wenn da nur ein einziges Image drin steht, ist das <div> völlig überflüssig und eigentlich semantisch falsch, da <div> einzig dazu verwendet wird, mehrere Elemente zu gruppieren. Viele CSS-Anfänger begehen den Fehler, beim Formatieren eines Elements noch ein Element außen rum zu legen. Wenn man ein Image formatieren will, dann soll man das Image formatieren und nicht noch außen etwas drumrum legen. Das ist wie Geschenke zweimal einwickeln.
 
Zurück
Oben