Healu: Layout für alle (Bildschirm?)-Größen anpassen

Hallo liebe Forenmitglieder,

da mir hier letztes mal so gut geholfen wurde, dachte ich mir das ich euch direkt noch ein bisschen was frage.

Ich habe ein Problem mit der Darstellung bzw. Größe meiner Homepage. Bei meiner Bildschirm-Auflösung sieht sie perfekt aus. Sieht sich jedoch eine Freundin die Homepage an, die einen breiteren Bildschirm hat, wird alles natürlich in die breite gezogen und sieht dann nicht allzu toll aus.

Das Problem wollte ich so lösen wie Facebook.
Anbei direkt 2 Screenshots, damit man weiß was ich damit genau meine:

> hier < Wie Facebook normal aussieht. Also in Normalformat.

> hier < Wie es ganz verkleinert dargestellt ist.


Ich würde gerne das mein Footer auch IMMER bis an den Rand reicht. Egal wie ich den Bildschirm vergrößere oder verkleinere. Das bekomme ich natürlich auch hin. Nur ist das Problem der Text, der unter dem Footer steht. In Facebook ist alles mittig. So hätte ich das auch gerne. Ich würde das auch wirklich gerne in CSS machen, da ich nicht gerne mit Tabellen arbeite.

Nochmal in Kurzfassung:

  • Footer soll immer zu dem Rand reichen. Egal ob ich die Auflösung vergrößere oder verkleinere
  • Ich hätte gerne den <body> so das alles in der Mitte ist. Mit einer breite von ca. 800px und sich eben auch nichts verschiebt wenn ich größer oder kleiner stelle.

Ich hoffe ihr habt es alle verstanden. Ich hab nun als Beispiel einfach mal Facebook genommen. Gibt natürlich viele Homepages die so aufgebaut sind.

Sorry für die komische Art es zu beschreiben, aber ich hab echt kein Plan wie das ganze in der Fachsprache heißt und muss es mit irgendwelchen Wörtern umgehen *g*

Vielen Dank im Vorraus.

  1. Sorry für den Doppelpost. Hab nun was in Paint gekritzelt damit sich auch wirklich alle auskennen. Denn ich hab es wirklich nicht beschreiben können:

    Screenshot

    1. Hi Healu!

      Sorry für den Doppelpost. Hab nun was in Paint gekritzelt damit sich auch wirklich alle auskennen. Denn ich hab es wirklich nicht beschreiben können:

      Screenshot

      Dein "Footer" soll ganz oben sitzen?

      mfG
      Benjamin

      --
      For animals, the entire universe has been neatly divided into things to (a) mate with, (b) eat, (c) run away from, and (d) rocks.
      1. Hi Healu!

        Sorry für den Doppelpost. Hab nun was in Paint gekritzelt damit sich auch wirklich alle auskennen. Denn ich hab es wirklich nicht beschreiben können:

        Screenshot

        Dein "Footer" soll ganz oben sitzen?

        mfG
        Benjamin#

        Genau.

        CSS Code dazu ist:

        #footer {  
        	background-image: url(img/footer.png);  
        	text-align:right;  
        	padding:10px;  
        	margin:0px;  
        	bottom:0px;  
        	overflow:hidden;  
        }
        
        1. Hi Healu!

          Dein "Footer" soll ganz oben sitzen?

          Genau.

          Ich will ja nicht kleinlich sein, aber als "footer" bezeichnet man in der Regel etwas, das ganz unten steht. Der "Fuß" einer Webseite halt. :) Du möchtest eher einen header, also "Kopf".

          mfG
          Benjamin

          --
          For animals, the entire universe has been neatly divided into things to (a) mate with, (b) eat, (c) run away from, and (d) rocks.
          1. Hi Healu!

            Dein "Footer" soll ganz oben sitzen?

            Genau.

            Ich will ja nicht kleinlich sein, aber als "footer" bezeichnet man in der Regel etwas, das ganz unten steht. Der "Fuß" einer Webseite halt. :) Du möchtest eher einen header, also "Kopf".

            mfG
            Benjamin

            Oh, wusste ich nicht. Ja, es soll eben ganz oben sein. Das bekomme ich auch hin. Er passt eigentlich auch.

            Es soll nun ebene eine Art begrenzung geben. Sowohl in diesem "Header" als auch im <body>.

            Ich habe nun noch eine Skizze gemacht wie wirklich ALLES aussehen soll :)

            Jetzt müssten es alle verstehen *g*

            Screenshot

      2. @@Benjamin Buxbaum:

        nuqneH

        Dein "Footer" soll ganz oben sitzen?

        So wie die Wurzel ja auch. ;-)

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
  2. hei,

    beispiel fuer sticky footer, wenn ich dich richtig verstanden habe.

    < http://gut.lv/beispiel/stickself.html>

    Fuer die homepage breite, mach einfach zu den wrapper

    width:800px;
    margin:0 auto;

    oder was meinst du?

    LG

    1. hei,

      beispiel fuer sticky footer, wenn ich dich richtig verstanden habe.

      http://gut.lv/beispiel/stickself.html

      Fuer die homepage breite, mach einfach zu den wrapper

      width:800px;
      margin:0 auto;

      oder was meinst du?

      Hey.
      Ja, widht:800px; hab ich schon versucht. Jedoch wird der Footer dann auch kleiner dargestellt. (Eben 800px;)

      Ich will das NUR der Text, der unter dem Footer steht auf 800px; ist. Der Footer soll bis zu dem Rand reichen.

      Und das eben der Inhalt/Text unter dem Footer in der Mitte von dem Bildschirm ist. Habe vorhin direkt noch einen Screenshot gezeichnet. Findest du eh in diesem Thread. :)