Hallo,
ich bins nochmals!
Habe ein neues Problem und zwar habe ich ein Hintergrund Bild wie BeRo es beschrieben hat in den Index Ordner eingefügt!Das funktioniert!
Auf einer Seite möchte ich einen Scrolltext einfügen via Iframe!
Sobald ich das mache geht der Hintergrund auf dieser Seite weg und ich sehe nur noch den Scrolltext!!
Ich habe einen Platzhalter erstellt wie beschrieben!
Kann es sein, dass die beiden Code eine verwirrung ergeben?
Gibt es eine möglichkeit das zu lösen??
Lg
Mark
Nein, Platzhalter-Code für das iframe behindert nicht die Hintergrundbilddarstellung.
Wie bei dem Hintegrundbild gilt hier gleiches zu deiner "Frage":
Was hast du genau gemacht?
Aussagekräftige Screenshot, bitte!
Guten morgen,
ich habe den HTML für den Hintergrund in den HTML Body der HP eingefügt!
In der Vorschau sieht es so aus:
Danach habe ich auf einer anderen Seite ein Rechteck gezogen und dort in den HTML Body diesen Code für den Scrolltect eingefügt:
Danach sieht es so aus:
Hintergrund weg!
Ich hoffe diese Infos genügen Dir!
Lg
Mark
Morgen!
Erkennen kann ich nichts, was da im Codefenster steht. Bild zu klein.
Du kannst dir den HTML-Code der Seite wo das iframe liegt im Exportordner mal ansehen und mit der index-Seite vergleichen, ob der Code für den Hintergrund auch vorhanden ist.
Er sollte ja über HTML-Code (body) der Webseite überall eingetragen sein.
Hallo,
ich hoffe ich habe das Richtig gemacht!
Habe die betroffene Seite mit dem Editor geöffnet und das zeigt es mir an:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="XAR Files" content="index_htm_files/xr_files.txt"/>
<title>schlager zauber willisau</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1252"/>
<meta name="Generator" content="Xara HTML filter v.5.0.1.979"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_main.css"/>
<link rel="stylesheet" type="text/css" href="index_htm_files/xr_text.css"/>
<!--[if !IE]>--><link rel="stylesheet" type="text/css" href="index_htm_files/xr_fonts.css"/><!--<![endif]-->
<!--[if IE]><link rel="stylesheet" type="text/css" href="index_htm_files/xr_fontsie.css"/><![endif]-->
<link rel="stylesheet" type="text/css" href="index_htm_files/custom_styles.css"/>
<script type="text/javascript" src="index_htm_files/roe.js"></script>
</head>
<body>
<div class="xr_ap" id="xr_xr" style="width: 1574px; height: 789px; top:0px; left:50%; margin-left: -787px;">
<script type="text/javascript">var xr_xr=document.getElementById("xr_xr")</script>
<!--[if IE]><div class="xr_ap" id="xr_xri" style="width: 1574px; height: 789px; clip: rect(0px 1574px 789px 0px);"><![endif]-->
<!--[if !IE]>--><div class="xr_ap" id="xr_xri" style="width: 1574px; height: 789px; clip: rect(0px, 1574px, 789px, 0px);"><!--<![endif]-->
<img class="xr_ap" src="index_htm_files/62.png" alt="" title="" style="left: 173px; top: 0px; width: 321px; height: 900px;"/>
<img class="xr_ap" src="index_htm_files/60.png" alt="" id="LiveCopy:58Set0" title="" style="left: 216px; top: 31px; width: 221px; height: 204px;"/>
<div class="Normaler_Text" style="position: absolute; left:159px; top:292px;font-family:'Kozuka Gothic Pr6N H Bold', Helvetica, Arial, sans-serif;font-size:26px;font-weight:bold;color:#B2B2B2;">
<span class="xr_tc Normaler_Text" style="left: -5px; top: 11px; width: 346px;font-family:'Kozuka Gothic Pr6N H Bold', Helvetica, Arial, sans-serif;font-size:26px;font-weight:bold;color:#B2B2B2;">Planen Sie einen Event?</span>
<span class="xr_tl Normaler_Text" style="left: 25px; top: 97px;font-family:'Kozuka Gothic Pr6N H Bold', Helvetica, Arial, sans-serif;font-size:20px;font-weight:bold;color:#B2B2B2;">Egal ob Sie einen Firmenanlass, </span>
<span class="xr_tl Normaler_Text" style="left: 25px; top: 134px;font-family:'Kozuka Gothic Pr6N H Bold', Helvetica, Arial, sans-serif;font-size:20px;font-weight:bold;color:#B2B2B2;">Konzert, Hochzeit oder sonst </span>
<span class="xr_tl Normaler_Text" style="left: 25px; top: 171px;font-family:'Kozuka Gothic Pr6N H Bold', Helvetica, Arial, sans-serif;font-size:20px;font-weight:bold;color:#B2B2B2;">eine Feier planen!</span>
<span class="xr_tl Normaler_Text" style="left: 25px; top: 208px;font-family:'Kozuka Gothic Pr6N H Bold', Helvetica, Arial, sans-serif;font-size:20px;font-weight:bold;color:#B2B2B2;">Kontaktieren Sie uns und wir </span>
<span class="xr_tl Normaler_Text" style="left: 25px; top: 245px;font-family:'Kozuka Gothic Pr6N H Bold', Helvetica, Arial, sans-serif;font-size:20px;font-weight:bold;color:#B2B2B2;">planen gemeinsam Ihren.</span>
</div>
<a href="index.htm" target="_self" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/123.png" alt="HOME" title="" onmousemove="xr_mo(this,0,event)" style="left: 524px; top: 117px; width: 94px; height: 33px;"/>
</a>
<a href="events.htm" onclick="return(xr_nn());">
<img class="xr_ap" src="index_htm_files/124.png" alt="EVENTS" title="" onmousemove="xr_mo(this,0,event)" style="left: 619px; top: 117px; width: 114px; height: 33px;"/>
</a>
<img class="xr_ap" src="index_htm_files/125.png" alt="ENGAGEMENT" title="" style="left: 733px; top: 117px; width: 172px; height: 33px;"/>
<img class="xr_ap" src="index_htm_files/126.png" alt="AGENTUR" title="" style="left: 906px; top: 117px; width: 132px; height: 33px;"/>
<img class="xr_ap" src="index_htm_files/127.png" alt="GALERIE" title="" style="left: 1039px; top: 117px; width: 122px; height: 33px;"/>
<img class="xr_ap" src="index_htm_files/128.png" alt="CONTACT" title="" style="left: 1162px; top: 117px; width: 129px; height: 33px;"/>
<img class="xr_ap" src="index_htm_files/146.png" alt="" title="" style="left: 540px; top: 197px; width: 748px; height: 597px;"/>
<div style="position: absolute; left: 554px; top: 205px; width: 725px; height: 576px; overflow: hidden;">
<iframe style="background:transparent" src="wilisau.htm" width="720" height="600" frameborder="0" ></frame>"
</div>
<div id="xr_xo0" class="xr_ap" style="left:0; top:0; width:1574px; height:100px; visibility:hidden;">
<a href="" onclick="return(false);">
<img class="xr_ap" src="index_htm_files/33.png" alt="HOME" title="" style="left: 524px; top: 117px; width: 91px; height: 33px;"/>
<img class="xr_ap" src="index_htm_files/131.png" alt="EVENTS" title="" style="left: 619px; top: 117px; width: 108px; height: 33px;"/>
<img class="xr_ap" src="index_htm_files/132.png" alt="ENGAGEMENT" title="" style="left: 733px; top: 117px; width: 162px; height: 33px;"/>
<img class="xr_ap" src="index_htm_files/133.png" alt="AGENTUR" title="" style="left: 906px; top: 117px; width: 125px; height: 33px;"/>
<img class="xr_ap" src="index_htm_files/134.png" alt="GALERIE" title="" style="left: 1039px; top: 117px; width: 114px; height: 33px;"/>
<img class="xr_ap" src="index_htm_files/135.png" alt="CONTACT" title="" style="left: 1162px; top: 117px; width: 122px; height: 33px;"/>
</a>
</div>
<div id="xr_xd0"></div>
</div>
</div>
<!--[if lt IE 7]><script type="text/javascript" src="index_htm_files/png.js"></script><![endif]-->
<script type="text/javascript">xr_aeh()</script>
<style type="text/css">
html, body {
background-color: #000000;
padding: 0px;
margin: 0px;
background-attachment: fixed;
background-image: url(index_htm_files/hintergrund.jpg);
background-repeat: no-repeat;
background-position: center top;
>
[/style>
</body>
</html>
Wie ich es sehe(kenne mich zuwenig damit aussind beide Files drin!
Aber warum zeigt es mir die nicht an??
Hallo Mark,
in dem Screenshot von dir - in dem man leider kaum was erkennen kann - da hast du dazu geschrieben:
ich habe den HTML für den Hintergrund in den HTML Body der HP eingefügt!
Aber ich sehe in dem Bild, dass der Code in den Body der Seite eingefügt wurde und nicht der Website. Das ist ein Unterschied! Wenn du das Hintergrundbild auf jeder Seite haben willst, dann musst du das in den Body der Website tun.
Und - wie Bildermacher ja auch schon angedeutet hat - da man nichts erkennen kann, mach uns doch mal eine Kopie des Codes. Einfach per Copy&paste. Vielleicht hast du ja nur ein Zeichen vergessen.....
Und wieso ist hier die MouseOver-Ebene aktiviert? Das ist mir auch noch unklar. Gruß Martina
Wenn das der Code der Seite ist, die auch online ist, sind da einige Fehler drin:
Zu Beginn gleich zwei mal ;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
Dann dein Hintergrundcode hat unnötige bzw falsche Klammern:
<style type="text/css">
html, body { - die stimmt
background-color: #000000;
padding: 0px;
margin: 0px;
background-attachment: fixed;
background-image: url(index_htm_files/hintergrund.jpg);
background-repeat: no-repeat;
background-position: center top;
> - falsch hier gehört } hin (Tastenkombi: AltGr+9)
[ ersetze durch < /style>
vollständig richtig:
<style type="text/css">
html, body {
background-color: #000000;
padding: 0px;
margin: 0px;
background-attachment: fixed;
background-image: url(index_htm_files/hintergrund.jpg);
background-repeat: no-repeat;
background-position: center top;
}
< /style>
Hallo Martina,
herzlichen Dank für Deine Antwort!
Der HTML ist in dem Register Website und dann im HTML Body einkopiert!
Es zeigt mir ja überall den Hintergrund an, nur dort nicht wo ich den Platzhalter gemacht habe für den Scrolltext!!
Dafür zeigt es mir den Text an!
Die Mous Over Ebene habe ich nur aufgemacht für den Screenshot!Gestern wolltest Du den sehen, darum!!
(habe leider keine Ahnung was ihr braucht!!
Hier der HTML für den Hitergrund:
<style type="text/css">
html, body {
background-color: #000000;
padding: 0px;
margin: 0px;
background-attachment: fixed;
background-image: url(index_htm_files/hintergrund.jpg);
background-repeat: no-repeat;
background-position: center top;
>
[/style>
Und hier der Iframe für die Scrollseite:
<iframe style="background:transparent" src="wilisau.htm" width="720" height="600" frameborder="0" ></frame>"
LG
Mark
Hallo Bildermachen,
Danke für Deine Mühe!
Habe ich das Richtig verstanden das Dein letzter Pink markierter Text Richtig ist??
Ich habe jetzt den Kopiert und eingefügt,aber die Situation ist unverändert!!
Hallo Bildermachen,
Danke für Deine Mühe!
Habe ich das Richtig verstanden das Dein letzter Pink markierter Text Richtig ist??
Ja.
Den Hintergrundbild-Code hast du von hier:
aber den HINWEIS zu den Klammern nicht beachtet!
Es wird noch so manches nicht passen, weswegen du nicht zum Ziel kommst.
Nenne nochmal die Web-Adresse, die aktuell ist, denn es gibt ja zwei Varianten deiner Page ...
http://www.test.deroevents.com/
oder die
Da sehe ich jetzt ein Hintergrundbild, yeah!
Nur das iframe noch nicht ...
Du hast Leerzeichen in deinen Seitennamen!
Was dazu führt, dass du solche Probleme bekommst:
http://www.deroevents.com/schlager%2520zauber%2520willisau.htm
Achte darauf, alle Seiten-Namen OHNE Leerstellen zu benennen oder nimm_Unter_striche.
Hallo Bildermacher,
es tut mir leid euch zu stressen!
Also die Adresse ist www.deroevents.com
Ich habe jetzt auch underline gemacht aber der Hintergrund ist wieder weg!!
Hallo Bildermacher,
es tut mir leid euch zu stressen!
Also die Adresse ist www.deroevents.com
Ich habe jetzt auch underline gemacht aber der Hintergrund ist wieder weg!!
Ja, weil im Internetexplorer (der zeigt keinen Hintergrund) der fehlerhafte Hintergrundcode "nicht verstanden" wird!
Dafür zeigt er das iframe an:
Man könnte jetzt zwischen Firefox und IE hin und her schalten ...
Du musst ihn in den Webeigenschaften anpassen, die "Website exportieren..." und ALLES mal auf dem Server löschen! Dann komplett neu hochladen!
SORRY!!!! Ich habe in dem lila-Code "- die stimmt" vergessen zu löschen. Bitte noch entfernen!!!
Habe ich gemacht und habe sogar nochmal eine neue HP angelegt,
sobald ich den Iframe in den Platzhalter füge,verschwindet der Hintegrund!Auf dieser Betreffenden Seite!!
Ich bin noch nicht dahinter gekommen, warum (mein WD9) das Hintergrundbild in das iframe steckt, aber auf der Seite nicht.
Nach deinem Schema habe ich es auch noch mal versucht.
Zu einem Ergebnis, dass der Hintergrund sowohl auf der Seite als auch im iframe dargestellt wird, bin ich mit dem Code in dieser Beschreibung von @BeRo gekommen:
Für ein iframe OHNE Hintergrund musst du den Code anders einfügen.
Entferne ihn auf dem Reiter Website aus dem Head-Button. Dann fügst du ihn auf dem Tab Seite in den Head-Button ein.
Das verhindert, dass der WD den Head auf alle Seiten einträgt.
Die Iframe-Quellseite bleibt dann ohne Hintergrund.
Ich danke Dir für Deine Mühe, aber wahrscheinlich bin ich einfach zu Dumm um das zu lernen!
Ich habe alles versucht was ihr mir gesagt habt, aber ich bin wirklich nicht in der Lage das hinzu bekommen!!
Ich bin einfach sehr unter druck und brauche diese Homepage bis Sonntag!!
Aber ich muss wohl das Handtuch werfen!!
Hatte nie Probleme mit WD!Das ist schon der 4.den ich benutze!
Mir gefällt wirklich Deine erste Version, aber wenn ich den HTML von Bero in den Heas einfüge bekommt mein hintergrund ein Vordergrund und ich kann nichts mehr sehen als der Hintergrund!!
Jetzt bin ich echt traurig, dass ich idiot das nicht hin kriege!
Herzlichen Dank nochmals!!
[... Jetzt bin ich echt traurig, dass ich idiot das nicht hin kriege! [...]
Die Trauer hat scheinbar geholfen, weitere Reserven zu mobilisieren, denn jetzt funktioniert es offenbar.
Gratuliere! Auch wenn der Weg dahin steinig war.
Was hältst Du denn davon, jetzt noch den i-Punkt drauf zu setzen und den Hintergrund der iframes halbtransparent zu machen?
Das Ergebnis könnte dann genau so aussehen, wie Du es Dir ursprünglich vermutlich vorgestellt hast:
Die entsprechend aufbereitete online Demo kannst Du Dir hier ansehen.
Und wenn Du noch genug Nerv hast, das umzusetzen, zeige ich Dir gerne, wo/wie Du den Hebel ansetzen musst.
Im Wesentlichen ist nur der Code für das Hintergrundbild in die per iframe eingebundenen Seiten zu kopieren und der Hintergrund dieser Seiten transparent zu machen. Dazu genügt dann eine Zeile Scriptcode.
Schlussendlich muss dann noch ein weiteres, halbtransparentes Hintergrundbild erzeugt werden...
Also, wenn Du noch Lust hast...
CU
Hi BeRo,
Herzlichen Dank für Deine nette Antwort!
Musst mich für mein Ausraster entschuldigen,
aber ich war über mich selber wütend, weil ich es nicht Schnallte!
Was ich falsch gemacht hatte war:
Ich habe genau gemacht was ihr mir gezeigt habt,
aber ich habe die HTML Codes direkt in die weisse Seite gefügt und nicht in den Grauen hintergrund!!
Gerne würde ich lernen wie mann es Transparent macht,
Das wäre meine Vorstellung gewesen !
Lg
Mark
[...] Gerne würde ich lernen wie mann es Transparent macht, [...]
Das sollte Dir schnell gelingen...
Entferne aus den Seiten "marc pircher.htm"- und "juzi.htm", die u. a. iframe "Leiche", die Du im HTML Head "vergessen" hast:
--------------------------------
#iframe name= wilisau src=index_htm_files\wilisau.htm width=100% height=100% scrolling=auto frameborder=0>
--------------------------------
Hänge im verbleibenden, korrekten iframe Code auf beiden Seiten die folgende Anweisung an:
----------------------
allowtransparency="true"
----------------------
Fertig sieht das dann so aus:
---------------------------------
<iframe src="willisau.htm" style="border:0px #FFFFFF none;" name="Text" scrolling="auto" frameborder="0" align=aus marginheight="0px" marginwidth="0px" height="100%" width="100%" allowtransparency="true"></iframe>
---------------------------------
Erstelle mit dem WD ein Rechteck in der Größe 800 x 636px, das Du schwarz einfärbst.
Weise dem Rechteck mit dem Transparenz Werkzeug (Glas) eine 40%ige Transparenz zu.
Speichere das halbtransparente Rechteck jetzt mit einem Rechtsklick auf die Grafik und Wahl der Option "Exportieren / PNG exportieren..." unter dem Namen "iframeback", als PNG Datei. Als Ziel kannst Du vorerst z. B. den Desktop wählen.
Füge in den HTML Head der beiden Seiten "willisau.htm"- und "willisau2.htm" den folgenden CSS/HTML Code ein:
-------------------------------
<style type="text/css">
<!--
img.bg2 {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
-->
</style>
<img src="index_htm_files/iframeback.png" class="bg2">
------------------------------
Achte darauf, dass Du die angegebene Image Klasse "bg2" verwendest, sowohl im CSS Code, als auch in der HTML Anweisung.
Lösche im HTML Body der beiden Seiten "willisau.htm"- und "willisau2.htm" den folgenden HTML Code:
-------------------------------
<body style="background-color: #191919">
-------------------------------
Füge stattdessen den folgenden Code ein:
-------------------------------
<body style="background-color: transparent">
-------------------------------
Das waren schon alle Änderungen...
Speichere die geänderten Projekte und exportiere sie in ein Verzeichnis auf Deinem PC.
Kopiere das vorhin neu angelegte Hintergrundbild "iframeback.png" in das exportierte Verzeichnis "index_htm_files" oder in ein angelegtes Hilfsverzeichnis.
Auch das "alte Hintergrundbild "hintergrund.jpg" gehört noch da hinein ;-)
Veröffentliche die drei Projekte und kopiere das Verzeichnis "index_htm_files" manuell auf den Webserver.
Der letzte Schritt ist allerdings nur nötig, wenn Du kein Hilfsverzeichnis benutzt hast.
That´s all...
Viel Erfolg und ein schönes WE
----------------------
P.S.
Du hast unnötigerweise für Dein Gesamtprojekt drei einzelne Projekte erstellt und es Dir damit unnötig schwer gemacht, daraus ein homogenes Ganzes zu schaffen.
Einfacher wäre es gewesen, die per iframe eingebundenen Seiten "willisau.htm"- und "willisau2.htm" direkt im Hauptprojekt zu erstellen...
Aber das kannst Du ja immer noch nachholen.
Hallo BeRo,
Wow,das ist ja ganz Cool und hat sehr gut geklappt!
Ich lade in den nächsten Minuten mal das erste hoch!!
Danke für die Super Erklärung, dass auch ein (Depp) wie ich es begreife!!
Nur noch kurz 2 Fragen:
Das war jetzt zufall das ich bg2 hatte!Was ist das genau und wie sehe ich das??
Gibt es eine möglichkeit, dass mann auch mit einem Smartphone Scrollen kann??
Lg
Mark
Na prima. Es ist also doch nicht so schwer...
Allerdings gehört der Code...
-------------------------------
<style type="text/css">
<!--
img.bg2 {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
-->
</style>
<img src="index_htm_files/iframeback.png" class="bg2">
------------------------------
...nicht in die Hauptseite "marc pircher.htm" sondern, wie beschrieben, in die per iframe eingebundenen Seiten "willisau_1.htm"- und "willisau_2.htm".
Die von Dir gewählte, unorthodoxe Methode, in einer Seite 2 unterschiedliche Hintergründe ("hintergrund.jpg" und "iframeback.png") einzubinden, dürfte eigentlich nicht funktionieren. Dass es trotzdem geht ist mir nicht so wirklich klar geworden...
[...] war jetzt zufall das ich bg2 hatte! [...]
Keineswegs. Die Klasse "bg2" hatte ich für den iframe Hintergrund erstellt, weil Du bereits die Klasse "bg" für den Hintergrund der Hauptseiten verwendet hast.
[...] Was ist das genau [...]
Hier findest Du eine detaillierte Erklärung zum Thema "HTML Klassen"
[...] Gibt es eine möglichkeit, dass mann auch mit einem Smartphone Scrollen kann [...]
Ja, das ist möglich. Allerdings sind iframes dabei eher hinderlich
Dass es dennoch möglich ist, habe ich in einem anderen Zusammenhang hier schon einmal beschrieben. Vielleicht hilft es Dir bei Deinem Projekt...
Also, nur weiter so und viel Erfolg
Hallo BeRo,
ich hatte den Code eingefügt wie Du es mir gesagt hat, aber dann hat es mir oben Links immer ein Xgegeben, deshalb habe ich es mal so versucht!Funktioniert!!
Ich danke Dir nochmals Herzlich!!