Devius: Dreispaltiges Layout ohne Float

Hallo Forianer,

ich habe eine Seite mit folgendem dreispaltigen Layout.
______________________________________________________
|  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  |
|  xxxxxx               Header               xxxxxx  |
|  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  |
|  xxxxxxxxx  xxxxxxxxxxxxxxxxxxxxxxxxxx  xxxxxxxxx  |
|  xxxxxxxxx  xxxxxxxxxxxxxxxxxxxxxxxxxx  xxxxxxxxx  |
|  x       x  x                        x  x       x  |
|  x linke x  x        Content         x  x rechtex  | umschließender
|  x  Nav  x  x                        x  x  Nav  x  | Container
|  x       x  x                        x  x       x  |
|  xxxxxxxxx  xxxxxxxxxxxxxxxxxxxxxxxxxx  xxxxxxxxx  |
|  xxxxxxxxx  xxxxxxxxxxxxxxxxxxxxxxxxxx  xxxxxxxxx  |
|  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  |
|  xxxxxx               Footer               xxxxxx  |
|  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  |
------------------------------------------------------

Zum Positionieren: Wenn ich die Blöcke relativ positioniere, dann brauche ich ja Floats, damit am Ende das gewünschte Ergebnis erscheint. Jedoch ist dann das Problem, dass innerhalb des Contents kein clear auftauchen darf, da es sonst erst unterhalb der Navigation weitergegehen würde.

Dann kam ich auf die Idee, die Navigationselemente absolut zu positionieren. Das Problem hierbei ist, dass man dann alle Elemente bis zum html absolut positionieren muss, da sonst die rechte Navigation nach dem Bildschirm und nicht nach dem umschließenden Container ausgerichtet wird.

Jetzt kommt aber das Problem, dass durch die absolute Positionierung alle Elemente ihre Breite verlieren. Ein width:100% kann ich nicht setzen, da dann die rechte Navigation einen überbreiten Content überdecken würden, ein min-width:100% wird aber von FF und IE falsch interpretiert:
Statt gefloatete Elemente nebeneinander zu positionieren, werden diese untereinander dargestellt.

Gibt es eigentlich einen Ansatz, der ohne "Nebenwirkungen" ist?

Zusatz: Es wäre schön (aber nicht essentiell notwendig), wenn links und rechts am Bildschirm 15px Rand sein könnten. Bei relativer Positionierung ist dies ja kein Problem, aber absolute...

Vielen Dank und schöne Grüße
  devius

  1. Mist, verklickt, sollte eher in den Bereich CSS eingeordnet werden. Wie kann man das im Nachhinein korrigieren?

    1. Hi,

      Mist, verklickt, sollte eher in den Bereich CSS eingeordnet werden. Wie kann man das im Nachhinein korrigieren?

      Vorschau nutzen.

      MfG ChrisB

  2. Hi!

    ich habe eine Seite mit folgendem dreispaltigen Layout.

    Unglaublich neues Layout. ;)

    Zum Positionieren: Wenn ich die Blöcke relativ positioniere, dann brauche ich ja Floats, damit am Ende das gewünschte Ergebnis erscheint. Jedoch ist dann das Problem, dass innerhalb des Contents kein clear auftauchen darf, da es sonst erst unterhalb der Navigation weitergegehen würde.

    Hae??

    Dann kam ich auf die Idee, die Navigationselemente absolut zu positionieren. Das Problem hierbei ist, dass man dann alle Elemente bis zum html absolut positionieren muss, da sonst die rechte Navigation nach dem Bildschirm und nicht nach dem umschließenden Container ausgerichtet wird.

    Nochmal: Hae???

    Jetzt kommt aber das Problem, dass durch die absolute Positionierung alle Elemente ihre Breite verlieren. Ein width:100% kann ich nicht setzen, da dann die rechte Navigation einen überbreiten Content überdecken würden, ein min-width:100% wird aber von FF und IE falsch interpretiert:

    und wieder: Hae????
    Was sollte denn der FF da falsch interpretieren? Du interpretierst da hoechstens was falsch... Der IE koennte damit allerdings wirklich Problemehaben.

    Statt gefloatete Elemente nebeneinander zu positionieren, werden diese untereinander dargestellt.

    Langsam sollte ich mir n neues Wort ausdenken: Hae?????

    Gibt es eigentlich einen Ansatz, der ohne "Nebenwirkungen" ist?

    Ja. CSS mit floaten.

    Zusatz: Es wäre schön (aber nicht essentiell notwendig), wenn links und rechts am Bildschirm 15px Rand sein könnten. Bei relativer Positionierung ist dies ja kein Problem, aber absolute...

    Diesmal spar ich mir das hae.... (mir gehen auch die Fragezeichen aus :D)

    Schau mal hier. http://www.intensivstation.ch/templates/ Da gibts auch Dein Layout (was wunder), mit wundernetten Erklaerungen. Alles toll in CSS und Nebenwirkungsfrei. (soweit ich deinen wunsch richtig verstanden habe)

    1. Halloele.

      Hab meinen Senf grad nochmal gelesen und finde er kommt vielleicht etwas boese rueber. Nimm die ganzen Haes nicht schwer. sie sollten dich nur dazu bringen, dich mal zu i nformieren (SELFHTML laesst gruessen) Ich habe auch keine Erklaerungen zu allen Dingen geschrieben, die Du komisch dargestellt hast. Ich denke du solltes schon rausfinden koennen, wo deine fehler liegen.

      Ich moechte nicht mit Wachsmalern und Handpuppen erklaeren, was Du vielleicht schon ganz gut weisst.

      Solltest Du Fragen zu einem oder mehreren meiner freundlichen kleinen 'Haes' haben: Immer her damit. *Wachsmaler und Handpuppen such*

  3. Moin,

    Dann kam ich auf die Idee, die Navigationselemente absolut zu positionieren. Das Problem hierbei ist, dass man dann alle Elemente bis zum html absolut positionieren muss, da sonst die rechte Navigation nach dem Bildschirm und nicht nach dem umschließenden Container ausgerichtet wird.

    Nein, nicht absolut. Es reicht, dem Element, an dem sich die Elemente ausrichten sollen, position:relative zu geben.

    Gibt es eigentlich einen Ansatz, der ohne "Nebenwirkungen" ist?

    Ganz ohne Nebenwirkungen: Nein. Jeder Ansatz hat Vor- und Nachteile. Als großen Nachteil bei dreispaltigen Float-Layouts kann man z.B. die falsche Reihenfolge (Links - Rechts - Mitte) sehen...

    Es gab zwei Wochen mal eine ähnliche Frage: http://forum.de.selfhtml.org/archiv/2008/1/t165880/#m1081585. Die beiden Dateien mit meinem Lösungsvorschlag sind noch online.

    Zusatz: Es wäre schön (aber nicht essentiell notwendig), wenn links und rechts am Bildschirm 15px Rand sein könnten. Bei relativer Positionierung ist dies ja kein Problem, aber absolute...

    Mit

    body { margin:15px };

    sollte das doch zu erreichen sein?

    Gruß

    Stareagle