[html] Bildgröße 100% der Zelle - geht nicht!

Michael · 25. März 2005

folgender Code:

Code:

</head>
<body bgcolor="#ffffff" background="bg.jpg">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="Center">
  <tbody>
    <tr>
      <td valign="Top" height="100%" width="8%" align="Left">
      <div align="Left"><img src="bild.gif" border="0" alt="bild" width="63" height="100%">
......

Ich möchte, dass egal welche Größe das Browserfenster hat, das Bild immer von ganz oben bis ganz unten geht und genau 63 Punkte breit ist. Aber irgendwas mache ich falsch. Woran liegts?

QUT-Clan · 25. März 2005

An voran hapert es bei dir, geht das Bild bei dir nicht ganz nach unten, oder ist es nicht die 63 Pixel breit, oder beides?

Michael · 25. März 2005

Das Bild ist 63 Pixel Breit. Ich kann das Bild auch mit height="600" auf 600 Pixel Höhe trimmen, aber nicht auf 100% der Zelle.

QUT-Clan · 25. März 2005

Probier es mal so:

Code:

</head>
<body bgcolor="#ffffff" background="bg.jpg">
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="Center">
  <tbody>
    <tr>
      <td valign="Top" align="Left" style="width: 8%; height: 100%; background:url('bild.gif');">

Michael · 25. März 2005

schonmal nicht schlecht. Aber ich muss dazu sagen, dass es sich bei dem Bild um eine Säule handelt. In Deinem Beispiel wiederholt sich das Bild als Hintergrundbild in der Zelle (auch cool, eigentlich, aber in diesem Fall unpassend).

Noch ne Idee vll? :daumendrück

karuso · 25. März 2005

haste mal margin und padding der zellen auf 0px gesetzt?
je nach browser wird ja ein randabstand erzeugt, und das div element daran ausgerichtet.

Michael · 25. März 2005

Ja, bringt nix.

Swordmaster · 25. März 2005

Zumindest mit Firefox als Browser geht der folgende Code, der IE interpretiert es wohl falsch.

Ich würde es auf jeden Fall mit css probieren zu lösen.

Code:

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.saeule {
	position: absolute;
	height: 100%;
	width: 163px;
}
-->
</style>
</head>
<body> 
<table width="100%" height="100%" border="0" align="Center" cellpadding="0" cellspacing="0"> 
  <tbody> 
    <tr> 
      <td> <div align="Left"><img src="Unbenannt-2.gif" alt="bild" border="0" class="saeule"></div></td> 
    </tr> 
  </tbody> 
</table> 
</body>
</html>

flexius · 26. März 2005

Ich glaube, der Faktor sind hier die 8 % in der Zeile, je nach größer des Fensters und Auflösung können die 8% kleiner sein als 63 pixel.

Bei einer Breite von sagen wir mal 700 Pixel sind 8% ja nur 56 pixel. Ich hoffe, ich kann meine Aussage dadurch verständlich rüberbringen

Michael · 26. März 2005

Swordmaster, vielen Dank für den Tipp mit CSS. Leider muss die Seite auch mit IE korrekt angezeigt werden. Man munkelt, es gäbe noch den ein oder anderen MS User...

Selfthtml ist natürlich die erste Anlaufstelle. Und wenn Du dort liest, wirst Du den Tipp mit "%" finden. Aber warum funktioiert das nicht? In der Breite funktionierts, aber nicht in der Höhe.

Swordmaster · 26. März 2005

Michael schrieb:
In der Breite funktionierts, aber nicht in der Höhe.

Eben, das hatte mich auch gewundert.
Ich werde mich auch noch ein bißchen in die neue Version von SelfHTML reinlesen, vielleicht gibts ja ne andere Lösung...

Michael · 30. März 2005

Swordmaster schrieb:
Eben, das hatte mich auch gewundert.
Ich werde mich auch noch ein bißchen in die neue Version von SelfHTML reinlesen, vielleicht gibts ja ne andere Lösung...

Prima. Das müßte doch irgendwie machbar sein!? Hmmm.

V1tzl1 · 31. März 2005

Hmm wenn mich nicht alles täuscht, liegt es nur daran, dass die tabelle keine height="100%" hat, denn er kann das bild nur so hoch strecken, wie die tabelle hoch ist.

Swordmaster · 31. März 2005

V1tzl1 schrieb:
Hmm wenn mich nicht alles täuscht, liegt es nur daran, dass die tabelle keine height="100%" hat, denn er kann das bild nur so hoch strecken, wie die tabelle hoch ist.

Hey, du hast Recht, ohne die Tabelle funktioniert alles (mit css und ohne).

Bluerock · 1. April 2005

V1tzl1 schrieb:
Hmm wenn mich nicht alles täuscht, liegt es nur daran, dass die tabelle keine height="100%" hat, denn er kann das bild nur so hoch strecken, wie die tabelle hoch ist.

Eigentlich müsste das irrelevant sein, da sich die Tabelle dan an der höhe des Bildes orientiert.

Michael · 1. April 2005

Bluerock schrieb:
Eigentlich müsste das irrelevant sein, da sich die Tabelle dan an der höhe des Bildes orientiert.

Richtig. Die Tabellen-Höhe orientiert sich am Inhalt. Ich habe trotzdem mal die Tabellenhöhe mit 100% angegeben. Keine Änderung.
Das Problem lieg daran, dass hier zwei Säulen die Seite "halten" - eine links, eine am rechten Rand. Ohne Tabelle ist es schwierig, sie an die äußeren Ränder zu quetschen, und den mittigen Platz totzdem frei zu zentrieren.

Swordmaster · 1. April 2005

Wenn du eine Browserweiche einbauen würdest würde folgendes funktionieren:

Für Firefox:

HTML:

<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.saeule {
	height: 100%;
	width: 20px;
	position: absolute;
}
.tabelle {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
}
-->
</style>
</head>
<body> 
<table class="tabelle"> 
  <tbody> 
    <tr> 
      <td> <div><img src="bild.gif" alt="bild" border="0" class="saeule"></div></td> 
    </tr> 
  </tbody> 
</table> 
</body>
</html>

Für den IE das gleiche. Nur muss im CSS Tag oben bei ".tabelle" die Höhe ("height: 100%") weggemacht werden. Dann funktioniert es mit beiden Browsern.

Michael · 3. April 2005

Leider nein.
Laut dieser Info kann Netscape/Mozilla das gar nicht

Wenn ich als Position "absolute" angebe, wird 100% der Grafikhöhe verwendet. Das Bild wird aber nicht gestreckt. Der IE macht das schon lange. Aber Netscape nicht. Ich hatte gehofft, dass die Jungs mittlerweile soweit wären. aber dem scheint nicht so zu sein. Ich hab auch mit anderen CSS/Styles rumhantiert - aber ich ich krieg das nicht hin! Vll sollte ich das ganze mal ohne Tabelle machen?

V1tzl1 · 3. April 2005

Michael schrieb:
Richtig. Die Tabellen-Höhe orientiert sich am Inhalt.[...]

Mag sein, aber am Textinhalt, die Bildhöhe passt sich dem höchsten Text an.

sim0n · 5. April 2005

servus, probier mal folgendes:

Code:

</head>
<body bgcolor="#ffffff" background="bg.jpg">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
    <tr>
      <td valign="top" align="left" width="63" height="100%">
        <img src="bild.jpg" width="63" height="100%">
      </td>
      <td width="92%">
......

wenn ich richtig verstanden habe was du willst, funktioniert es so (ie + mozilla)

[html] Bildgröße 100% der Zelle - geht nicht!

Re-aktions-Pinguin

Lt. Commander

Re-aktions-Pinguin

Lt. Commander

Re-aktions-Pinguin

Captain

Re-aktions-Pinguin

Lieutenant

Cadet 3rd Year

Re-aktions-Pinguin

Lieutenant

Re-aktions-Pinguin

Lt. Junior Grade

Lieutenant

Commander

Re-aktions-Pinguin

Lieutenant

Re-aktions-Pinguin

Lt. Junior Grade

Cadet 3rd Year

Ähnliche Themen