Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Autor Thema: Hintergrundbild mit CSS skalieren - iPad tauglich  (Gelesen 3198 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Hintergrundbild mit CSS skalieren - iPad tauglich
« am: 15. März 2013, 12:02:55 »
Hier zuerstmal ein Beispielprojekt, erstellt mit NetObjects Fusion9.
Schiebt das Browserfenster ruhig mal ein wenig zusammen, hin und her... ihr werdet sehen, das Bild passt sich der Fenstergröße an.
Darüber hinnaus haben wir mit dieser Lösung auch eine funktionierende Lösung fürs iPad gefunden. Mia, ihr iPad  und ich haben es umfangreich getestet. Die Suche war mühsam aber schlussendlich erfolgreich.  (clap)

Das Ganze funktioniert ausschließlich mit CSS, es braucht keine Scripts oder ähnliches.

Die Umsetzung ist auch recht einfach. Wir benötigen ein wenig CSS um die Skalierung unseres Hintergrundbildes zu ermöglichen und noch ein wenig CSS für unsere Inhalte, damit diese nicht vom Hintergrundbild verschluckt werden und hübsch im Vordergrund bleiben.

« Letzte Änderung: 10. Mai 2014, 14:36:43 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #1 am: 17. März 2013, 12:49:01 »
Wenn ihr euch durch die drei Seiten des Beispiel-Projekts klickt, werdet ihr sehen, dass jede Seite ein wenig anders aussieht.
Auf der Startseite wurde die Skalierung des Hintergrunds durchgeführt und die Inhalte wurden auf dem Hintergrundbild platziert und zentriert.
Bei diesem Beispiel steht es euch frei, euren Inhalten in NOF von Hand einen Hintergrund zuzuweisen.

Auf der ersten Unterseite (Beispiel1) wurde ebenfalls die Skalierung des Hintergrunds durchgeführt und die Seiteninhalte sind (zentral) mit einem weißen BG hinterlegt. Er ist undurchsichtig und wird von einem dezenten Schatten umrandet.

Auch in Beispiel2 wurde die Skalierung des Hintergrunds durchgeführ. Der Hintergrund der Inhalte wurde auch hier zentral festgelegt, aber im Gegensatz zu Beispiel 1 ist er leicht transparent, so dass das skalierte Hintergrundbild leicht durchscheinen kann.
« Letzte Änderung: 02. April 2013, 12:30:13 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #2 am: 02. April 2013, 12:27:00 »
Allgemeine Erklärung für alle 3 Beispiele zutreffend
--------------------------------------------------------------------------------------------------------
Da ihr vermutlich den BG für euer gesamtes Projekt nutzen wollt, legt ihr euch als erstes für eure Startseite einen eigenen Masterrahmen an.

Entscheidet euch nun für eins der drei Beispiel und kopiert euch aus dem nächsten Post den CSS-Code für das Beispiel eurer Wahl.
Fügt diesen Code im Anschluss in den Windows-Editor ein und speichert die Datei unter dem Namen "background.css" ab.

« Letzte Änderung: 02. April 2013, 14:11:54 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #3 am: 02. April 2013, 13:22:39 »
CSS-Code für das Beispiel Startseite:
(skaliertes bildschirmfüllendes Hintergrundbild + zentrierte Seiteninhalte)
-------------------------------------------------------------------------------------------------------
Code: HTML5
  1. img.bg {
  2.   /* Set rules to fill background */
  3.   min-height: 100%;
  4.   min-width: 1024px;
  5.        
  6.   /* Set up proportionate scaling */
  7.   width: 100%;
  8.   height: auto;
  9.        
  10.   /* Set up positioning */
  11.   position: fixed;
  12.   top: 0;
  13.   left: 0;
  14. }
  15.  
  16. @media screen and (max-width: 1024px) { /* Specific to this particular image */
  17.   img.bg {
  18.     left: 50%;
  19.     margin-left: -512px;   /* 50% */
  20.   }
  21. }
  22.  
  23. #page-wrap {
  24.   position: relative;
  25.   width:950px;
  26.   margin: 50px auto;
  27. }


CSS-Code für das Beispiel1:
(skaliertes bildschirmfüllendes Hintergrundbild + zentrierte Seiteninhalte mit weißem BG und Schatten)
-------------------------------------------------------------------------------------------------------
Code: HTML5
  1. img.bg {
  2.   /* Set rules to fill background */
  3.   min-height: 100%;
  4.   min-width: 1024px;
  5.        
  6.   /* Set up proportionate scaling */
  7.   width: 100%;
  8.   height: auto;
  9.        
  10.   /* Set up positioning */
  11.   position: fixed;
  12.   top: 0;
  13.   left: 0;
  14. }
  15.  
  16. @media screen and (max-width: 1024px) { /* Specific to this particular image */
  17.   img.bg {
  18.     left: 50%;
  19.     margin-left: -512px;   /* 50% */
  20.   }
  21. }
  22.  
  23. #page-wrap {
  24.   position: relative;
  25.   width:950px;
  26.   padding: 20px;
  27.   margin: 50px auto;
  28.   background: white;
  29.   -o-box-shadow: 0 0 20px black;
  30.   -moz-box-shadow: 0 0 20px black;
  31.   -webkit-box-shadow: 0 0 20px black;
  32.   box-shadow: 0 0 20px black;
  33. }


CSS-Code für das Beispiel2:
(skaliertes bildschirmfüllendes Hintergrundbild + zentrierte Seiteninhalte mit teiltransparentem BG und Schatten)
-------------------------------------------------------------------------------------------------------
Code: HTML5
  1. img.bg {
  2.   /* Set rules to fill background */
  3.   min-height: 100%;
  4.   min-width: 1024px;
  5.        
  6.   /* Set up proportionate scaling */
  7.   width: 100%;
  8.   height: auto;
  9.        
  10.   /* Set up positioning */
  11.   position: fixed;
  12.   top: 0;
  13.   left: 0;
  14. }
  15.  
  16. @media screen and (max-width: 1024px) { /* Specific to this particular image */
  17.   img.bg {
  18.     left: 50%;
  19.     margin-left: -512px;   /* 50% */
  20.   }
  21. }
  22.  
  23. #page-wrap {
  24.   position: relative;
  25.   width:950px;
  26.   padding: 20px;
  27.   margin: 50px auto;
  28.   background: rgba(255,255,255,0.5);
  29.   -o-box-shadow: 0 0 20px black;
  30.   -moz-box-shadow: 0 0 20px black;
  31.   -webkit-box-shadow: 0 0 20px black;
  32.   box-shadow: 0 0 20px black;
  33. }
« Letzte Änderung: 02. April 2013, 13:27:13 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #4 am: 02. April 2013, 13:38:45 »
Allgemeine Erklärung für alle 3 Beispiele zutreffend
--------------------------------------------------------------------------------------------------------
In dieser Datei werden alle CSS-Formatierungen zusammengefasst, die später für die Skalierung des Hintergrundbildes und die Layouthintergründe verantwortlich sind.

Bindet diese Style-Datei als neues Asset in euer Projekt ein. Wie man zusätzliche Assets, in diesem Fall eine CSS-Datei, in NetObjects Fusion einbinden kann könnt ihr hier nachlesen. Bei dieser Gelegenheit bindet auch gleich das zu skalierende Hintergrundbild als Asset in euer Projekt ein.

Im Anschluss wechselt ihr in die Publizieren-Ansicht und sucht dort nach der neu eingebundenen Datei. In meinem Fall habe ich die Datei im Asset-Ordner gefunden.
Wenn ihr die Datei gefunden habt, schneidet ihr diese aus und fügt sie in den html-Ordner ein. Danach könnt ihr in die Arbeitsansicht wechseln.

Kontrolliert auch kurz, ob das Bild im Assetordner liegt und fügt es - falls nicht - von Hand dort ein, ich gehe aber davon aus, dass dies nicht nötig ist.




Als nächstes müsst ihr nun die Verlinkung zu der eingebundenen Style-Datei zwischen den Head-Tags eurer Seite eintragen.

Code für die Startseite:


Code: HTML5
  1. <link rel="stylesheet" type="text/css" href="./html/background.css">


Code für alle Unterseiten bei Publizierung nach Assettyp:

Code: HTML5
  1. <link rel="stylesheet" type="text/css" href="../html/background.css">
« Letzte Änderung: 02. April 2013, 14:15:10 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #5 am: 02. April 2013, 14:01:40 »
Allgemeine Erklärung für alle 3 Beispiele zutreffend
--------------------------------------------------------------------------------------------------------

Nun sind noch zwei weitere kleine Einfügungen im Seiten-html nötig. Die Angaben in der eingebundenen CSS-Datei beziehen sich auf div-Container, welche wir nun mit dieser Einfügung in unsere Seite einfügen.

Kopiert dazu den folgenden Code in das Seiten-html eurer Seite und zwar an den Beginn des Haupttextes. Dazu ruft ihr vorzugsweise die Masterrahmen-Eigenschaften auf (F10) und klickt dann auf der Eigenschaftenpalette den html-Button. Im sich öffnenden Fenster sucht ihr die entsprechende Stelle für die Einfügung und fügt den Code dort ein.Editiert hier bitte im angegebnen Pfad den Namen eures Hintergrundbildes.

Code für die Startseite:

Code: HTML5
  1. <img src="./assets/images/bg.jpg" class="bg">
  2. <div id="page-wrap">


Code für alle Unterseiten bei Publizierung nach Assettyp:

Code: HTML5
  1. <img src="../assets/images/bg.jpg" class="bg">
  2. <div id="page-wrap">


Abschließend erfolgt noch eine kleine Einfügung am Ende des Haupttextes. Der Code für diese Einfügung ist für alle Seiten identisch:

Code: HTML5
  1. </div>


Ich wünsche Euch viel Erfolg und Spaß bei der Umsetzung!  :)

« Letzte Änderung: 20. Februar 2014, 20:32:37 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)