Hallo BeRo,

danke für deine Antwort! Ich habe mir mal dein Script herunter geladen und damit experimentiert. Den HTML Platzhalter kann ich über die Ebenen Galerie in den Arbeitsbereich Hintergrund setzen, kein Problem, funktioniert auch soweit. Allerdings verschwindet die NavBar bei verkleinern der Seitenbreite und scrollt nicht fix am Seitenrand mit der Browserfenstergröße mit, wie auf der im Startpost verlinkten Seite oder zb. hier im Forum bei der Socialmedia NavBar am rechten Seitenrand.

Ich denke einmal der CSS Position Befehl der auf fixed gesetzt wurde könnte event. dafür verantwortlich sein. Vieleicht hast du da doch noch eine Idee wie man so einen dynamischen NavBar Effekt zaubern könnte?

Anderes Problem: Ich habe mal laienhaft diesen Effekt (bei überfahren eines Icon erscheint der dazugehörige Text zu dem Icon neben der Menübar) ausprobiert und dabei ein Problem, entweder mit der Gruppierung oder den Ebenen.

Schau dir mal bitte dieses einfache Beispiel an -> *klick*

Das Problem ist folgendes wie du sicherlich auch erkannt hast: Bei den ersten Icon läuft noch alles ganz normal, daß 2te Icon dahinter ist genauso über die MausOver Ebene gruppiert und als Weiche Gruppe gesetzt und verlinkt  wie bei den ersten Icon. Allerdings siehst du ja selbst, das bei den 2ten Icon gleichzeitig das erste Icon mit reagiert was es nicht sollte. Ich denke einmal, daß liegt daran das sich die Gruppierungen beim Text (der ja an gleicher Position zum jeweiligen Icon erscheinen soll) überschneiden und dadurch die ganze Gruppe mit aktiv gesetzt wird.

Ich knobel hier schon die ganze Zeit wie man dieses Gruppierungs- bzw. Ebenen Problem lösen könnte aber finde einfach keine Lösung dazu. Vieleicht hast du da eine Idee?

Hier die Projektdatei dazu, kannst sie dir ja mal anschauen. Insbesondere die Gruppierungen und die MouseOver Ebene -> Projektdatei

[...] Allerdings verschwindet die NavBar bei verkleinern der Seitenbreite und scrollt nicht fix am Seitenrand mit [...]

Du hast nicht gesagt, mit welchem Script Du experimentiert hast. Da verschiedene Versionen in den einzelnen Threads besprochen wurden, solltest Du Dir unbedingt die aktuelle online Demo ansehen. Da kannst Du leicht feststellen, dass die fixierte NavBar in jedem Fall am linken Bildschirmrand sichtbar (und fixiert) bleibt, egal was Du mit dem Browserfenster anstellst...

Lade Dir hier mal die zugehörige Projektdatei herunter. Im Platzhalter für die fixierte NavBar steht der u. a. CSS/HTML Code:

------------------------
<style type="text/css">
#f1 {position: fixed;}  /* werden hier keine weiteren Parameter zur Position angegeben, gilt die linke, obere Ecke des Platzhalters als Bezugspunkt */
</style>

<div id="f1">
<iframe width= "50" height="346" allowtransparency="true" scrolling="no" frameborder="0" src="fixmenu1.htm" style="display: block;" align="left">
</iframe>
</div>
-------------------------

Im Code gelb markiert siehst du die mögliche Auflösung für Dein Problem, dass die NavBar nach links verschwindet, wenn das Browserfenster schmaler eingestellt wird.
Wenn Du den Platzhalter links außerhalb des Seitenbereichs positionierst, wird die NavBar allerdings unsichtbar, wenn das Browserfenster schmaler wird als die Seitenbreite es verlangt. Das liegt daran, dass der linke Rand der Seite vom Browser als Bezug benutzt wird. Objekte die sich links davon befinden, verschwinden im Niemandsland, wenn das Browserfenster schmaler wird.

Möchtest Du die NavBar in der Normalanzeige unbedingt links außerhalb des normalen Seitenbereichs sehen, musst Du einen Kompromiss eingehen, und die Position z. B. auf 15% vom linken Fensterrand fixieren.
Die Vorgabe wird vom Browser auch dann eingehalten, wenn das Fenster schmaler wird als die Seitenbreite es eigentlich erfordert.
Die NavBar wird in dem Fall einfach im Seiteninhalt angezeigt. Zum Beispiel so:

Wenn Du damit leben kannst,  ändere den CSS Code so ab, wie unten gelb markiert...

---------------------
<style type="text/css">
#f1 {position: fixed;  left: 15%}
</style>
----------------------

[...] Anderes Problem:
[...] Schau dir mal bitte dieses einfache Beispiel an [...]

Habe ich gemacht...

[...] Ich knobel hier schon die ganze Zeit wie man dieses Gruppierungs- bzw. Ebenen Problem lösen könnte [...]

Wie Du schon ganz richtig vermutet hast, liegt die Ursache in der Gruppierung der deckungsgleichen, zeilenbreiten Objekte.

Das Problem lässt sich einfach lösen, wenn Du die Objekte separierst und sie getrennt behandelst.
Konkret heißt das in Deinem Fall, dass die Infotexte die bei einem MouseOver sichtbar werden sollen, in eine jeweils separate Ebene gehören.
Dem auslösenden Objekt (z. B. Zahnradsymbol) verpasst Du dann zusätzlich zum Link noch eine MouseOver Funktion, die die popup Ebene öffnet, in der Du zuvor den Infotext abgelegt hast.

Das kann so aussehen:

Die komplette Konstruktion für die beiden ersten Link Objekte präsentiert sich dann so:

Jetzt sollte nichts mehr schief gehen können, es sei denn, Du bist ein Murphy Anhänger...

Viel Erfolg

Murphys Law ist meine Bibel - aber nicht in diesen Fall! 

BeRo, deine Antworten sind mir die liebsten, denn du hast wieder einmal zu 1000% die RICHTIGE Lösung parat gehabt. Die Textblöcke in verschiedene PopUp Ebenen zu packen und mit einen 2ten MouseOver zu versehen war mal wieder punktgenau richtig und funktioniert EINWANDFREI!! 

Nebenbei ist mir dabei dann auch noch aufgefallen (da habe ich bisher beim WD10 gar kein Augenmerk drauf gelegt - Asche auf mein Haupt), daß man ja da genialerweise über diese via MouseOver Funktion des WD10 den jeweilig angesprochenen Elemten der PopUp Ebene noch einen fantastischen Scroll- bzw. Einblendeffekt verleihen kann.

Nicht schlecht Herr Specht, der WD10 kann ja sehr viel - man muß nur in die Details gehen.

Was die Sache mit der NavBar betrifft: Du hast logischerweise natürlich recht, spätestens wenn die Seitenbreiten bei kleineren Anzeigegeräten  (Tablet) eine Seitenrandanzeige schon fast unmöglich macht bringt das nix. Ich lasse das daher auch und platziere das Menü lieber konventionell im Seitenarbeitsbereich und nicht im HG. iFrames sind eh nicht so das optimale bzgl. eines guten SEO Ranking und das soll eine Firmen-HP auf den hart umkämpften Markt der vielen Kfz Dienstleistungsanbieter werden.

Ich danke dir jedenfalls wieder einmal für deine freundliche Hilfe und punkt genaue Lösung. Hast mir wieder sehr geholfen - DANKE!

schönen Gruß

Spieluhr

ps: Hier die (vorläufige) Menübar -> *klick*

Genau das habe ich gesucht, nur noch eine kleine Frage, bei mir soll z.B. ein Facebook Logo ganz seitlich also habe ich 1% eingegeben funktioniert super aber es soll auch ca. in der mitte vertikal angezeit werden, mit html kenn ich mich leider nicht aus!

Bitte um Hilfe

@geri167

Wenn Du den u. a. CSS Code um einen Parameter ergänzt, ist Dein Problem gelöst

So kann das aussehen, wenn du die obere Kante des fixierten Buttons um 30% der Fensterhöhe nach unten verschiebst

------------------------------
<style type="text/css">
#f1 {position: fixed; top:30%;}
</style>
-----------------------------

Welcher %-Wert für Dich der richtige ist, kannst Du sicher schnell selbst feststellen...

Viel Erfolg

Hallo Bero!

Danke aber ich hab mich sicher nicht richtig ausgedrückt, ich bräuchte ein kombi aus beidem,

1% von links und 30% von oben.

DANKE

@geri167

Na, dann ergänzt Du den Code eben noch um die fehlende Anweisung, die im Screenshot grün markiert ist..

------------------------------
<style type="text/css">
#f1 {position: fixed; top:30%; left: 1%;}
</style>
-----------------------------

Viel Erfolg

Danke du bist der Beste!

Aber gleich noch eine Frage:

Ich würde gerne ein Foto äußerlich vom Webseitenrand einfügen. Es soll genau mit dem Webseitenrand  seitlich

beginnend in richting pastbackground zeigen und ebenfalls fixiert sein.

Bitte nochmal um Hilfe

@geri167

[...] Ich würde gerne ein Foto äußerlich vom Webseitenrand einfügen [...]

Was Du dazu brauchst, hast Du schon in Deiner "Werkzeugkiste"

------------------------
<style type="text/css">
#f1 {position: fixed;}  /* werden hier keine weiteren Parameter zur Position angegeben, gilt die linke, obere Ecke des Platzhalters als Bezugspunkt */
</style>

<div id="f1">
<iframe width= "150px" height="110px" allowtransparency="true" scrolling="no" frameborder="0" src="Bild.jpg" style="display: block;" align="left">
</iframe>
</div>
-------------------------

Du musst nur für die oben gelb markierte Quelle (src) angeben, wo das Bild zu finden ist und wie es heißt. Hier haben wir das der Einfachheit halber "Bild.jpg" genannt. Dann musst Du die Größe des Bilds angeben (oben grün markiert) und die ID ggf. ändern (oben blau markiert).

Wenn Du dann noch einen Platzhalter da anlegst, wo Du später das fixierte Bild sehen willst und dem HTML Body des Platzhalters den o. a. Code verpasst, steht Deinem nächsten Erfolgserlebnis nichts mehr im Weg

Und hier das Ergebnis:

Viel Erfolg und noch ein paar schöne Ostertage

Danke kann mich nur wiederholen du bist der beste:

Hab aber gleich noch was: 

Der Facebook button unten will mir einfach nicht gelingen dieser soll auch 

mit 1% Abstand vom Bildschirmrand fixiert werden.

Bitte nochmal dann bin ich aber bald fertig.

DANKE

@geri167

[...] Der Facebook button [...]  soll auch mit 1% Abstand vom Bildschirmrand fixiert werden.[...]

Ohne das jetzt genauer untersucht zu haben, denke ich, dass es einfach möglich sein sollte, wenn Du den Like Button so platzierst, wie Du es schon mit der NavBar gemacht hast.

Dazu legst Du den Like Button auf einer neuen, ansonsten völlig leeren Seite an, die Du so groß machst, dass der Button gerade darauf passt. Anschließend platzierst Du die Seite mit dem Dir bekannten Verfahren (und dem Code) da, wo Du den Button sehen möchtest.

Probier's mal.

Danke BeRo!

Bekomme ich trotzdem nicht hin. Der Button ist in dem Fall kein Button sondern nur der Code von Facebook,

(klar ist es dann auch wieder ein Button aber so ein echtzeit Button mir den sichbaren Likes). Siehe mein Bildausschnitt. 

Müsste eigentlich eine neuen Seite erstellen der nur aus einem Platzhalter besteht. 

Und diesen Platzhalter müsste ich wieder mit einem Platzhalter auf der richtigen Seite einbauen.

Ist mir leider etwas zu hoch!

LG

@geri167

[...] Müsste eigentlich eine neuen Seite erstellen der nur aus einem Platzhalter besteht. Und diesen Platzhalter müsste ich wieder mit einem Platzhalter auf der richtigen Seite einbauen. [...]

Genauso müsstest Du vorgehen.

• Erstell' in Deinem Projekt also zuerst eine zusätzliche-, vollkommen leere Seite, in der Größe von z. B. 75 x 20px, mit einem beliebigen Namen. Für unser Beispiel habe ich die Seite "fb_button" genannt.
• In den HTML Body der Seite kopierst Du die u. a. Codezeilen, die Du natürlich vorher mit den Daten für Deine Seite generiert hast.
  -----------------------
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.3";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  ----------------------
  
   
• Dann legst Du auf der Seite einen Platzhalter (seitenfüllend) an und kopierst in seinen HTML Body die u. a. Codezeilen:
  ---------------------------
  <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
  --------------------------
  
   
• Auf der Seite (das können auch mehrere sein), die den Like Button zeigen soll, legst Du einen Platzhalter an, in dessen HTML Body Du die u. a. Codezeilen kopierst, die Dir ja schon bakannt sind...
  ----------------------------
  <style type="text/css">
  #f1 {position: fixed; left:1%;}  /* werden hier keine weiteren Parameter zur Position angegeben, gilt die linke, obere Ecke des Platzhalters als Bezugspunkt */
  </style>

  <div id="f1">
  <iframe width= "80px" height="20px" allowtransparency="true" scrolling="no" frameborder="0" src="fb_button.htm" style="display: block;" align="left">
  </iframe>
  </div>
  ----------------------------
  Wenn Du mehrere Objekte auf diese Art fixierst, musst Du für jedes Objekt eine einmalige ID vergeben (oben gelb markiert), sonst gibt's Probleme

• Wenn Du alles richtig gemacht hast, kann das Ergebnis so aussehen:
  
  

Viel Erfolg