CSS-Layout Height 100%

[Adriaan]

Bitte den Beitrag löschen.

[sejuma]

Es ist zunächst sehr positiv, dass du vom Tabellenlayout weg kommst.
Schlecht ist es jedoch, wenn du das Tabellenlayout durch "Div-Layout" ersetzt, wie es dem Quelltext nach der Fall ist.
Das führt zu unnötig vielen Divs, was man als "Div-Suppe" bezeichnet.

So verwendet man für die Links z.B. keine einzelnen Divs, sondern eine ul-Liste.
Deine ganzen absoluten Positionierungen sind "absolut" unnötig und führen zu Problemen.
In den allermeisten Fällen positioniert man lediglich mit float- und margin-Angaben.

CSS-Blockelemente haben den Vorteil, dass sich ihre Höhe dem Inhalt anpasst, so dass bereits dadurch eine große Flexibilität gegeben ist.

Dein Problem ließe sich u.a. lösen, indem du #inhalt noch ein "overflow: auto;" zuweist. Aber warum soll die Seite denn unbedingt 100% Höhe haben? Man kann doch auch mit der browserseitigen Scrollbar scrollen.

Ich würde dir folgendes empfehlen:
Befasse dich zunächst eingehend mit HTML und seinen Elementen. So kannst du für die Überschriften h1 bis h6, für die Navi ul und für größere Bereiche eben auch Divs verwenden.
Baue mit einem Grundgerüst auf, das eine horizontal zentrierte Seite hat und setze darein die einzelnen Elemente ohne absolute Positionierungen.
Siehe z.B. http://www.ohne-css.gehts-gar.net/0001.php
je weniger Elemente du benötigst, um so übersichtlicher wird alles.
Diese kannst du dann per CSS formatieren und positionieren.
Falls die Seite unbedingt 100% Höhe haben soll, dann könnte dies hilfreich sein, allerdings ist dies schon eher was für Fortgeschrittene: http://www.ohne-css.gehts-gar.net/0025.php

Hinsichtlich der navigation findest du hier zahlreiche Beispiele: http://css.maxdesign.com.au/listamatic/

Auch wenn der Weg am Anfang schwer erscheint: Es ist wie überall im Leben: Wenn man was gelernt hat, fällt vieles leichter und wird irgendwann zur Routine.

[Adriaan]

Bitte den Beitrag löschen.

[sejuma]

Sieht schon wesentlich besser aus. Die Navi wird später dann ja wohl noch mit Links gefüllt.

Füge mal noch folgendes in deine CSS-Datei ein:

Code: Alles auswählen

img {
display: block;
border: none;
}

Erklärung: http://www.ohne-css.gehts-gar.net/0009.php

Im IE 7 ist die navi auch noch treppenförmig angeordnet.

Ersetze deshalb

Code: Alles auswählen

ul#navigation img
{
border:                     none;
float:                     left;
}

durch

Code: Alles auswählen

ul#navigation li {
float: left;
}

[Adriaan]

Dankeschön funktioniert nun alles super bei mir !!! top