Webgreenhorn: Banner richtet sich nach Browsergröße

Hallo.

Ich habe folgenden Banner,

Banner

und würde gerne das Haus ganz auf die rechte Seite geben und je nach Browsergröße soll das immer erscheinen. Momentan ist es auf eine fixe Auflösung eingestellt.

Ich weiß jetzt leider auch gar nicht, ob ich da im richtigen Themenbereich bin.

Mfg

  1. Anbei noch der Link zum Banner ;)

    Banner

  2. Wenn ich den von Dir angegebenen Link anwähle, gelange ich auf die Seite von einem Provider o.Ä. Von einem Haus ist da nichts zu sehen. Darüber hinaus wird aus Deiner Fragestellung nicht im Geringsten deutlich, was Du eigentlich wissen willst.

    Gruß
    Ronald

    1. Also ich komme auf die Seite von Imageshack und da ist rechts im Bild ein gelber Banner mit der Aufschrift Wanderrast Hochschlag.

      Das Haus soll bei einer Auflösung von 1600*1200 genauso ganz rechts sein als wie bei einer Auflösung von 800* 600.

      1. Hi!

        Das Haus soll bei einer Auflösung von 1600*1200 genauso ganz rechts sein als wie bei einer Auflösung von 800* 600.

        Ich kann mir schon denken, was Du meinst. Aber ist das wirklich eine gute Idee? Ich hab daheim z.B 1024x768 und 1900x1200. Hier habe ich 1440 x 900. Und ganz ehrlich: Ich kann mir nicht vorstellen, dass es vernuenftig aussieht, wenn jeweils das Banner ueber 100% der Viewportbreite geht.

        Dein Anliegen kannst Du natuerlich mit CSS loesen. Ich habe dein Banner noch nicht gesehen (nur Werbung auf der Seite)  Aber ich denke Du hast eine Grafik/Schrift die rechts von einem Haus begrenzt wird.

        Stell also das Haus frei und positioniere es rechts in einem Element, das den Schriftzug/ die Grafik als Hintergrund enthaelt. Fuer ein Seitenbanner im Kopf einer seite bietet sich <h1> als Element an.

        --
        "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
              - T. Pratchett
        1. Habe die Seite nun mal online gestellt, dann sollte man es sehen.

          Meine Seite

          1. »» Habe die Seite nun mal online gestellt, dann sollte man es sehen.
            »» Meine Seite

            Problem:
            Background Images sind derzeit nicht skalierbar.
            Du müsstest schon ein <img> Element einbinden, um es skalieren zu können.

            Tip:
            Linklisten sind immer Kandidaten für ein <ul> Element mit Zubehör.

            mfg Beat

            --
            ><o(((°>           ><o(((°>
               <°)))o><                     ><o(((°>o
          2. Moinsen!

            Habe die Seite nun mal online gestellt, dann sollte man es sehen.

            Meine Seite

            Das ist einfach. Nimm die Schrift raus und die Haeuser. Dann hast Du einen Streifen fuer den Hintergrund. Den kannst Du sogar <body> verpassen.
            Nimm von dem Streifen ein Stueck von paar Pixeln Breite als Hintergrund und lass ihn sich horizontal wiederholen. Damit hast Du deinen 100% Headerbreich.

            Um nun Schrift und Gebaeude darzustellen machst du daraus 2 eigene Grafiken. Ob transparent oder mit dem gelben Hintergrund bleibt Dir und deinen Faehigkeiten ueberlassen. Diese beiden Grafiken fuegst Du nun in ein Element, dass die Hoehe deines Streifens hat. Die Schrift normal und die Gebaeude rechts (absolut) positioniert. Einen Zeilenumbruch bei kleinem Viewport verhinderst Du durch eine Mindestbreite. Bei meiner normalen Fenstergroesse sehe ich nichts von den Gebaeuden - auch scrollend komme ich nicht soweit.

            Und dann unternimm mal was dagegen, dass dein Menue bei mir oben links in der Ecke klebt und deinen Header verdeckt. (IE6)

            --
            "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                  - T. Pratchett
            1. Beide Grafiken in ein Element oder meinst du in 2 getrennte Elemente?

              Momentan hab ich es so:

              /* CSS Document */

              body {
                      margin: 0;
                      padding: 0;
                      background-color: #ffffff;
                      background-image: url(banner.gif);
              background-repeat: repeat-x;
              width: 100%;
                      height: 100%;
                      }

              /* Banner */

              #schriftzug {
              background-image: url(schriftzug.gif);
              background-repeat: no-repeat;
              height: 121px;
              weight: 570px;
              margin-top: 1em;
              }

              #haus {
              position: absolute;
              background-image: url(haus.gif);
              background-repeat: no-repeat;
              height: 121px;
              }

              Ergebnis unter Meine Seite

              PS: Das Darstellungsproblem ist mir bekannt. :(

              1. Beide Grafiken in ein Element oder meinst du in 2 getrennte Elemente?

                Beide Grafiken als Grafik. (also 2 <img>) Den Schriftzug erstmal einfach im Elternelement. Das sollte ihn ja erstmal links oben ausrichten. Die Gebäude absolut positionieren mit right. Dabei nicht vergessen, daß Elternelemen auch zu positionieren. Relativ wäre hier gut.

                Also:

                <body>
                 <h1>
                  <img>
                  <img>
                 </h1>

                Du kannst aber dem Header eine der Grafiken durchaus als Hintergrund mitgeben. Die Gebäude vielleicht. damit ersparst Du Dir das mit der absoluten und relativen Positionierung. Das hat den Vorteil, daß du noch Elemente wie Submenü, Suche, ... darüberlegen kannst.

                Die Breite mit 100% anzugeben, kannst Du Dir übrigens auch erstmal sparen. Das ist Standard für Blockelemente.

                Naja. Das mal als Anregung. Ich mach jetzt erstmal Wochenende.

                --
                "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                      - T. Pratchett