Henning: Wo sind die CSS-Cracks?

Hallo,

da meine Frage von gestern ins Nirvana irgendwo zwischen Forum und Archiv verschwunden ist, frage ich nochmal.

Eine Herausforderung für alle CSS-Layouter. Mit einem Table Layout kriegt man es hin, aber wie mit CSS-Layout.

http://www.feuerwehr-timmerlah.de/test.html

Ich habe die klassische Struktur. Oben Banner, Links Navi und Mitte Inhalt. Das knifflige ist nun, dass das ganze in einem mittig im Browser  zentriert wird mit variablem Abstand zum body und das Inhaltsdiv hat overflow:scroll. Nur kriege ich es einfach nicht hin, dass das Inhaltsdiv richtig positioniert wird. Es rutscht unter die Navi und sprengt das Eltern-Div.

Wie löst man das Problem?

Im Voraus Danke für alle Lösungen, Hilfen und Denkanstöße.

Gruß,
Henning

  1. Hallo Henning,

    in deinen CSS-Abgaben sind noch eine ganze Reihe von Unstimmigkeiten. Schau dir am besten noch mal das genaue Zusammenspiel von position, overflow, float, clear, width und height an.

    http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm

    Unter http://www.einfach-fuer-alle.de/seite03_2333.html gibt es eine Reihe von Standard-Layout-Strukturen (unter anderem auch den Zwei-Spalter mir Kopf) zum anschauen, nachbauen oder modifizieren.

    Gruß
    Paul

  2. Wie löst man das Problem?

    ... das musst du schon selber ;)

    Im Voraus Danke für alle Lösungen, Hilfen und Denkanstöße.

    denkanstoß: "position: absolute" bedeutet, dass die position am elternelement orientiert ist. stellt man dein "inhalt"-div irgendwo in den <body> wird er sich daran orientieren. wenn du allerdings anfängst mit geschachtelten divs zu arbeiten, wirst du ans ziel kommen.
    ferner ist es sehr ratsam mit <span> in kombination mit <div>s zu arbeiten.

    viel erfolg,
    mcmoe

    1. denkanstoß: "position: absolute" bedeutet, dass die position am elternelement orientiert ist. stellt man dein "inhalt"-div irgendwo in den <body> wird er sich daran orientieren. wenn du allerdings anfängst mit geschachtelten divs zu arbeiten, wirst du ans ziel kommen.
      ferner ist es sehr ratsam mit <span> in kombination mit <div>s zu arbeiten.

      Ich habe es schon mit position:absolute für #inhalt ausprobiert. Bei top=0 und left=0, müsste er an der linken oberen Ecke von #haupt sein, allerdings ist die linke obere Ecke am Nullpunkt des Body.

      Gruß,
      Henning

  3. Ich habe das ganze noch mal überarbeitet und jetzt nur noch ein kleines Problem. Wie kriege ich es hin, dass der linke Navi Balken genau so hoch ist wie das umgebende div. Bei ca. 1024*768 Browserfenster klappts aber sonst ist es zu kurz oder zu lang (letzteres passiert scheinbar nicht im IE).
    http://www.feuerwehr-timmerlah.de/test.html

    Gruß,
    Henning