Hallo Felix,
Ich habe auf deinem Anfang aufgebaut und die Seite, soweit mir möglich, mit css formatiert. Hab heute eine ganze Menge über css dazugelernt ;) aber trotzdem komme ich am ende genau zu dem Problem, das mich auch dazu bewegt hat die Seite mit einer Tabelle zu formatieren. Aber dazu später mehr. Erstmal habe ich zwei Fragen zu deinem Code:
#inhalt {
border: 1px solid transparent;
border-right: none;
margin: 0px 0px 0px 200px;
padding: 0px 36px 0px 0px;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/2.jpg) right top no-repeat;
}
Warum ziehst du eine unsichtbare Linie um den Inhaltsbereich? Die sorgt nämlich im Firefox für Probleme, da dann das Hintergrundbild an der Stelle abgeschnitten wird und der "Untergrund" durchguckt.
Ich hab die Linie entfernt, was dazu führte, dass das Hintergrundbild etwa um die Hälfte seiner Höhe nach unten verschoben wurde. Sowohl bei FF als auch beim IE. Um das zu verhindern, musste ich das padding wie folgt ändern...
padding: 1px 36px 1px 1px;
Und noch eine Frage hierzu:
#navi ul {
position: relative;
top: -40px;
margin: 40px 0px 0px 0px;
padding: 2px 41px 0px 5px;
list-style: none;
background: url(http://www.mtv-borsum.de/ogrein/images/layout/3.jpg) right repeat-y;
}
Warum gehst du mit der Position erst um 40 nach oben und dann mit margin wieder nach unten? Ich hab das einfach mal durch ein "margin: 0px;" ersetzt;)
Und nun zu meinem Problem. Wenn du dir die Seite ansiehst(http://www.mtv-borsum.de/ogrein/test.htm), wirst du feststellen, dass sie unten etwas zerzaust aussieht. Und vor allem, dass sie über die Anzeigefläche hinausgeht, obwohl sie theoretisch keinen Inhalt hat, der das fordert. Das ist auch der Grund, warum ich es mit einer tabelle machen wollte. die kann man nämlich, auch wenn es nicht konform ist, mit height="100%" auf die Seitenhöhe einstellen.
Jetzt sorgt die höhenangabe in der navigation von 100% dafür, dass zusätzlich zum header noch einmal die komplette ansichtshöhe als navigation hinzukommt. Schön wäre es ja, wenn eine Angabe wie <div sytle="height:100% -90px;">
möglich wäre. Wobei 90px der Höhe des headers entspricht.
Der Footer (den ich schon überlegt habe rauszunehmen, geändert wird er aber auf jeden fall) wird leider auch von browser zu browser unterschiedlich angezeigt. und nie wirklich da, wo er hin soll, nämlich ans ende der seite bzw. ans an den unteren rand wenn der text auf der seite nur kurz ist.
Ich habe überlegt das ganze layout fixed zu machen, so das beim scrollen nur der inhalt mitscrollt. das sollte gehen, oder? aber irgendwie sträubt es mich dagegen.
Viele liebe grüße
Daniel