Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Aufgrund der anstehenden gesetzlichen Änderungen in Sachen Datenschutz habe ich am 03.05.2018 eine umfassende Bereinigung unserer Datenbanken vorgenommen.

Bei dieser Bereinigung habe ich alle personenbezogenen und privaten Daten unserer Mitglieder aus den Mitglieder- , Beitrags- und Nachrichtendatenbanken gelöscht.

Konkret von der Löschung betroffen waren hierbei im Wesentlichen folgende Daten:

persönliche Avatare
E-Mail-Adressen
Angaben zum Wohnort
Angaben zum Geschlecht
Angaben zu Alter und Geburtstag
IP-Adressen
Websites und Websitetitel
Signaturen
Angaben zu diversen Messengern
Passwörter
Sicherheitsfragen und -antworten
Angaben zur verwendeten Programmversion
Angaben zum verwendeten Betriebssystem
sämtlicher persönlicher Schriftverkehr in Form privater Nachrichten

Beste Grüße nettesekel

* Friendship

DER Katzenblog – mit tollen Tipps und Ideen für deine Katze(n) <3

Die letzten Beiträge

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

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
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 »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
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 »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
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 »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
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 »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
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 »

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
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 »

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion