Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Wichtige Mitglieder-Information

Da immer noch Mails verwunderter "Mitglieder" bei mir ankommen, weil Login und Registrierung nicht funktionieren... das Forum ist seit geraumer Zeit geschlossen und steht ausschließlich als Nachschlagewerk zur Verfügung. Einerseits bin ich froh, diesen Schritt gewagt zu haben... auf der anderen Seite... wenn ich hier manchmal so lese... es war doch "'ne geile Zeit" mit euch! Macht's gut!

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 3927 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline stargate22

  • Neuling
  • *
  • Beiträge: 22
Hintergrundbild mit CSS skalieren - iPad tauglich
« am: 30. Dezember 2013, 12:21:42 »
Hallo,
da mir die Anleitung mit dem skalierbaren Hintergrundbild so gut gefallen hat, habe ich es auch mal versucht nachzubauen - leider nur mit einem Teilerfolg (siehe Bild).

Wie kann ich denn das Layout so anpassen, dass es nicht aus dem Rahmen fällt?

 :-?

Im letzen Jahr habe ich eine Seite nach der Anleitung der NOF-Akademie (Ein eigenes Design mit NOF) gebaut - kann ich die skalierbare Seite hier ohne Probleme einbauen?

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #1 am: 30. Dezember 2013, 12:57:46 »
Die Ursache für diese Verschiebung liegt in dieser CSS-Klasse:

Code: HTML5
  1. #page-wrap {
  2.   position: relative;
  3.   width:950px;
  4.   padding: 20px;
  5.   margin: 50px auto;
  6.   background: white;
  7.   -o-box-shadow: 0 0 20px black;
  8.   -moz-box-shadow: 0 0 20px black;
  9.   -webkit-box-shadow: 0 0 20px black;
  10.   box-shadow: 0 0 20px black;
  11. }

Hier müsstest du die 20px auf 0 setzen und dafür zur Breite 40px dazu rechnen...

Code: HTML5
  1. #page-wrap {
  2.   position: relative;
  3.   width:990px;
  4.   padding: 0px;
  5.   margin: 50px auto;
  6.   background: white;
  7.   -o-box-shadow: 0 0 20px black;
  8.   -moz-box-shadow: 0 0 20px black;
  9.   -webkit-box-shadow: 0 0 20px black;
  10.   box-shadow: 0 0 20px black;
  11. }

Wenn du allerdings deine eigenen Grafiken als Hintergrund fürs Layout nutzen möchtest, warum hast du dann nicht den CSS-Code von Beispiel1 genommen. Da hat es gar keinen Layout-BG und es wird nur das Bild skaliert.

Offline stargate22

  • Neuling
  • *
  • Beiträge: 22
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #2 am: 30. Dezember 2013, 18:12:24 »
Danke für die schnelle Antwort,

nach dem Anpassen der css-Datei passt es für die Darstellung nach Beispiel 1.


Habe auch die Variante "Startseite Beispiel" getestet und meiner Testsite ein eigenes Hintergrundbild für den Layoutbereich zugewiesen. Leider wird das eigene Hintergrundbild nicht angezeigt.

Offline stargate22

  • Neuling
  • *
  • Beiträge: 22
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #3 am: 21. Januar 2014, 18:06:25 »
Habe noch ein bischen rumprobiert und folgendes Problem entdeckt: Mit den aktuellen Versionen IE, FF und Chrome funktioniert das Script einwandfrei. Rufe ich die Seite jedoch z.B. bei einem Bekannten in der Firma auf (IE9 im Einsatz) auf, wird zuerst das Hintergrundbild und dann darunter der Seiteninhalt angezeigt. Gibt es eine Möglichkeit, diesen "Fehler" zu beheben?

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #4 am: 21. Januar 2014, 18:57:24 »
Vielleicht liegt es ja an deinen "Experimenten", denn wenn ich meine Beispielseite im IE9 aufrufe, erscheint sie so, wie sie sein soll... siehe Anhang...

Offline stargate22

  • Neuling
  • *
  • Beiträge: 22
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #5 am: 26. Januar 2014, 21:02:38 »
Hallo nettesekel,

vielen Dank für den Hinweis - ich wollte mit meinen "Basteleien" nur die Hintergrundfarbe in der CSS-Datei ändern.

Habe gerade nochmal eine neue Testseite mit dem Original-Code für die background.css erstellt, die entsprechenden Code-Teile in das Seiten-HTML eingefügt und leider immer noch den "Verschieber" unter IE 8.
Bin für jeden Hinweis dankbar!  :-?

Offline SwissKnife

  • Supporter
  • *****
  • Beiträge: 438
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #6 am: 26. Januar 2014, 21:06:35 »
...der IE8 interpretiert CSS nicht sauber...und auch andere Dinge nicht...daher diese "Fehler"....

...aber den IE8 kann man jetzt wirklich langsam aussen vor lassen...der wird nicht mehr häufig eingesetzt....

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #7 am: 26. Januar 2014, 21:47:58 »
Neulich hast du aber vom IE9 "geredet"...
Wie siehts denn aus, wenn du meine Testseite im IE8 aufrufst?

Offline stargate22

  • Neuling
  • *
  • Beiträge: 22
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #8 am: 27. Januar 2014, 20:58:56 »
Die Testseite wird auch im IE8 (auf meinem alten XP-PC) richtig angezeigt - ohne Verschieber. Den Test mit IE9 habe ich auf einem PC von meinem Bekannten gemacht - auch da läuft die Testseite einwandfrei.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #9 am: 27. Januar 2014, 21:47:34 »
Dann publiziere deine Testseite mal unter dem Doctype LOOSE...

Offline stargate22

  • Neuling
  • *
  • Beiträge: 22
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #10 am: 28. Januar 2014, 21:49:47 »
Hallo,

der Tipp mit dem Doctype war genau richtig - funktioniert jetzt auch bei den "alten" IE.

Vielen Dank  (clap)

Offline stargate22

  • Neuling
  • *
  • Beiträge: 22
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #11 am: 20. Juli 2014, 16:31:02 »
Hallo,

habe beim Aufruf meiner Seite ein kleines "Problem" mit Google Chrome: Wenn ich von einer Seite zu einer anderen Seite über das Navimenü wechsle, wird ganz kurz das Hintergrundbild angezeigt. Bei Firefox oder IE erfolgt der Wechsel flüssig, ohne kurz das Hintergrundbild zu zeigen.
Habe extra nochmals eine kleine Site mit 2 Unterseiten gebaut - auch da tritt dieser ungewünschte Effekt auf.
Kann man diesen Effekt abstellen?

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #12 am: 20. Juli 2014, 16:44:31 »
Fürchte nein... ich denke das ist eine Browsermacke, ist mir auch schon aufgefallen...
« Letzte Änderung: 20. Juli 2014, 16:47:59 von nettesekel »

Offline stargate22

  • Neuling
  • *
  • Beiträge: 22
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #13 am: 20. Juli 2014, 20:46:05 »
Danke für die Rückmeldung  -  mal sehen, ob ich die Seite so lasse.  (fubar)

Offline Blume

  • Senior Mitglied
  • ****
  • Beiträge: 288
Re: Hintergrundbild mit CSS skalieren - iPad tauglich
« Antwort #14 am: 28. Juli 2015, 14:20:33 »
Hallo zusammen,

ich habe auch ein ähnliches Problem mit dem IE9:
http://herzig-stahlbau.de/2015/index.html
Im FF und Chrome funzt das ganze Fehlerfrei nur im IE9 und in meinem mobilen Firefox unter Android wird es vollkommen falsch dargestellt.

Hab Ihr ne Idee, was ich falsch mache?

Grüße und Danke Blume

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion