gary: Background Position

Abend zusammen,

Eine Hintergrundgrafik (glas_stone.png) wird im Repeatmodus über die ganze Seite angezeigt. Dieses Hintergrundbild steht im body {} im CSS.

Ich will nun erreichen, das die Glasbausteine erst 10% vom linken Rand anfangen angezeigt zu werden, und 10% vom rechten Rand aufhören angezeigt zu werden. So dass sich ein ca ein 80% Teppich in der Mitte ergibt. Der Mittlere Text- und Bildbereich beginnen je 18% vom Rand. zu sehen hier.

Viele Grüsse gary

  1. Hallo gary,

    schon mal versucht, dem body ein margin zu spendieren?

    Gruß, Jürgen

    1. schon mal versucht, dem body ein margin zu spendieren?

      das wird aufgrund des spezillen verhaltens von body bzw html nix bringen (habs auch grade nochmal zur sicherheit im firefox ausprobiert) ein margin auf body oder html ändert in seinem fall nichts an der hintergrundgrafik

      1. Hallo suit,

        na gut, war nur eine Idee. Dann eben ein div um alles und dem dann den margin und die Hintergrundgrafik geben.

        Gruß, Jürgen

        1. na gut, war nur eine Idee. Dann eben ein div um alles und dem dann den margin und die Hintergrundgrafik geben.

          auch das wird nicht klappen, da ja nur der hintergrund schmäler werden soll, die seite aber dennoch bis zu rand laufen soll - darum braucht er einen div rundherum UND ein zusätzliches element ;)

          1. Hi,

            Dann eben ein div um alles und dem dann den margin und die Hintergrundgrafik geben.

            auch das wird nicht klappen, da ja nur der hintergrund schmäler werden soll, die seite aber dennoch bis zu rand laufen soll - darum braucht er einen div rundherum UND ein zusätzliches element ;)

            body (farbige) seitliche borders geben, und Inhaltsdiv mit negativen seitlichen margins wieder "ueber" diese ziehen ...?

            MfG ChrisB

            --
            "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
            1. Morgen ChrisB,

              body (farbige) seitliche borders geben, und Inhaltsdiv mit negativen seitlichen margins wieder "ueber" diese ziehen ...?

              Bin gerade an deiner Methode dran. Die fürt zu einem recht seltsamen Ergebnis.
              Der empfohlene Rand wird zwar gemacht (mittlerer Text ist gequetscht), aber die Randfarbe weis wird nur bei den oberen linken und rechten Divs gemacht. Der Rand sollte doch bis runter gehen? Auch das Hintergrundmuster kümmert sich nicht um die Bordereinstellung.

              Viele Grüsse gary

  2. Ich will nun erreichen, das die Glasbausteine erst 10% vom linken Rand anfangen angezeigt zu werden, und 10% vom rechten Rand aufhören angezeigt zu werden. So dass sich ein ca ein 80% Teppich in der Mitte ergibt. Der Mittlere Text- und Bildbereich beginnen je 18% vom Rand. zu sehen hier.

    füge zb ein absolute (fixed) hinter die seite positioniertes peseudoelement ein, welches diesen hintergrund vorgaukelt

    1. Hi suit,

      Zu sehen hier.

      füge zb ein absolute (fixed) hinter die seite positioniertes peseudoelement ein, welches diesen hintergrund vorgaukelt

      Meinst du ein Div-Kontainer als Pseudoelement?
      Natürlich könnte ich ein weiteres Div einbauen, aber da ich nicht weiss, wieviel Content das Perl-Script liefert (Anzahl späterer Berichte ist flexibel) müsste dieses Hintergrund-Div-Container seine Höhe automatisch an die seitenlänge anpassen.

      Meintest du ein weiteres Div?

      Grüsse gary

      1. Meintest du ein weiteres Div?

        konkret zwei

        wenn ###CODE### dein aktuell code ist, wird dein neuer code so aussehen:

        <div id="fakehintergrund"></div>
        <div id="container">
          ###CODE###
        </div>

        fakehintergrund wird einfach absolut hinter die seite positioniert

        damit das funktioniert müssen html und body eine minimalhöhe von 100% haben und fakehintergrund eine höhe von 100% - der rest sollte für dich weitestgehend unverändert bleiben

        btw: für den ie6 benötigst du einen min-height-hack (_height zb) oder ein eigenens stylesheet mit conditional comments (mit einfach nur height)

        1. Hi suit,

          <div id="middle_background">
            ###CODE###
          </div>

          Ich habe das so gemacht wie oben. Jetzt wird aber beim einstellen des middle_backgrounds die WC-Papierrolle mit den Links verschoben, weil es den Rand vom Umschliessenden Div als Referenz nimmt. Also wenn ich schon ein umschliessendes Div nehme, dann darf ich das erstmal nicht verstellen.

          Wie hast du das jetzt mit dem 2. Div gemeint....

          Sorry, ich steig da noch nicht ganz durch.

          Viele Grüsse gary

          1. Hallo zusammen,

            Der mittlere Bereich ist jetzt gefliesst. Das hat schon mal funktioniert.

            Ich beobachte aber, das die Linksammlung auf der WC-Rolle nicht mehr an ihrem Platz links im Browser ist. Auch scheint jetzt der gesamte mittlere Inhalt gequetscht zu sein.

            Irgend welche ideen, warum jetzt die sich verschieben, obwohl absolut platziert? *manman* :-(

            Späte Grüsse gary

            1. Hallo zusammen,

              Habe alles wieder auf Anfang zurückgestellt. Also Eingangspostig ist wieder aktuell.

              Ich mache morgen weiter...

              Gute Nacht Selfler...

              Gruss Gary

  3. hier.

    Du hast ja immer noch die BOM drin.

    Struppi.

    1. Morgen Struppi,

      Ich weis.... ich besorge mir ein Byteleseprogramm und entferne manuell das "EF BB BF"...

      Nur im Moment habe ich ganz andere Schwierigkeiten.
      Jetzt ist es ungefähr so wie ich will. Nur:

      Das funktioniert nur mit

      wrapper_background {
                         position: fixed;
                         }

      Dann kann ich aber den Inhalt der Page nicht mehr scrollen... ich dreh echt am Rad...

      Viele Grüsse gary

      1. Ich weis.... ich besorge mir ein Byteleseprogramm und entferne manuell das "EF BB BF"...

        Benutzt du immer noch Wordpad??? Warum benutzt du nicht einfach, wie dir schon mehrfach empfohlen wurde, einen vernüftigen Editor?

        Struppi.

        1. Hi Struppi,

          Ja, Wordpad für CSS und Editor für Shtml wegen utf-8. Habe zwar Phase 5, ist aber sehr kompliziert. Kann einfach zu viel. Konnte nicht einmal eine bestehende Datei dort öffnen. Ich muss dort mit einem neuen Projekt mal anfangen. So wie jetzt ist es von der Handhabe für mich am einfachsten.

          Viele Grüsse gary

          PS.:wie wäre es mit einem kleinem wrapper toturial? *g*

          Viele Grüsse gary

          1. Ja, Wordpad für CSS und Editor für Shtml wegen utf-8. Habe zwar Phase 5, ist aber sehr kompliziert. Kann einfach zu viel.

            Warum installierst du ein Programm dass du nicht brauchst?
            Du hast eine ganze Menge einfacher Editoren genannt bekommen, ich verwende Notepad++, der kann alles was du zum programmieren brauchst, während Wordpad eigentlich gar nichts kann was du bräuchtest, es ist die schlechteste aller Möglichkeiten ausser vielleicht Notepad

            Struppi.

            1. Du hast eine ganze Menge einfacher Editoren genannt bekommen, ich verwende Notepad++, der kann alles was du zum programmieren brauchst, während Wordpad eigentlich gar nichts kann was du bräuchtest, es ist die schlechteste aller Möglichkeiten ausser vielleicht Notepad

              phase 5 ist überladen und sehr kompliziert stimmt, ich hab lange zeit proton verwendet (die editor-komponente von phase 5) bis ich dann auf notepad++ umgestiegen bin ;)

              kann dir also nur zustimmen, ich verstehe auch nicht warum gary freiwillig NICHT np++ verwendet ;)

              1. phase 5 ist überladen und sehr kompliziert stimmt, ich hab lange zeit proton verwendet (die editor-komponente von phase 5) bis ich dann auf notepad++ umgestiegen bin ;)

                Wollte ich auch erwähnen, aber kann proton mittlerweile UTF?

                Struppi.

                1. phase 5 ist überladen und sehr kompliziert stimmt, ich hab lange zeit proton verwendet (die editor-komponente von phase 5) bis ich dann auf notepad++ umgestiegen bin ;)

                  Wollte ich auch erwähnen, aber kann proton mittlerweile UTF?

                  ja, aber nur sehr mangelhaft, zudem ist version 3.3 bugverseucht und unbenutzbar (verliert beim speicher zb die edit-history) da der ursprüngliche entwickler offenbar der windowswelt den rücken gekehrt hat

                  zudem darf man phase 5 nicht kommerziell (ohne lizenzkosten oder überhaupt, weiss ich grade nicht) nutzen - von der seite fällts für mich flach - ich spende lieber freiwillg geld, als gezwungen zu werden ;)

          2. Hi zusammen,

            Habe es fast geschafft. Siehe hier.
            Wie kann ich erreichen, dass der wrapper bis Seitenende das Hintergrundbild einbaut,und nicht nur bis Schirmende?

            Grüsse gary

            1. Hi zusammen,

              OK,habe es gefunden. An Stelle von 100% einfach auto eintragen.

              *puuuuhhhhh*

              So, der Rest ist Einstellungssache. Die Text-Div's etwas breiter machen, da ja jetzt der wrapper die Referenz für die prozentualeBreite ist. Werde noch ein bischen mit der Texthintelegung,Div-Hintergrund hantieren- wegen der Leserlichkeit.

              Danke für die manigfaltigen Vorschläge, auch wenn keiner dabei war, der zielführend war bzw. den ich mit meinemwenigen Können hätteumsetzen können.

              Viele Grüsse gary