margarida04: Seite automatisch an browserfenster anpassen

Hallo,

ich habe ein Problem.. Ich möchte eine Seite bestehend aus Grafiken, welche per css positioniert sind. Nun möchte ich, dass sich die Seite automatisch an die das jeweilige Benutzerbrowserfenster anpasst. Ist es richtig, dass die einzige Möglichkeit ist, ein Javascript in den Head-Bereich einzufügen, der die Auflösung des Users ausliest? Ich meine dann müsste man ja jede Seite für die verschiedenen Auflösungen optimieren..ich meine einmal wäre das ja nicht sooo das Problem. Die Frage stellt sich dann aber bei der Pflege der Seite. Also wenn man einen Text hochladen will muss man das dann ja für jede Auflösung tun. Geht das nicht einfacher?

Ich hoffe ihr versteht was ich meine.

Danke.

  1. Hi,

    ich habe ein Problem.. Ich möchte eine Seite bestehend aus Grafiken, welche per css positioniert sind. Nun möchte ich, dass sich die Seite automatisch an die das jeweilige Benutzerbrowserfenster anpasst.

    wenn das nicht automatisch passiert, ist vermutlich Deine Methodik der Positionierung fehlerhaft.

    Ist es richtig, dass die einzige Möglichkeit ist, ein Javascript in den Head-Bereich einzufügen, der die Auflösung des Users ausliest?

    Nein. Die Auflösung des Users nützt Dir gar nichts. Selbst die Auflösung seines Bildschirms ist vollkommen irrelevant. Die Größe des Viewports könnte helfen, allerdings erzeugst Du damit nicht nur hohe Aufwände, sondern hast vermutlich einen grundsätzlichen Fehler gemacht.

    Ich meine dann müsste man ja jede Seite für die verschiedenen [Viewport-Ausmaße] optimieren..ich meine einmal wäre das ja nicht sooo das Problem.

    Wirklich nicht? Es gibt verflucht viele mögliche Größen des Viewports.

    Ich hoffe ihr versteht was ich meine.

    Ja, aber ich verstehe nicht, was Du falsch gemacht hast, um ein solches Problem zu kreieren, welches Du hier zu lösen versuchst.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. Ja ich würde auch gern auf Javascript verzichten. Bin halt fast am verzweifeln...Möchte halt nur, dass sich die Seite automatisch anpasst.
      Wahrscheinlich habe ich auch Mist verzapft aber ich kenn mich halt noch nicht so aus...
      Hier mein Code:

      <html>
      <head>
      <title>Forum</title>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <style type="text/css">
      <!--

      #container {
      width:100%;
      height:100%;
      }

      #box1 {
      position:absolute;
      left:0px;
      top:0px;
      width:288px;
      height:90px;
      }

      #box2 {
      position:absolute;
      left:288px;
      top:0px;
      width:518px;
      height:90px;
      }

      #box3 {
      position:absolute;
      left:0px;
      top:90px;
      width:288px;
      height:306px;
      }

      #box4 {
      position:absolute;
      left:288px;
      top:90px;
      width:518px;
      height:306px;
      }

      #box5 {
      position:absolute;
      left:0px;
      top:396px;
      width:288px;
      height:249px;
      }

      #box6 {
      position:absolute;
      left:288px;
      top:396px;
      width:518px;
      height:249px;
      }

      -->
      </style>
      </head>
      <body bgcolor=#FFFFFF>
      <div id="container"
      <div id="box1">
      <img src="images/Forum2_01.gif" width=288 height=90></div>
      <div id="box2">
      <img src="images/Forum2_02.gif" width=518 height=90></div>
      <div id="box3">
      <img src="images/Forum2_03.gif" width=288 height=306></div>
      <div id="box4">
      <img src="images/Forum2_04.gif" width=518 height=306></div>
      <div id="box5">
      <img src="images/Forum2_05.gif" width=288 height=249></div>
      <div id="box6">
      <img src="images/Forum2_06.gif" width=518 height=249></div>
      </div>
      </body>
      </html>

      Selbst wenn ich den Divs nun prozentuale Angaben zuweise passt es sich nicht an...vielleicht liegt es auch an der Pos:absolute? Habe auch versucht mit float zu positionieren...dann verrutschen die Grafiken aber immer wenn ich das Browserfenster verkleiner, das soll aber nicht sein. Weiss einfach nicht weiter...

      Vielleicht könnt ihr mir ja sagen wo das grundlegende Problem ist??

      Vielen vielen Dank!

      1. Grüße,

        Vielleicht könnt ihr mir ja sagen wo das grundlegende Problem ist??

        % statt px?
        MFG
        bleicher

        --
        __________________________-

        FirefoxMyth
        1. Ja das bringt halt auch nix...

          <html>
          <head>
          <title>Forum</title>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <style type="text/css">
          <!--

          #container {
          width:100%;
          height:100%;
          }

          #box1 {
          position:absolute;
          left:0%;
          top:0%;
          width:35,73%;
          height:13,95%;
          }

          #box2 {
          position:absolute;
          left:35,73%;
          top:0%;
          width:64,26%;
          height:13,95%;
          }

          #box3 {
          position:absolute;
          left:0%;
          top:13,95%;
          width:35,73%;
          height:47,44%;
          }

          #box4 {
          position:absolute;
          left:35,73%;
          top:13,95%;
          width:64,26%;
          height:47,44%;
          }

          #box5 {
          position:absolute;
          left:0%;
          top:61,39%;
          width:35,73%;
          height:38,60%;
          }

          #box6 {
          position:absolute;
          left:35,73%;
          top:61,39%;
          width:64,26%;
          height:38,60%;
          }

          -->
          </style>
          </head>
          <body bgcolor=#FFFFFF>
          <div id="container">
          <div id="box1">
          <img src="images/Forum2_01.gif" width=100% height=100%></div>
          <div id="box2">
          <img src="images/Forum2_02.gif" width=100% height=100%></div>
          <div id="box3">
          <img src="images/Forum2_03.gif" width=100% height=100%></div>
          <div id="box4">
          <img src="images/Forum2_04.gif" width=100% height=100%></div>
          <div id="box5">
          <img src="images/Forum2_05.gif" width=100% height=100%></div>
          <div id="box6">
          <img src="images/Forum2_06.gif" width=100% height=100%></div>
          </div>
          </body>
          </html>

          Eigentlich müsste doch der Div "container" mit seiner 100% höhe und breite die gesamte Seite ausfüllen. Dann sind darin die einzelnen divs box 1-6 in % positioniert und haben auch eine % größenangabe, so dass alles wider 100% des "containers" ausfüllt. Wenn ich jetzt die einzelnen gifs ind den verschiedenen Divs jeweils 100% höhe und breite zuweise müssten die doch die gesamte größe ihrer "box" einnehmen? Oder verstehe ich da was falsch?

          Das will sich einfach nicht anpassen wird mit den % nur noch kleiner...

          HILFE

          1. Hallo :)

            Das will sich einfach nicht anpassen wird mit den % nur noch kleiner...

            Prozentangaben müssen mit Punkt und nicht mit Komma notiert werden.

            mfg
            cygnus

            --
            Die Sache mit der Angel und dem  ><o(((°>  hat immer einen Haken ...
            1. WOW!! Es geht..vielen vielen Dank! Traumhaft!

              1. ohhh. Alles funktionier super in Firefox...aber beim Test in IE haben alle grafiken einen weissen Rand...weiss jmd woran das liegen könnte?

                Der IE treibt mich zur Weissglut!!

                1. Grüße,
                  versuch border und padding auf none/0
                  bzw - zeig ma online bsp?
                  MFG
                  bleicher

                  --
                  __________________________-

                  FirefoxMyth
                  1. Hallo,

                    habe padding und border versucht auf 0/none. Klappt aber nicht. Zeigt immer noch weisse Ränder im IE!

                    HIERnun Online das Problem.

                    Nicht wundern das Design ist noch nicht fertig..kümmere mich nur um den Aufbau der Seite, daher nur Platzhalter anstelle der Grafiken.

                    Vielleicht könnt ihr mir nochmal helfen...

                    BESTEN DANK!

                    1. Hallo :)

                      habe padding und border versucht auf 0/none. Klappt aber nicht. Zeigt immer noch weisse Ränder im IE!

                      Könnte es sein, dass da kein Rand um die Grafiken herum ist,
                      sondern dass der Hintergrund beim IE durchscheint?

                      mfg
                      cygnus

                      --
                      Die Sache mit der Angel und dem  ><o(((°>  hat immer einen Haken ...
                      1. Hallo :)

                        Teste das mal:

                        body {
                                 margin: 0;
                                 padding: 0;
                                 width: 100%;
                                 background: #000000; }

                        mfg
                        cygnus

                        --
                        Die Sache mit der Angel und dem  ><o(((°>  hat immer einen Haken ...
                        1. Wunderbar das hat geholfen.

                          Vielen Dank!

  2. Grüße,
    eins der Gebote lautet: missbrauche JS nicht zu sehr zu layoutzwekcen.
    wenn du kein völliges mist an layout baust, reicht CSS dicke aus um alles anzupassen - sei bloß bereit kompromisse einzugehen - 5es bein mag geil erscheinen, aber auch nur für dich.
    MFG
    bleicher

    --
    __________________________-

    FirefoxMyth