Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Fremde Navigation
#16
Es geht hier erst mal nur um die Navi oben auf der Startseite.

(11.02.2018, 23:25)AndyNeu schrieb: Den Code vollständig in den leeren Block!

Hatte ich doch so anfangs gemacht, funktionierte auch, doch Tommy schrieb an anderer Stelle, dass ich das in den head schreiben müsste. Geht aber nicht, wenn ich direkt in den Code-Block schreibe.

Was denn jetzt? Es funktioniert so auch, aber das 2-malige kann ja wohl nicht richtig sein. Und ich habe das nicht 2x eingetragen, das hat Mobirise gemacht.

Bitte lest doch auch mal, was ich in #14 geschrieben habe
Wenn Dein Pferd tot ist, steig ab.

Neue Seite: NOF 2015
NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox 56.0.1,6234 Java 7 32bit, IE11, Chrome, GIMP 2.8.4; Mobirise 3.12.1 + 4.8.1, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#17
Moin Ellen,

ich weiß immer noch nicht wirklich was Du meinst :confused:

Daher habe ich jetzt schnell mal Deine Navi hier eingebaut und alles ist doch ganz genau wie es sein soll:

http://www.mobirise-tutorials.com/Testseiten/Ellen/

(Seite wird eventuell wieder gelöscht)

Da ist auch nichts doppelt, solange Du es nicht doppelt einbaust (wie auf Deiner Seite) Smiling

... gucke auch in meinen Quelltext.

Hier Deine CSS. Die gehört in den <head> der Seite oder - etwas eleganter - in eine eigene CSS-Datei (ich habe noch ein "z-index: 10000;" hinzugefügt):

Code:
 <style>

   ul.topnav {
       list-style-type: none;
       z-index: 10000;
       margin: 0;
       padding: 0;
       overflow: hidden;
       background-color:  rgba(235,255,255,0.6);

       width: 100%;
   }

   ul.topnav li {float: left;}

   ul.topnav li a {
       display: block;
       font-family: Rokkitt;
       font-size: 200%;
       font-weight: normal;
       color: #03577b;
       text-align: center;
       padding: 28px; 12%;
       text-decoration: none;
           
   }

   ul.topnavCamping li a:hover:not(.active) {color: #ebffff; background-color: #f98402;}


   ul.topnavUnterkunfte li a:hover:not(.active) {color: #ebffff; background-color:
    #01cc00;}

   ul.topnavRanch li a:hover:not(.active) {color: #ebffff; background-color: #fb3103;}

   ul.topnavNaturbad li a:hover:not(.active) {color: #ebffff; background-color:
    #5bd0d7;}

   ul.topnav li a.active {color: #ebffff; background-color: #03577b;}

   ul.topnavCamping {
       list-style-type: none; padding: 0;
       }

   ul.topnavUnterkunfte {
       list-style-type: none; padding: 0;
       }

   ul.topnavRanch, ul.topnavNaturbad {
       list-style-type: none;  padding: 0;
       }

   ul.Logo li a {padding: 0;}
   ul.Logo li a:hover:not(.active) {background-color: #e0fefe;}

   ul.Logo {
       float: right;
       list-style-type: none; padding: 0;
       text-align: center;
       }

   @media screen and (min-width: 791px){
       #Text64 {position: fixed; background-color: rgb(235,255,255); box-shadow: 0 0      5px 5px grey;}
       ul.topnav {position: fixed;}}

   @media screen and (max-width: 1030px){
       ul.topnav li a {font-size: 130%;}}
         
       
   @media screen and (max-width: 790px){
       #Text64 {position: absolute;}
       ul.topnav li {float: none;}
       ul.topnav li a {padding: 6px 12%; font-size: 200%;}
       ul.topnavCamping {float: none;}
       ul.topnavUnterkunfte {float: none;}
       ul.topnavRanch, ul.topnavNaturbad {float: none;}
       ul.Logo {float: none;}}

 </style>

Hier Deine Text-Navi - hier im Block "Code-Editor" (wie bei Dir), das kann natürlich auch in jeden anderen Block:

Code:
   <!-- Beginn Navi von Ellen -->
   <ul class="topnav">

       <li><a class="active" href="#">Home</a></li>
     
       <ul class="topnavCamping">
         <li><a href="#">Camping</a></li>
       </ul>  

       <ul class="topnavUnterkunfte">
         <li><a href="#">Unterkünfte</a></li>
       </ul>
         
       <ul class="topnavRanch">
         <li><a href="#">Ranch</a></li>
       </ul>
         
       <ul class="topnavNaturbad">
         <li><a href="#">Naturbad</a></li>
       </ul>

       <ul class="Logo">
         <li>
             <img src="http://www.clairruisseau.com/test/assets/images/Logo-transparentFarbenHomepage.png" title="Seitenübersicht">
         </li>
       </ul>
     
   </ul>
   <!-- Ende Navi von Ellen -->
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#18
Hallo Ellen
ich hatte dich so verstanden, dass du eine zweite zusätzliche Navi einbauen wolltest. Huh

Und Tommy hat natürlich recht du kannst die CSS für deine Hauptnavi sehr elegant in eine eigene CSS-Datei packen und dann im Head drauf verlinken.
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#19
:scared:
Auf der 2. Versuchsseite sehe ich das, was ich in den Code-Editor-Block einfüge nicht in der Arbeitsansicht:

.jpg  Unbenannt.JPG (Größe: 57,53 KB / Downloads: 6)


In der Vorschau auf der 2. Versuchsseite ist der Quellcode aber ok.


Aber, und ihr könnt mich jetzt steinigen, oder für ober-gaga erklären, auf der Seite, die noch online ist, sieht die Arbeitsansicht und der Code-Editor (Editor-Block) so aus:

.jpg  Unbenannt1.JPG (Größe: 163,39 KB / Downloads: 6)

Da ist nichts doppelt und der Code sieht genau so aus wie in der 2. Versuchsseite.

@Andy, nee es geht im Moment nur ums Prinzip. Die zweite Navi funktioniert genau so.
Aber ich habe das Gefühl, dass dieser Code-Editor manchmal ein paar Anläufe braucht bis es schnackelt. Das macht mich jetzt ganz verrückt, obwohl ich das gewünschte Ergebnis ja schon hatte.

Tommy, wie sieht denn Deine Arbeitsansicht aus? Und in welcher Reihenfolge bist Du vorgegangen?
Wenn Dein Pferd tot ist, steig ab.

Neue Seite: NOF 2015
NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox 56.0.1,6234 Java 7 32bit, IE11, Chrome, GIMP 2.8.4; Mobirise 3.12.1 + 4.8.1, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#20
Hallo Ellen,

Du - ist doch klar. Von Deiner CSS "weiß" doch Mobirise nichts, daher kann das dann auch auf der Arbeitsseite nicht mit der CSS angezeigt werden. Das sieht bei mir ganz genauso aus.


.jpg  Code-Editor.JPG (Größe: 232,1 KB / Downloads: 9)



Der Block "Code-Editor", den wir jetzt beide aufgezogen haben, ist ein leerer Block und dieser öffnet sich immer (noch wie der alte "Code-Editor") auf der rechten Seite der Arbeitsseite.

Der neue "Code-Editor" kommt ausschließlich in "Mobirise4" in den M4-Blöcken zum Einsatz. Du könntest also, anstelle des Blocks "Code-Editor", z.B. auch einen einfachen Textblock aufziehen und dann den Inhalt mit Deinem Inhalt (der Textnavi) ersetzen. So kannst Du dann auch den neuen "Code-Editor" (der über die gesamte Seite aufgeht) verwenden. Mit dem neuen "Code-Editor" kann man das auch direkt auf der Arbeitsseite mit der CSS im "CSS-Editor" darstellen und schon auf der Arbeitsseite korrekt anzeigen. Das Problem ist dann nur, dass man bei Deiner CSS nicht mehr an die Symbolleiste zum Editieren kommt, da diese dann von dem Block darunter überdeckt wird.

P.S.:

... ich habe übrigens inzwischen zu Deiner Navi die entsprechenden Unterseiten auch beispielhaft mal eingebaut, sodass man dann auch diese Navi aktiv nutzen kann.

http://www.mobirise-tutorials.com/Testseiten/Ellen/

Dein Logo (rechts in der Navi, was jetzt auch verlinkt ist) könnte man natürlich beliebig auch auf jeder Seite entfernen.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#21
Ganz lieben Dank an Dich Tommy, dass Du Dich mit dieser Sache noch einmal auseinander gesetzt hast.  Kussmund

Ich habe die Navi ja auf allen Seiten zum Laufen bekommen, es funktionieren auch alle Links. Auch die 2. Navi auf den Unterseiten dürfte in Ordnung sein.
Aber diese ganzen Ungereimtheiten haben mich jetzt schier zur Verzweiflung gebracht. Ich denke Mobirise hat sich durch das hin und herkopieren irgendetwas "gemerkt".

Ich hatte in früheren Versuchen (letztes Jahr mit Mobi3) den gesamten Code schon einfach in einen anderen Block gesetzt, hat auch funktioniert. Nur wollte ich das dieses Mal "sauber" aufbauen und ich konnte nun mit Deiner Hilfe noch einmal Klarheit schaffen. Es hat mich nur verwirrt, dass man einmal das Ergebnis direkt in der Arbeitsansicht sehen konnte und einmal nicht. Aber das hing wohl mit der Einbauweise des Codes zusammen.

NACHTRAG:
Auch wenn ich jetzt nerve: in der Version, wo ich den doppelten Eintrag drin habe (was noch online ist), also das, was in den head gehört, bekomme ich den falschen (doppelten) Eintrag im body nicht raus. Ich habe im Editor-Block alles gelöscht, der Block existiert nicht mehr und selbst dann ist beim publizieren der doppelte Eintrag noch drin. Mobirise muss sich das irgendwie merken. Oder es hängt damit zusammen, dass nur der Inhalt des Blocks, nicht aber der Block selbst gelöscht wurde. Öffnen und Schließen des Programms bringt auch nichts.

Vielleicht ist da auch noch ein "versteckter" Block, an den ich nicht mehr dran komm.

Ich will das hier nur berichten. Ich setze die Seite noch mal neu auf.
Wenn Dein Pferd tot ist, steig ab.

Neue Seite: NOF 2015
NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox 56.0.1,6234 Java 7 32bit, IE11, Chrome, GIMP 2.8.4; Mobirise 3.12.1 + 4.8.1, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#22
Moin Ellen,

ja - so wird es wohl sein. Du hast auch 2 Blöcke in dieser Seite, was Du an den IDs erkennen kannst:

custom-html-1 (Zeile 103)

Zitat:<div id="custom-html-1" custom-code="true" data-rv-view="7">

und

custom-html-2 (Zeile 185)

Zitat:<div id="custom-html-2" custom-code="true" data-rv-view="8">

Während der Tests mit Deiner Navi ist mir das auch insofern passiert, dass ich durch die CSS und den z-index dieser nicht mehr an die Werkzeugleiste des Blocks gekommen bin. Somit war der Block nicht mehr zu löschen oder zu editieren und ich musste die ganze Seite löschen.

In anderen Blocks wurde durch diese CSS der Block auf eine unsichtbare Höhe zusammen gezogen, die erst nach dem Publizieren wieder sichtbar wird - also nachdem die CSS wirkt. Auch so ein Block lässt sich dann nicht mehr löschen.

Das hatten wir auch schon mit der CSS-Anweisung "display: none" (nicht anzeigen), usw. ...

Mobirise selbst regelt diese Dinge mit entsprechenden CSS-Klassen an Tags wie <section> oder auch <div>, die an Deinem Code (natürlich) fehlen, da dieser nichts mit dem Bootstrap-Framework zu tun hat.

Das ist es eben das, was ich meinte. Eigene Elemente, wie so eine Navi, einzubauen ist sicherlich möglich und manchmal auch wünschenswert, allerdings können dabei Dinge passieren, die außerhalb der möglichen Kontrolle von Mobirise liegen und man selbst muss genau wissen, was man tut.

Manchmal stehen dort 5-6 CSS-Klassen an einem einzigen Tag von Mobirise und es ist sehr aufwendig zu erkennen, welche Klassen da jetzt weiter stehen bleiben müssen und welche nicht. Mit anderen Worten, bei Verwendung von externem Code muss man auch sehr genau wissen, wie Mobirise funktioniert, sonst ist das reine Glückssache ob es klappt oder nicht.

Ich lasse mal meine Testseite vorläufig am Server. Wenn Du das nicht möchtest, dann gib Bescheid, sodass ich diese dann löschen würde. Oder ich entferne dann nur das Logo von Dir, sodass ich diese Seite, als Unterstützung für weitere Probleme dieser Art, erhalte.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#23
Danke Tommy, Du kannst die Seite ruhig am Server lassen.
Vielleicht gefällt auch jemand anderem dieses bunte Spielzeug. Smiling
Wenn Dein Pferd tot ist, steig ab.

Neue Seite: NOF 2015
NOF12, NOF2015, Windows 7 Professionnel, Mozilla Firefox 56.0.1,6234 Java 7 32bit, IE11, Chrome, GIMP 2.8.4; Mobirise 3.12.1 + 4.8.1, den Code-Editor habe ich natürlich auch, aber sonst kein Schnickschnack

Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#24
... habe hier mal noch ein "Mega Menü" ausprobiert - nur damit keine Langeweile aufkommt :D

http://www.mobirise-tutorials.com/Testse...-Menu.html

... ist noch nicht fertig - muss noch an der CSS "geschraubt" werden.
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#25
Aha du jetzt also auch :D
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#26
wie jetzt - hat die schon jemand eingebaut :confused:
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#27
Toll, Tommy thumbs up
Lieben Gruß
Barbara
--------------
Lumis-Webdesign
Umwelt und Meere schonen: Plastikmüll vermeiden!
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#28
Geht doch. Muss ja nicht immer die langweilige aus Mobirise sein. thumbs up :D
Gruss Andy

Wer Rechtschreibfehler findet, darf sie behalten... oder melden
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#29
ich bin sowieso ein Fan des Mega-Menüs, weil die viel Information auf einen Blick bietet. thumbs up
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8


www.fotoatelier-essen.de
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#30
Moin Tommy,

wie immer: Technisch einwandfrei! thumbs up
Frage: Die Navi ist weiterhin oben, so wie gewohnt, oder?
Oder kann ich erst oben ein Logo, Text, Grafik etc. setzen und dadrunter dann die Navi??
Wenn das möglich ist, dann wird es interessant, zumindest für mich! Kussmund
So wie es jetzt ist...unterscheidet es sich nicht viel von den 08/15 MoviNavis
Sorry, das soll keine Kritik an deiner Arbeit sein...
Bis denne, C-laus

WIN 10/Alle Browser/AdobePhotoshop/
NOF15/Mobirise 3+4, alle Templates/Kaspersky
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
  Drehender Würfel als Navigation? stobi_de 2 206 16.03.2018, 11:05
Letzter Beitrag: stobi_de
  Mobirise Agency M4 - Logo in Navigation barbara0701 13 511 04.03.2018, 20:28
Letzter Beitrag: Rancher
  Mobirise Navigation barbara0701 10 549 21.01.2018, 13:19
Letzter Beitrag: c-laus
  Navigation mit Submenü UND Link Wolkan 5 484 09.11.2017, 14:24
Letzter Beitrag: Tommy Herrmann
  Mobirise: Fremde Navigation einbauen? stobi_de 13 818 26.07.2017, 12:40
Letzter Beitrag: AndyNeu
  MOBIRISE - Verlinkung der Navigation harfenklang 2 608 29.06.2017, 16:42
Letzter Beitrag: harfenklang
  Mobirise-Navigation "Hervorgehoben" einstellen struggle 43 2.172 27.04.2017, 12:48
Letzter Beitrag: Martin73
  Mobirise: Navigation für die mobile Ansicht ändern ! stobi_de 1 408 24.04.2017, 08:47
Letzter Beitrag: Doris Rehhausen
  Mobirise - Navigation, Rollover struggle 4 409 09.04.2017, 17:52
Letzter Beitrag: struggle
  Mobirise Navigation verlinken struggle 8 773 05.03.2017, 21:52
Letzter Beitrag: Rancher



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!