Benni: Bild per overflow am unteren Browserfenster abschneiden

Hi,

Ich möchte ein Bild, dass sich am unteren Rand meiner Homepage befindet per style='overflow:hidden' kürzen lassen. Leider funktioniert das noch nicht so. Hier mal eine vereinfachte Version von meinem Problem:

<table border="1" height="100%">
<tr><td height="610">&nbsp;</td><td>&nbsp;</td></tr>
<tr><td><img src="test1.jpg" /></td><td height="*" style="overflow:hidden"><img src="test2.jpg" /></td></tr>
</table>

in diesem Beispiel ist das Bild test2.jpg zu lang und würde einen Scrollbalken erzeugen. Per overflow möchte ich aber, dass es am unteren Rand vom Browserfenster abgeschnitten wird. Welchen Fehler mache ich?

thx für die Hilfe.

  1. hi,

    Ich möchte ein Bild, dass sich am unteren Rand meiner Homepage befindet per style='overflow:hidden' kürzen lassen.

    Schon beim Lesen dieser Aufgabenstellung mache ich mir meine Gedanken, ob und wie man das wohl umsetzen könnte -

    <table border="1" height="100%">
    <tr><td height="610">&nbsp;</td><td>&nbsp;</td></tr>

    • eine Tabelle kommt darin jedoch nicht vor.

    <td height="*" style="overflow:hidden"><img src="test2.jpg" /></td>

    in diesem Beispiel ist das Bild test2.jpg zu lang und würde einen Scrollbalken erzeugen. Per overflow möchte ich aber, dass es am unteren Rand vom Browserfenster abgeschnitten wird.

    Wenn height="*" irgendeine Gültigkeit hätte (* kannst du bei den rows und cols von Framesets angegeben, aber nicht als Höhenangabe), dann würde es wohl auf sowas wie height:auto hinauslaufen. Das wiederum zusammen mit overflow:hidden ist aber wieder eine von diesen sich selbst in den Schwanz beissenden Katzen ... einerseits soll abgeschnitten werden, wenn die "definierte" Höhe überschritten wird, andererseits aber ist die Höhe als "mach's so groß, wie's der Inhalt erfordert" definiert worden.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. <table border="1" height="100%">
      <tr><td height="610">&nbsp;</td><td>&nbsp;</td></tr>

      • eine Tabelle kommt darin jedoch nicht vor.

      »»
      Heißt das, dass overlow mit einer Tabelle generell nicht möglich ist, oder das du den Sinn dahinter nicht siehst warum ich bei diesem einfachen Beispiel (in Wirklichkeit ist es etwas komplizierter) eine Tabelle verwende? Wie würdest du es realisieren? Ich hab gelernt meine Homepage immer mit Tabellen umzusetzen und bis jetzt hat es auch immer wunderbar geklappt. Gibt es einen Grund es anders zu machen?

      <td height="*" style="overflow:hidden"><img src="test2.jpg" /></td>

      in diesem Beispiel ist das Bild test2.jpg zu lang und würde einen Scrollbalken erzeugen. Per overflow möchte ich aber, dass es am unteren Rand vom Browserfenster abgeschnitten wird.

      Wenn height="*" irgendeine Gültigkeit hätte (* kannst du bei den rows und cols von Framesets angegeben, aber nicht als Höhenangabe), dann würde es wohl auf sowas wie height:auto hinauslaufen. Das wiederum zusammen mit overflow:hidden ist aber wieder eine von diesen sich selbst in den Schwanz beissenden Katzen ... einerseits soll abgeschnitten werden, wenn die "definierte" Höhe überschritten wird, andererseits aber ist die Höhe als "mach's so groß, wie's der Inhalt erfordert" definiert worden.

      Ich hab das jetzt nicht mehr nachrecherchiert. Aber soweit ich das noch weiß wird für * die überschüssige Länge eingesetzt die ein Element noch besitzt. Das würde in meinem Beispiel doch folgendes bedeuten: Die gesamte Tabelle besitzt eine Höhe von 100 % => sie erstreckt sich in der Höhe über das gesamte Browserfenster. Die erste Reihe ist 610 hoch. Folglich müsste die Höhe der zweiten Reihe "Gesamthöhe (weil 100%)" minus "610" annehmen. Das tut es auch, wenn ich das Bild, welches zu groß ist nicht einfüge. Daraus schließe ich, dass es ja grundsätzlich schon funktioniert.

      Das es doch nicht so ist zeigt die Praxis. Wo liegt also mein Fehler?

      Das es einen Konflikt geben könnte mit der Angabe height="*" und overflow:hidden, habe ich mir schon gedacht. Aber ich bin davon ausgegangen, dass sich das * auf die gesamte Höhe der Tabelle bezieht   und dass sich die Tabelle zwar automatisch verlängert, aber ich das mit overflow umgehen kann.... was ja anscheinend doch nicht der Fall ist.

      Lange Rede kurzer Sinn... ich weiß immer noch nicht weiter.

      1. »»[...] Ich hab gelernt meine Homepage immer mit Tabellen umzusetzen und bis jetzt hat es auch immer wunderbar geklappt. Gibt es einen Grund es anders zu machen?

        Wann hast Du das denn gelernt? So vor 8 Jahren hab ich das auch mal gelernt. Solange Du auch eine Tabelle darstellen willst, ist dagegen auch nichts einzuwenden. Aber ansonsten benutzt man normalerweise keine Tabellen mehr. Wir leben schliesslich in einer Zeit, in der doch jeder Browser vernuenftig CSS umsetzen kann. :)

        Hast Du mal versucht Dein Problem zu loesen, indem Du die Grafik als Hintergrundbild benutzt?

        1. »»[...] Ich hab gelernt meine Homepage immer mit Tabellen umzusetzen und bis jetzt hat es auch immer wunderbar geklappt. Gibt es einen Grund es anders zu machen?

          Wann hast Du das denn gelernt? So vor 8 Jahren hab ich das auch mal gelernt. Solange Du auch eine Tabelle darstellen willst, ist dagegen auch nichts einzuwenden. Aber ansonsten benutzt man normalerweise keine Tabellen mehr. Wir leben schliesslich in einer Zeit, in der doch jeder Browser vernuenftig CSS umsetzen kann. :)

          Hast Du mal versucht Dein Problem zu loesen, indem Du die Grafik als Hintergrundbild benutzt?

          ich hab jetzt über einen Kollegen folgende Lösung gefunden:

          body {
             height:100%;
             overflow:hidden;
          }

          das ist keine optimale Lösung aber besser als nichts.

          Zum Thema Tabellen: Bis jetzt hat immer alles gut funktioniert. Deswegen hab ich noch keinen Grund gesehen etwas anderes zu machen. Was bringt es mir für Vorteile <div> zu nehmen und keine Tabellen mehr?