mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 14:53 Benutzername: Passwort: Auto-Login

Thema: iframe überlagert Inhalt aber nicht im IE vom 17.07.2007


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> iframe überlagert Inhalt aber nicht im IE
Seite: 1, 2  Weiter
Autor Nachricht
its.just.me
Threadersteller

Dabei seit: 17.07.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 17.07.2007 08:49
Titel

iframe überlagert Inhalt aber nicht im IE

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

Meine Idee ist folgende: Ich möchte ein iframe über meinen Seiteninhalt legen, sodass der Text beim scrollen unter dem iframe hindurch scrollt, das iframe quasi den Text überlagert. Der Inhalt des iframes besteht aus mehreren Bildern unterschiedlicher Transparenz, sodass der Text beim scrollen oben und unten quasi ein- und ausgefaded wird, sprich nach oben und unten hin immer heller wird bis er schließlich verschwindet.

Nun zu meinem Problem: Im firefox hab ich alles Problemlos hinbekommen mit folgendem Code:

Code:

.
.
.
<DIV STYLE="width: 100%; height: 355; overflow: auto;">
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td>
    <iframe width="600" height="46" scrolling="no" src="ifc.htm" frameborder="0" allowtransparency="true" style="position:fixed"></iframe>
    <table width="400" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
     <tr>
      <td>
        bla, bla, bla
      </td>
     </tr>
    </table>
   </td>
  </tr>
</table>
</DIV>
.
.
.


und im Inhalt des iframes dann Bilder mit Alpha-Filter.

Im IE gibt es das Problem, dass des iframe den Textinhalt nicht überlagert sondern der Text stehts unter dem iframe steht und das iframe dann mitscrollt. Bringt mir natürlich gar nichts.

Allerdings weiß ich auch nicht ob ich zum überlagern des iframes über den Seiteninhalt eine Standard konforme Methode verwende. Beim firefox hab ichs mit style="position:fixed" oder style="position:absolut" hinbekommen. Der IE reagiert darauf gar nicht und außerdem hat das ja eigentlich nichts damit zu tun oder ?

Wäre super wenn mir jemand weiterhelfen könnte. Ich suche also nach einer Standart konformen Methode ein iframe über den Textinhalt der Webseite zu legen quasi zu überlagern oder zumindest eine Methode, die in möglichst vielen Browsern gleich aussieht Lächel


Ach ja - hier mal n Link auf meinen bisherigen code. Schauts euch erst im firefox und dann IE an. Dann wisst ihr was ich meine. Hier klicken für Beispiel
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 17.07.2007 09:52
Titel

Antworten mit Zitat Zum Seitenanfang

Wieso machst du das mit einem IFrame und nicht zum Beispiel mit Div Elementen?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
its.just.me
Threadersteller

Dabei seit: 17.07.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 17.07.2007 10:07
Titel

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
Wieso machst du das mit einem IFrame und nicht zum Beispiel mit Div Elementen?


Wie würde das denn dann aussehen ? Kann ich mir nichts drunter vorstellen wie das dann formal aussehen müsste.
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 17.07.2007 10:43
Titel

Antworten mit Zitat Zum Seitenanfang

m meinte es quasi so:
fadetextbox.html
und falls du nur auf einen farbigen hintergrund
ausfaden willst, ginge das recht easy so:
fadetextbox-color.html

* Mmmh, lecker... *
mahlzeit
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 17.07.2007 11:10
Titel

Antworten mit Zitat Zum Seitenanfang

Ja oder so. Ich hätte es ein wenig anders gemacht:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="de" lang="de">
  <head>
    <title>Test</title>
   <style type="text/css">
      body {
         padding: 150px;
      }
      div#textbox {
         height: 150px;
         position: relative;
         width: 500px;
      }
      div#text {
         height: 150px;
         overflow: auto;
      }
      div#trans1,
      div#trans2 {
         background: #FFF;
         height: 40px;
         opacity: 0.5;
         filter:Alpha(opacity=50);
         position: absolute;
         width: 480px;
      }
      div#trans1 {
         top: 0;
      }
      div#trans2 {
         bottom: 0;
      }
   </style>
  </head> 
  <body>
   <div id="textbox">
      <div id="text">
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
         text text text text text text text text text text text text
      </div>
      <div id="trans1"></div>
      <div id="trans2"></div>
   </div>
  </body>
</html>


Und anstatt hier #trans1 und #trans2 per css transparent zu machen würde ich einfach PNG´s
mit einem Verlauf von Weiß (oder wie auch immer) zu voll transparent nutzen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
its.just.me
Threadersteller

Dabei seit: 17.07.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 17.07.2007 11:18
Titel

Antworten mit Zitat Zum Seitenanfang

ah verstehe ...

sind beides super Ansätze. Habs eben mal grob eingebunden und funktioniert einwandfrei. Genau nach sowas hab ich gesucht.

Vielen herzlichen Dank.
  View user's profile Private Nachricht senden
its.just.me
Threadersteller

Dabei seit: 17.07.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 17.07.2007 14:35
Titel

Antworten mit Zitat Zum Seitenanfang

Ach Gott - wenn der Wurm drinne ist, ist er drinne ...

Hab mich jetzt nach euren Tips orientiert - ohne iframes - stattdessen mit <div>`s auf denen transparente .png`s liegen. Funktioniert soweit gut nur mit nem kleinen Manko. Dürfte ne Kleinigkeit sein aber starre nun schon so lange auf den code ... Vielleicht seht ihr den Fehler ...

Code:
<html>
<head>

<style type="text/css">

body,td,th
{
   color: #000000;   
   font-size: 14px;
   font-weight:normal;
}
div#textbox {
 height: 355px;
 position: relative;
 width: 600px;
}
div#text {
 width: 600px;
 height: 355px;
 overflow: auto;
}
div#trans1,
div#trans2,
div#trans3,
div#trans4,
div#trans5 {
 background:url(top_if_1.png);
 height: 10px;
 position: absolute;
 width: 600px;
 top: 0px;
}
div#trans2 {
 background:url(top_if_2.png);
 top: 10px;
}
div#trans3 {
 background:url(top_if_3.png);
 top: 20px;
}
div#trans4 {
 background:url(top_if_4.png);
 top: 30px;
}
div#trans5 {
 background:url(top_if_5.png);
 height: 6px;
 top: 40px;
}

</style>
</head>
<body bgcolor="#000000" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0">
 <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td></td>
    <td><img src="top.jpg" border="0"></td>
    <td></td>
  </tr>
  <tr>
   <td></td>
   <td height="355" background="if_content.jpg"  valign="top">
       <div id="textbox">
        <div id="trans1"></div>
        <div id="trans2"></div>
        <div id="trans3"></div>
        <div id="trans4"></div>
        <div id="trans5"></div>
        <div id="text">
         <table width="400" height="100%" cellpadding="0" cellspacing="0" border="0" align="center">
          <tr>
           <td>
             text text text text text text text text
             text text text text text text text text
             text text text text text text text text
             text text text text text text text text
           </td>
          </tr>
         </table>
        </div>       
       </div>
   </td>
   <td></td>
  </tr>
  <tr>
   <td></td>
   <td><img src="bottom.jpg" border="0"></td>
   <td></td>
  </tr>
 </table>
</body>
</html>


Problem: Firefox zeigts fehlerfrei. IE setzt die <div>`s nicht direkt untereinander sondern lässt mal Platz dazwischen, mal überlagert er welche. Dadurch entstehen unschöne Streifen.

Hier kann mans sehen. Erst Firefox benutzen, dann IE. Dann seht ihr was ich meine: Hier klicken für Bsp


Wenn mir da jetzt jemand weiterhelfen könnte hätt ichs geschafft und nerv auch nicht mehr Lächel Wäre super wenn mal jemand drüber sehen könnte.


Zuletzt bearbeitet von its.just.me am Di 17.07.2007 14:37, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 17.07.2007 15:16
Titel

Antworten mit Zitat Zum Seitenanfang

Schätze mal Du meinst den IE6? Der jute
kann noch keine PNG-Transparenzen darstellen,
außer man verpasst ihm einen Javascriptfix.

Machs doch lieber so, das du die »top_if_1.png«
als jpgs verbaust und den <div>'s dann die
transparenz gibts (siehe beispiel von oben).

Dat funktioniert dann auch ohne Javascript
auf IE5 ... IE7 und FF sowieso. <!--[if lt IE x]
Commentare nicht vergessen...
  View user's profile Private Nachricht senden
 
Ähnliche Themen iframe-Inhalt wird im IE nicht angezeigt
iframe-Größe dem darin geladenen Inhalt anpassen
Link in iframe im selben iframe wiedergeben
Bild überlagert div nicht [IE]
[CSS] Content Div überlagert Footer
Powerpoint - Sound überlagert sich
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.