Layout-Problem

    Layouten ist einfach nicht mein Ding, vielleicht kann mir hier ja jemand helfen.
    [Blockierte Grafik: http://bdt600.bd.funpic.de/temp/layout.jpg]

    Die Rahmen oben und unten sind 1000px breit und 30px hoch, die Rahmen links und rechts sind jeweils 30px breit. Alle div's haben eigene Hintergrundbilder und der ganze Kram soll zentriert auf der Seite stehen. Mein CSS:


    Wäre nett, wenn mir das jemand korrigieren könnte.

    Danke
    bandit

    Ein klassisches Problem ;)
    Du bekommst das mit den Balken links und rechts nicht hin, oder?
    Das Problem ist, dass du die Höhenangabe in Prozent nicht auf floatende Elemente vergeben kannst. Diese befinden sich nicht mehr im normalen Elementfluss, also auf was sollen sich die Prozente beziehen?

    Die einfachste Lösung ist hier die faux-columns Technik: http://www.alistapart.com/articles/fauxcolumns/

    Ansonsten musst du wohl oder übel mit absoluten Positionierungen arbeiten, was meistens ziemlich haarig wird und in Pixelzählerei und "Jedem-Browser-sein-Stylesheet" ausartet.

    Grüße,
    jojo

    Edit: Ich hatte das vor ner Weile auch mal anders gelöst, muss ich nur mal nach suchen :roll:


    Du brauchst zunächst eine Basis, auf die sich die 100% height beziehen.
    Deshalb ergänze die CSS um

    Code
    html, body {height: 100%; width: 100%;}

    Das zweite Problem hat jojo bereits genannt:
    zu den 100% kommen noch die oberen und unteren Querbalken sowie evtl. margins und paddings hinzu, so dass die Seite nach dem CSS-Boxmodell effektiv größer als 100% wird und man deshalb scrollen muss.

    Du könntest den Balken und dem content eine fixe Höhe geben.

    Das sind dann wieder die Momente, wo man schnell zum Tabellenlayout übergehen möchte.

    Danke, ich werde mal sehen, was ich da mache. Sollte jemand so ein Problem schon gelöst haben, wäre ich für ein Beispiel dankbar.

    Du könntest mal versuchen, dieses Layout zu verwenden:

    http://www.ohne-css.gehts-gar.net/0025.php

    Dann müsstest du eine einheitliche Gesamt-Hintergrundgrafik basteln, indem du linken Balken, Content-Farbe und rechten Blaken in eine Grafik zusammenfügst.
    Diese dann dem #innenwrapper als background-image zuweisen.
    Ggf. kannst du bei der Grafik auch noch die Höhen von header und footer berücksichtigen und sie entsprechend positionieren.

    Zitat von sejuma

    Dann müsstest du eine einheitliche Gesamt-Hintergrundgrafik basteln, indem du linken Balken, Content-Farbe und rechten Blaken in eine Grafik zusammenfügst.


    Darauf wird es wohl hinauslaufen, obwohl ich nicht gerade glücklich damit bin, aber egal.

    Danke

    Hi,

    wenn ich das richtig sehe, willst du ein normales Dreispaltenlayout mit header und footer, wobei der footer immer unten kleben soll, oder?

    Falls das zutrifft ist die beste Technik dazu sicher Foot Sticker Alt

    width:100%; für body und html ist mit Sicherheit überflüssig.
    z-index wirkt sich nur bei positionierten Elementen (außer position:static; !) aus. Es sollte mit äußerster Vorsicht angewandt werden!
    i.d.R. kann man die Stapelreihenfolge (z-Achse) durch Vergabe von z.B. position:relative; an das richtige Element hinreichend beeinflußen.

    Wichtig ist an dem Beispiel dass der footer eine Höhe bekommt, (der im Quelltext außerhalb von #nonfooter steht) und ein negatives margin-top, das der Höhe des footers entspricht.
    Außerdem muss für den content bei langen Inhalten evtl. ein entsprechendes padding-bottom definiert werden, damit der untere Teil der Inhalte nicht hinter dem footer verschwindet. ;)

    Für gleichlange Spalten wurde ja schon "Faux Columns" angesprochen.

    koslowski

    Ich habe jetzt den Vorschlag von sejuma übernommen und es passt.

    Danke fürs Lesen und Helfen.