Seitenlayout mit DIV

    hey leute,
    hab da mal ne frage. ich versuche gerade ein seitenlayout nur mit divs aufzubauen. dabei verwende ich 3 absolut positionierte divs.
    einer ganz oben, einer ganz unten, und einer der die ganze seite bedeckt.
    in dem div der die ganze seite bedeckt habe ich einen div mit einer breite von 900px platziert. nun hätte ich gerne noch, dass dieser div eine höhe hat, sodass er zum oberen und zum unteren rand 50 px abstand hat.
    die seite soll nicht scrollbar sein.

    selber versucht habe ich, ihm ienfach 100% height zu geben, aber dann steht ein teil einfach unten raus und das soll nicht so sein.

    wie kann ich das lösen?

    Das was bei den 100% übersteht sind die Höhen des oberen und unteren Divs zuzüglich padding und margin.

    Das Problem ist, dass Pixel und Prozent eben unterschiedliche Einheiten sind und keinen gemeinsamen Nenner haben. Somit macht es auch keinen Sinn irgendeinen Wert unter 100% zu nehmen, da dies je nach Bildschirm unterschiedlich ist.

    Vielleicht hilft dir
    dieses Layoutbeispiel weiter.

    ich hab jetzt statt dem div einen table hergenommen, den kann ich schön so hoch machen wie ich ihn will (table -> 3 zeilen -> zeile 1: height: 40px; zeile 2: height: 100% - 80px (natürlich nicht so angschrieben^^); zeile: height: 40px;)
    alles schön und recht (firefox und co). aber der internet explorer (im test v7) schafft es einfach nicht zeile 1 und zeile 3 height: 40 px(!!!) zu geben. sie haben beide ca. 1/3 des gesamten height der seite. wie kann ich dieses *fluch, mehr fluch, noch mehr fluch* verhalten des ie umgehen?

    :shock: D'ouh...

    Bitte, bitte komm weg von Tabellen. Die sind was für Anfägner, also ich meine nicht mehr standardkonform..

    Zitat von firefox5.0

    Bitte, bitte komm weg von Tabellen. Die sind was für Anfägner, also ich meine nicht mehr standardkonform..


    Lieg´ ich falsch, wenn ich vermute, dass Deine Begründung alleine auf "das macht man nicht mehr" beruht?! ;)

    Was machen wir nur, wenn morgen die/der erste Webschaffende verkündet: "Container sind out, es lebe der Absatz"? Ich hoffe, dass man sich dann nicht auch bald dafür schämen muss, wenn man aus Verzweiflung mal ´nen DIV-Container verbaut... :D

    Viele Grüße!
    PINALES

    Rechtschreibung für alle!

    @ firefox

    er hat schon recht. man sollte auch das begründen können was man behauptet.
    z.b. das tabellen im zuge der barrierefreiheit nicht mehr aktuell sind, da tabellen
    als komplettes konstrukt aufgefasst werden und deshalb schlechter auszuwerten
    sind im gegensatz zu div-containern.

    glaub auch crawler finden sich auch div-seiten besser zurecht als auf zig-verschalteten tabellen-pages.

    um mal nen kleinen auszug zu nennen...

    Einen div kannst du ganz einfach mal woanders hinsetzen.
    Bei einer Tabelle musst du die ganze Struktur ändern.
    Du kannst die Elemente in einem div eben mal vertikal anordnen statt horizontal.
    Bei einer Tabelle musst du die ganze Struktur ändern.
    Die Größe eines divs kannst du schnell verändern.
    Bei einer Tabelle musst du die ganze Struktur ändern, das z. B. rowspan und colspan angepasst oder neue "bufferzellen" eingefügt werden müssen.
    Die Position eines divs kann man unabhängig von seinen Nachbarn festlegen.
    In einer Tabelle ist man immer durch die Nachbarn festgelegt.
    Ein Code mit divs ist wesentlich kürzer.
    Es ist oft eine Frage der Semantik:
    Für einen Kasten mit Text oder Links macht ein benannter div Sinn, für eine Übersicht von Eigenschaften horizontal und vertikal gegliedert macht natürlich eine Tabelle Sinn.

    Viele liebe Grüße
    The User

    löl, nett dass ihr mich über die vorteile der divs aufgeklört habt, aber die nachteile hat keiner genannt.
    ausserdem hilft mir das alles eigentlich überhaupt nicht weiter

    moin ...

    Zitat

    ausserdem hilft mir das alles eigentlich überhaupt nicht weiter


    Vielleicht erzählst Du den fleißigen Helfern einmal was Du genau vorhast!
    In Deinem Ausgangsposting wolltest Du irgendwas mit absolut positionierten Divs anstellen, bist dann irgendwie auf ne Tabelle umgestiegen. was kommt danach?

    Frames ??

    gruß ...

    moin ...
    Schön das Du eine Lösung gefunden hast.
    Vielleicht lässt Du ja das forum - hilfe daran teilhaben. Kann ja sein das Du was vernünftiges hingebastellt bekommen hast und Leute mit einer ähnlichen Frage davon profitieren könnten.
    gruß ...

    Moin,

    Zitat von makroy

    löl, nett dass ihr mich über die vorteile der divs aufgeklört habt, aber die nachteile hat keiner genannt.
    ausserdem hilft mir das alles eigentlich überhaupt nicht weiter

    der Nachteil ist das du das Boxmodell mit float/clear usw. nicht verstanden hast und deshalb einen typischen Anfängerfehler machst: divs absolut positionieren.

    Das macht dein Layout unflexibel, da absolut positioniertes aus dem Textfluß genommen wird und von den anderen Elementen ignoriert wird, d.h. sie tun so als wär das abs. pos. Element nicht da.

    Wie wärs mit ein wenig lernen (Buch z.B., der Trend geht ja eh zum
    Zweitbuch :mrgreen: )

    Dann klappts auch mit den divs und du mußt nicht mehr auf mittelalterliche Layoutmethoden zurückgreifen. :wink:

    koslowski

    hm, ich hab schon ein recht fettes buch darüber zuhause liegen (und auch gelesen). ich wäre nur nie auf die idee gekommen, divs mit hilfe von floats zu platzieren.bisher hab ich den textfluss eigentlich nur mit hilfe von display gesteuert.
    aber welche genauen vorteile bieten mir floats? damit ich einen plan hab was ich damit layout technisch bewirken kann. denn soweit es mir logisch erscheint kann ich doch mit hilfe von display das gleiche erreichen!?

    Hi,

    wie ich schon schrieb wenn du deine Boxen mit pos.abso. in den Viewport nagelst wird dein Layout unflexibel.
    Du posit. so wie es dir bei deinem Bildschirm richtig erscheint.
    Es gibt aber zig versch. Bildschirmgrößen mit untersch. Bildschirmauflösungen.

    Da schauts dann auf einmal woanders gar nicht mehr so gut aus.

    Der große Vorteil einer Webseite im Gegensatz zu Büchern ist doch die Flexibilität und HP'S sollten doch dann so gebaut werden, dass sie in möglichst vielen Browser und untersch. Bildschirmen etc. funktionieren und auch einen guten Look haben.

    Diesen Vorteil nimmst du einer HP durch deine Art zu layouten ein Stück weit wieder weg.

    Klar, float/clear mit allen Folgeerscheinungen ist nicht so leicht zu begreifen, das dauert halt a bisserl, aber ich finde es lohnt sich. :wink:

    koslowski

    Die Tipps von koslowski solltest du beherzigen.
    Ich versuch mal ganz vereinfacht float zu erklären:

    Div's sind Blockelemente. Sie ordnen sich standardmäßig immer untereinander an.
    Nun erfordert ein Layout, dass man Div's nebeneinander anordnen muss.
    So z.B. ein dreispaltiges Layout, links die Navi, in der Mitte der Content und Rechts eine Adbar.
    Mit float kannst du nun bewirken, dass diese drei "Spalten" (Div's) nicht untereinander, sondern nebeneinander stehen.
    Es gibt dabei durchaus mehrere Möglichkeiten, diese Anordnung mit unterschiedlichen Styleangaben zu realisieren.
    Ist diese Anornung fertig, dann clearst du im Anschluss, damit sich der nächste Div, z.B. ein Footer wieder quer darunter setzen kann.

    Vielleicht dient diese Anleitung dem besseren Verständnis.