Overflow von unten nach oben?! Geht das überhaupt? ^^

Valentin

Hallo liebe Community!

Ich habe ein Problem mit einem Tabellendesign meiner Homepage. Die Homepage an sich ist in Flash realisiert, daher das einfache Tabellendesign "drumrum". Könnte es natürlich auch mit DIV-Containern machen, weiß nicht was für meinen Fall besser ist.
Das Problem ist, dass ich das Design gern auf verschiedene Bildschirmgrößen anpassen möchte. Horizontal gesehen ist das ja kein Problem - einfach die Tabelle zentrieren.
Vertikal ist das Problem jedoch, dass das Tabellenfeld größentechnisch fixiert sein soll und einen Overflow bekommen soll - das habe ich auch soweit hinbekommen. Das Problem ist nur, dass der Overflow von unten nach oben geschehen soll.
Das heißt, dass das Flash Element immer am unteren Bildschirmrand zu sehen sein soll (innerhalb dieses Tabellenelements). Darüber "gestapelt" ist dann ein Bild, dass nur bei großen Bildschirmen zu sehen sein soll - ansonsten soll es im Overflow verschwinden.

Kurz gesagt: Wie mache ich einen Overflow von unten nach oben?! Hoffe das lässt sich in HTML/CSS realisieren (ohne JS oder so)

Vielen Dank schon einmal! Würde mich freuen wenn mir jemand helfen könnte ! Wenn es nicht anschaulich genug ist, zeige ich euch auch gerne Screenshots/Code.

mfg, valle

threadi

Wenn Du alles in einer Tabellenzelle stehen hast, genügt ein

Code

vertical-align: middle;

bei eben dieser Tabellenzelle. Dazu müssten alle darin enthaltenen Elemente Inline-Elemente sein - Blockelemente reagieren hierauf nicht.

Vorsicht bei Verwendung von fixierten oder absoluten Positionierungen von Tabellenelementen. Das wirkt sich je nach Browser unterschiedlich aus und ist nicht zielführend.

Valentin

Hi threadi !
Vielen Dank für deine Antwort! Kann Hilfe gerade gut gebrauchen ...
Leider funktioniert deine Methode nicht - warum auch immer. (Das Flash Element ist aus dem Bildschirm nach unten (?) verschwunden - man sieht nur noch das Bild was eigtl nur bei großen Auflösungen eingeblendet werden soll)
Habe das Bild und das Flash Objekt einfach als markiert, ist doch für Inline-Elemente oder?
Habe hier nochmal den Code kopiert, hoffe du kannst was damit anfangen. Wenn nicht, stell ich gern nochmal nen Screenshot online!

Code

<table width="1040" height="892" border="0" align="center" cellpadding="0" cellspacing="0" id="Tabelle_01">
	<tr>
	  <td rowspan="3">
			<img src="Bilder/links.jpg" width="70" height="892" alt=""></td>
		<td valign="bottom">
			</td>
		<td rowspan="3">
			<img src="Bilder/rechts.jpg" width="70" height="892" alt=""></td>
	</tr>
	<tr>
		[highlight]<td colspan="2" stlye="width:900; height:642; vertical-align: middle">
        <span>
        <img src="Bilder/Himmel-oben.jpg" width="900" height="367" alt="">


        <div id="flashContent" align="bottom">
            <p>
                To view this page ensure that Adobe Flash Player version 
                10.2.0 or greater is installed. 
            </p>
          <script type="text/javascript"> 
                var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://"); 
                document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" 
                                + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); 
            </script> 
        </div>


			<noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" align="top" id="Main">
                <param name="movie" value="Main.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object data="Main.swf" type="application/x-shockwave-flash" width="100%" height="100%" align="top">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                    <p> 
                        Either scripts and active content are not permitted to run or Adobe Flash Player version
                        10.2.0 or greater is not installed.
                    </p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </noscript>
        </span>
        </td>
[/highlight]
	</tr>
	<tr>
		<td style="width:900 height:73 table-layout:fixed vertical-align: bottom">
			<img src="Bilder/unten.jpg" width="900" height="73" alt=""></td>
  </tr>
</table>

Alles anzeigen

threadi

Die von mir genannte Möglichkeit würde funktionieren, wenn in der Tabellenzelle keine Blockelementen enthalten wären. Ich sehe dort aber <div> und . Wenn Du alles was in der Zelle enthalten ist per CSS zu Inline-Elementen machst, sollte es eigentlich auch klappen.

Valentin

Moin Threadi! Vielen Dank schonmal für deine Hilfe, dein Tipp hat funktioniert! Das schwarze Gebilde ist nun wirklich am Bildschirmrand unten.
Allerdings habe ich noch ein letztes Problem, was ich leider nicht ausmerzen kann, da ich bei bestem Willen nicht weiß woran es liegt.
Dazu hier zwei Screenshots, einmal den (relevanten) Code und die Seite im Browser zur Anschauung.

[Blockierte Grafik: http://www.deathrowdesign.de/misc/Code.jpg]
[Blockierte Grafik: http://www.deathrowdesign.de/misc/Bild.jpg]

Und zwar habe ich das Problem, dass das Tabellenelement "tabelle" (rot markiert im Bild) nicht die gewünschte Größe hat. Denn die Tabellenoberkante sollte so hoch gehen, bis der Browser erreicht ist (also bis ganz oben) - und den restlichen Inhalt verstecken. Ich dachte das geht mit overflow:hidden, jedoch reagiert die Tabelle auf keinerlei overflow-Befehl.
Weißt du wo der Fehler liegt?!

Vielen Dank!
Valentin

PS: Und die weiße Linie zwischen Flashelement und Himmelbild stört mich auch - woher kommt die?

Tags