Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Inlineframe transparenter Hintergrund
#1
Hallo, ich bin seit ewiger Zeit mal wieder dabei die HP zu überarbeiten.
Ich habe NOF 2015 und habe eine externe Wow-Slider Galerie über Inlineframe eingefügt.
Da ich einen eingefärbten Hintergrund habe, sieht der weiße/hellgraue Hintergrund vom Inlinframe nicht toll aus.

Ich habe gefunden:
Dort fügt Ihr “Im Tag” (NOF 11 “innen”) noch diesen Code-Schnipsel hinzu:
allowtransparency="true"
Aber wo?

Mein HTML-Text sieht so aus:

<iframe id="Inlineframe3" name="Inlineframe3" ………….." frameborder="1" width="858" height="560" marginwidth="640" marginheight="480"
>
</iframe>


Ich habe es schon an mehreren Stellen probiert, bekomme es aber nicht hin.

Wer hat etwas Mitleid und hilft mir wieder auf die Sprünge mit NOF?
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Moin,

na einfach zu den anderen Parametern hinzufügen, egal wo.

Code:
<iframe id="Inlineframe3" name="Inlineframe3" src="http://www.zielseite.de/" frameborder="1" width="858" height="560" marginwidth="640" marginheight="480" allowtransparency="true"></iframe>

http://www.tagindex.net/html/frame/i_all...rency.html

Ich weiß gar nicht genau, ob das überhaupt noch funktioniert - könntest auch das mal probieren und zur CSS hinzufügen.

Code:
iframe {
   background-color: transparent;
}
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Photo 
Dankeschön, aber irgendwie funktioniert es nicht.
Hier habe ich es nun eingefügt:

<body style="background-color: transparent;">
<iframe id="Inlineframe3" name="Galerie-Calico" src="http://www.kooiker-grammeaue.de/WOW-Slider/1-Calico_Feb-2019/Calico-index.html" frameborder="0" width="770" height="530" marginwidth="0" marginheight="0" scrolling="no" style="background-repeat: no-repeat;"
allowtransparency="true"
>
</iframe>

Das Ergebnis sieht so aus:


.png  Galerie.PNG (Größe: 976,42 KB / Downloads: 8)


Am Layout muss ich noch arbeiten. Aber das die Galerie immer noch hinterlegt ist ja das Problem.
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
Moin,

mir ist nicht ganz klar was wo transparent sein soll.

Der WOW-Slider ja wohl nicht?!

Die WOW-Slider-Seite ist mit dieser Hintergrundfarbe hinterlegt:

#f0f0f0

Zitat:<body style="background-color:#f0f0f0;margin:auto">

Wenn irgendein Body transparent dargestellt werden soll, dann doch der der WOW-Slider-Seite und nicht der von der aufrufenden Seiten, also dann so:

Zitat:<body style="background-color:transparent;margin:auto">

Wenn Du den Hintergrund vom WOW-Slider, wie gerade beschrieben, transparent setzt, dann sieht es so aus:


.jpg  Background-Transparent_WOW-Slider.JPG (Größe: 219,1 KB / Downloads: 4)



... und warum baust Du den WOW-Slider nicht direkt auf Deiner Seite ein, anstatt auf diesen mit eine Iframe zu verlinken?

http://www.tommyherrmanndesign.com/nof/W...orial.html
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Einbau Deines WOW-Sliders direkt in Deine NOF-Seite:

... gucke Dir auch mein Tutorial dazu an:

http://www.tommyherrmanndesign.com/nof/W...orial.html


Kopiere zunächst die beiden Verzeichnisse vom WOW-Slider:

data1
engine1


in das gleiche Verzeichnis auf Deinem Server in dem die Seite liegt, auf dem die Galerie angezeigt werden soll. Also in das Verzeichnis der Seite, auf der Du jetzt den Iframe eingebaut hast. Dies ist bei Dir das Verzeichnis:

Calico

Kopiere diese beiden Verzeichnisse dann auch in das gleiche Verzeichnis ("Calico") der lokalen Publizierung auf dem PC, sodass Du den WOW-Slider auch schon nach einer lokalen Publizierung sehen kannst.


Kopiere dann den "Head" Bereich des WOW-Slider-Quelltextes in Deine NOF-Seite:

"Zwischen Head Tags"

> Layout markieren > Fenster “Layout Eigenschaften” > “Zwischen Head Tags” einfügen

Du kannst Deine Codes auch von dieser Seite hier kopieren.

Code:
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->


... und kopiere diesen "Body" Bereich des WOW-Sliders Quelltextes in den "HTML-Code Editor" eines leeren Textfeldes auf der NOF-Seite. Ziehe dieses Textfeld auf die volle Layoutbreite auf (dort wo Du jetzt den Iframe aufgezogen hast):

Code:
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/calico_linda_3_monate.jpg" alt="Baby Calico mit Linda" title="Baby Calico mit Linda" id="wows1_0"/></li>
</ul></div>
<div class="ws_thumbs">
   <div>
<a href="data1/images/calico_linda_3_monate.jpg" title="Baby Calico mit Linda"><img src="data1/tooltips/calico_linda_3_monate.jpg" alt="" /></a>
<a href="data1/images/calico_3_monate.jpg" title="Calico 3 Monate"><img src="data1/tooltips/calico_3_monate.jpg" alt="" /></a>
<a href="data1/images/calico_ginger_3_monate_juli2016.jpg" title="Baby Calico 3 Monate"><img src="data1/tooltips/calico_ginger_3_monate_juli2016.jpg" alt="" /></a>
<a href="data1/images/calico_welpenstunde.jpg" title="Calico in der Welpenstunde"><img src="data1/tooltips/calico_welpenstunde.jpg" alt="" /></a>
<a href="data1/images/calico_4_monate.jpg" title="Calico 4 Monate"><img src="data1/tooltips/calico_4_monate.jpg" alt="" /></a>
<a href="data1/images/calico_4i5_monate1.jpg" title="Calico 4,5 Monate"><img src="data1/tooltips/calico_4i5_monate1.jpg" alt="" /></a>
<a href="data1/images/calico_4i5_monate.jpg" title="Calico 4,5 Monate"><img src="data1/tooltips/calico_4i5_monate.jpg" alt="" /></a>
<a href="data1/images/calico_6_monate.jpg" title="Calico 6 Monate"><img src="data1/tooltips/calico_6_monate.jpg" alt="" /></a>
<a href="data1/images/calico_ginger_august2017.jpg" title="Calico mit Mama Ginger (August 2017)"><img src="data1/tooltips/calico_ginger_august2017.jpg" alt="" /></a>
<a href="data1/images/calico_hatty.jpg" title="Calico mit Hatty"><img src="data1/tooltips/calico_hatty.jpg" alt="" /></a>
<a href="data1/images/calico_ginger_juli2018.jpg" title="Calico mit Mama Ginger (Juli 2018)"><img src="data1/tooltips/calico_ginger_juli2018.jpg" alt="" /></a>
<a href="data1/images/calico_finley_august2017.jpg" title="Calico mit Bruder Finley (Augus 2017)"><img src="data1/tooltips/calico_finley_august2017.jpg" alt="" /></a>
<a href="data1/images/calico_ginger.jpg" title="Calico und Ginger"><img src="data1/tooltips/calico_ginger.jpg" alt="" /></a>
<a href="data1/images/calico_portrat1.jpg" title="schöne Calico"><img src="data1/tooltips/calico_portrat1.jpg" alt="" /></a>
<a href="data1/images/calico_portrat.jpg" title="Calico Porträt"><img src="data1/tooltips/calico_portrat.jpg" alt="" /></a>
<a href="data1/images/calico_winter201718.jpg" title="Calico Winterstar"><img src="data1/tooltips/calico_winter201718.jpg" alt="" /></a>
<a href="data1/images/calico_januar2019.jpg" title="Calico in Bremen (Januar 2019)"><img src="data1/tooltips/calico_januar2019.jpg" alt="" /></a>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.net">jquery carousel slider</a> by WOWSlider.com v8.8</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->

... und fertig. Viel einfacher geht nicht Smiling
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Vielen Dank Tommy Herrmann,
ich habe zwar gekämpft, wo ich was einfügen sollte, aber hat man es erst einmal geschafft, ist es auch verständlich. thumbs up

Vielleicht hast du noch einen kleinen Tipp für mich, wenn ich Bilder zur Galerie hinzufügen möchte.
Im WOW-Slider ist klar, wie das geht. Muss ich die Verzeichnisse ersetzen und den "Body"-Bereich neu einfügen oder gibt es da noch einen anderen Weg?
Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Moin,

nein - das ist dann natürlich via Iframe einfacher - da musst Du nichts neu einbauen.

So oft wirst Du ja die Bilder nicht ändern und solange Du das Design nicht änderst brauchst Du ja nur den Teil im Body mit den Bildern ersetzen. Das geht leider nicht anders.

Ich würde dann aus der vom WOW-Slider generierten Seite eben einfach diesen gesamten Teil mit den Bildern kopieren. Natürlich musst Du auch das Verzeichnis "data1" (mit den neuen Bildern) dann neu auf den Server übertragen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Hintergrundgrafik auf gesamten Hintergrund verteilen Yvonne K. 1 509 13.12.2017, 15:24
Letzter Beitrag: Yvonne K.
  Inlineframe s_ollis 6 1.099 17.05.2017, 12:55
Letzter Beitrag: Kurt Singer
  Rahmen als Hintergrund cabdriver0815 16 3.353 28.10.2016, 11:01
Letzter Beitrag: coco
  NOF 12 Hintergrund Fixieren und welchseln Cordi 7 1.697 22.01.2016, 01:18
Letzter Beitrag: Cordi
  Flash mit transparentem Hintergrund? stobi_de 9 1.873 31.10.2015, 20:00
Letzter Beitrag: stobi_de
  hintergrund und Vordergrund fixieren LorenzLechner 1 1.133 27.10.2015, 16:40
Letzter Beitrag: Tommy Herrmann
  Hintergrund verändern?! Littleshia 17 4.536 16.10.2015, 16:42
Letzter Beitrag: Doris Rehhausen
  Hintergrund und Banner Synchronisieren reddi 11 1.756 08.09.2015, 20:47
Letzter Beitrag: reddi
  Parallax-Hintergrund Mobile brandt 4 1.533 12.08.2015, 14:44
Letzter Beitrag: AndyNeu
  Hintergrund einfrieren raohl 2 1.339 20.07.2015, 10:48
Letzter Beitrag: Pittiplatsch



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!