HTML Tabelle mit Bildgröße in %

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
thwbm

thwbm hat kostenlosen Webspace.
17:04, 24.5.2013
Hallo,
ich denke, dass mein Problem relativ einfach zu lösen ist, ich komme aber im Moment nicht weiter:
Ich habe eine Tabelle, in der ein Bild ist:
```
<html>
  <head>
    <title>
      Nur ein Test
    </title>
    <style type="text/css">
      body, html {
        width: 100%;
        height: 100%;
      }
      table, tr, td {
        border: 1px solid black;
      }
      div {
        height: 3%;
      }
      img {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div>
      <table height="100%">
        <tr height="100%">
          <td>
            <img src="Bild.png" alt="">
          </td>
          <td>
            <img src="Bild.png" alt="">
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
```
Ich habe jetzt mit Absicht die
```
<div>
```
-höhe so extrem klein Gewählt, damit mein Problem klar wird: Die Tabellenhöhe wird der Bildhöhe angepasst. Wenn man im CSS
```
img{display: none;}
```
ergänzt, wird die Tabelle wieder so klein, wie sie sein Soll, aber ohne wird die Tabellengröße auf die Bildhöhe angepasst.
Hat jemand eine Idee, wie ich verhindern kann, dass die Tabellengröße verändert wird? Ich möchte, dass das Bild dann kleiner wird, wenn zu wenig platz vorhanden ist. Danke im Vorraus für alle Antworten.
MFG THWBM
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

~~h**s~~

9:03, 25.5.2013

so sollte ds eigentlich funktionieren:

<html>
  <head>
    <title>
      Nur ein Test
    </title>
    <style type="text/css">
      body, html {
        width: 100%;
        height: 100%;
		margin:0px;
		padding:0px;
      }
	  table {
		  height: 100%;
	  }
      img {
        height: 100%;
      }
    </style>
  </head>
  <body>
      <table>
        <tr>
          <td>
            <img src="Bild.png" alt="">
          </td>
          <td>
            <img src="Bild.png" alt="">
          </td>
        </tr>
      </table>
  </body>
</html>

Autor dieses Themas
thwbm

thwbm hat kostenlosen Webspace.
17:48, 25.5.2013
Hallo,

hcms schrieb:
so sollte ds eigentlich funktionieren:
[...]

so funktioniert es leider auch nicht. Ob ich
```
table {height: 3%;}
```
oder
```
table {height: 1%;}
```
angebe, die Ausgabe auf dem Bildschirm ändert sich nicht. Bei
```
table {height: 10%;}
```
überlagern sich die Bilder, die
```
<td>
```
s sind also zu schmal. Ich habe es im Firefox und im Chrome getestet. Was mache ich falsch?
MFG THWBM

~~h**s~~

18:14, 25.5.2013

hmm seltsam, was sagen deine browser denn zu diesem code, ohne tabelle: ?

<html>
  <head>
    <title>
		Nur ein Test
    </title>
    <style type="text/css">
      body, html {
        width: 100%;
        height: 100%;
        margin:0px;
        padding:0px;
      }
      div {
      	height: 10%;
      }
      img {
      	height: 100%;
      }
    </style>
  </head>
  <body>
      <div>
      	<img src="Bild.png" alt="">
        <img src="Bild.png" alt="">
      </div>
  </body>
</html>

mein chrome, friefox, opera und sogar ie8 und netscapenavigator verhalten sich wie es zu erwarten ist.

rsinfo

rsinfo hat kostenlosen Webspace.

18:41, 25.5.2013
Ich habe es gerade auch getestet... vielleicht braucht ihr ja noch einen Tester hab ich gedacht :D

Bei mir wird auch alles "normal" dargestellt... evtl. liegt dein Fehler in dem HTML Teil, wenn du ein <td> oder <tr> irgendwie vergessen hast bzw. nicht richtig geschlossen hast, dann passieren meistens so komische Fehler... ist mir erst letztens auch passiert! Aber ich kann auf der anderen Seite auch keinen Fehler erkennen. Auch Notepad ++ hat mir keinen Fehler angezeigt?!
Autor dieses Themas
thwbm

thwbm hat kostenlosen Webspace.
22:34, 25.5.2013
Hallo,

hcms schrieb:
hmm seltsam, was sagen deine browser denn zu diesem code, ohne tabelle: ?
[...]

Ohne Tabelle funktioniert es, die Bildgrößen passen sich richtig an, aber ich habe das ganze in einer Tabelle:
```
<html>
  <head>
    <title>
      Nur ein Test
    </title>
    <style type="text/css">
      body, html {
        width: 100%;
        height: 100%;
        margin:0px;
        padding:0px;
      }
    </style>
  </head>
  <body>
    <table height="100%">
      <tr height="10%">
        <td>
          <img height="100%" src="Bild.png" alt="">
          <img height="100%" src="Bild.png" alt="">
        </td>
        <td>
          <div id="MehrInhalt">
            Tabelle mit Text
          </div>
        </td>
      </tr>
      <tr height="90%">
        <td>
          Text
        </td>
        <td>
          Text
        </td>
      </tr>
    </table>
  </body>
</html>
```
Ob ich die Bilder in noch eine weitere Tabelle setze oder nicht ändert nichts, sie werden nicht angepasst. Die äußerde Tabelle muss bleiben, da sie noch weiteren Inhalt hat.

rsinfo schrieb:
[...]evtl. liegt dein Fehler in dem HTML Teil, wenn du ein <td> oder <tr> irgendwie vergessen hast bzw. nicht richtig geschlossen hast, dann passieren meistens so komische Fehler... [...]

Ich habe es mit dem Code, den ich hier veröffentlciht habe, getestet. Ich habe ihn kopiert.
Hat noch jemand eine Idee oder einen Denkanstoß?
MFG THWBM

Beitrag zuletzt geändert: 25.5.2013 22:37:14 von thwbm
~~h**s~~

11:55, 26.5.2013
meiner meinung nach soll die höhe der zabellenzellen direkt in der td angegeben werden, nicht in der tr - es reicht die höhe der ersten zelle pro zeile anzugeben um alle zellen dieser zeile mit dieser höhe zu versehen... vielleicht hilft es es auch die zellen mit position:relative zu versehen um bei manchen browsern mit dem layout nachzuhelfen - oder verschachtele die img in ein weiters element wie zb div oder p.

Beitrag zuletzt geändert: 26.5.2013 11:58:17 von hcms
timebandit

timebandit hat kostenlosen Webspace.

9:09, 27.5.2013
HTML5
Differences Between HTML 4.01 and HTML5
In HTML 4.01, the height could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.
Zeilenhöhe in Tabellen allgemein(Quelle: SELFHTML):
Die Angabe zur Zeilenhöhe ist nur wirksam, wenn der Inhalt in jeder Spalte der Zeile kleiner ist, so daß leerer Raum entsteht. Wenn der Inhalt größer ist, wird die Angaben außer Kraft gesetzt. Die Zeile wird in diesem Fall so dimensioniert, daß der gesamte Inhalt angezeigt wird. Das ist beispielsweise der Fall, wenn in der Zeile eine Grafik vorkommt, die höher ist als die angegebene Zeilenhöhe.

Falls Sie zugleich eine bestimmte Höhe der gesamten Tabelle angeben, hat die Angabe zur Gesamthöhe im Konfliktfall Vorrang gegenüber der angegebenen Höhe einer einzelnen Zeile.
Autor dieses Themas
thwbm

thwbm hat kostenlosen Webspace.
18:16, 27.5.2013
Hallo,

hcms schrieb:
[...] die höhe der zabellenzellen direkt in der td angegeben werden [...] zellen mit position:relative [...] img in [...] zb div oder p.

Habe ich versucht, hat nicht funktioniert. Die Bilder wurden nicht richtig angepasst.

timebandit schrieb:
In HTML 4.01, the height could be defined in pixels or in % of the containing element. In HTML5, the value must be in pixels.

Das erklärt so einiges, aber warum ist das so? Angtaben in % sind doch etwas tolles, warum hat man das rausgenommen? Gibt es eine Möglichkeit,
```
<table height="X%">
```
,
```
<tr height="X%">
```
,
```
<td height="X%">
```
oder
```
<img src="123.png" alt="" height="X%">
```
zum Funktionieren zu bringen? Ich meine jetzt, eine alternative über CSS oder ähnliches. Hat jemand eine Idee?
MFG THWBM
timebandit

timebandit hat kostenlosen Webspace.

19:28, 27.5.2013
Bilder in Tabellen zu integrieren führt häufig zu Darstellungsproblemen(siehe SELFHTML).
Die Höhenangabe von Images in Pixel oder Prozent ist da eher nebensächlich.
Du wirst die Dimension der Bilder in Abhängigkeit der Tabellenreihen dynamisch berechnen müssen.
SEO-freundlicher und moderner ist die Verwendung von DIVs.
Autor dieses Themas
thwbm

thwbm hat kostenlosen Webspace.
21:54, 30.5.2013
Hallo,

timebandit schrieb:
Bilder in Tabellen zu integrieren führt häufig zu Darstellungsproblemen

ich habe es jetzt mal ganz ohne Tabellen versucht, dabei hatte ich aber das Problem, dass der
```
<div>
```
, der eine
```
<tr>
```
ersetzen soll, nicht nach rechts, sondern nach unten vergrößert, wenn der Inhalt (weitere
```
<div>
```
s) zu groß ist:
```
<div calss="Umriss">
  <div calss="Inhalt">
    Inhalt, der aus eine DB kommt, also unterschiedlich lang ist.
  </div>
  <div calss="Inhalt">
    Inhalt, der aus eine DB kommt, also unterschiedlich lang ist.
  </div>
  <div calss="Inhalt">
    Inhalt, der aus eine DB kommt, also unterschiedlich lang ist.
  </div>
</div>
```
Und der CSS-Teil:
```
.Inhalt {
  float: left
}
.Umriss {
  height: 10%;
}
```
Wenn jetzt der äußere
```
<div>
```
zu klein ist, dannwerden die inneren
```
<div>
```
s nach unten und nicht zur seite verschoben. Ich möchte aber, dass die inneren
```
<div>
```
s wie
```
<td>
```
s in einer Tabelle nebeneinander sind. Hat jemand eine Idee, wie man das lösen kann? Mit
```
.Umriss{width: 99999999%}
```
geht es zwar, das ist aber sehr unsauber und das möchte ich vermeiden.
MFG THWBM
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city

HTML Tabelle mit Bildgröße in %

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!