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 |
|
|
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
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
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 17.07.2007 09:52
Titel
|
|
|
Wieso machst du das mit einem IFrame und nicht zum Beispiel mit Div Elementen?
|
|
|
|
|
Anzeige
|
|
|
its.just.me
Threadersteller
Dabei seit: 17.07.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 17.07.2007 10:07
Titel
|
|
|
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.
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 17.07.2007 10:43
Titel
|
|
|
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
mahlzeit
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 17.07.2007 11:10
Titel
|
|
|
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.
|
|
|
|
|
its.just.me
Threadersteller
Dabei seit: 17.07.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 17.07.2007 11:18
Titel
|
|
|
ah verstehe ...
sind beides super Ansätze. Habs eben mal grob eingebunden und funktioniert einwandfrei. Genau nach sowas hab ich gesucht.
Vielen herzlichen Dank.
|
|
|
|
|
its.just.me
Threadersteller
Dabei seit: 17.07.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 17.07.2007 14:35
Titel
|
|
|
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 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
|
|
|
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 17.07.2007 15:16
Titel
|
|
|
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...
|
|
|
|
|
|
|
|
Ä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
|
|