Einen schönen Tag wünsche ich euch. *indierundewink*

Mein Ziel: ein schwarzer Balken, der vom linken bis zum rechten Rand verläuft und zwar ohne Lücke zu den Rändern. Darüber soll ein Menü mit relativ vielen Auswahlpunkten liegen. Ich möchte dabei mit Ebenen arbeiten und es soll mit den neueren Versionen von IE und Netscape vernünftig aussehen.

Prinzipiell habe ich das schon erreicht, allerdings traten dann bei verkleinertem Browserfenster Probleme auf, und bei den Versuchen, es vielleicht noch anders zu lösen, stellten sich neue Probleme. Mir fallen nun einfach keine Stichpunkte mehr ein, unter denen ich noch einmal nachlesen könnte. Vielleicht könnt ihr mir dabei helfen. Ich versuche mal, meine bisherigen Schritte aufzuzeigen, vielleicht stecken da ja auch noch eine Reihe an Denkfehlern drin. Gar so fit bin ich im Umgang mit CSS nämlich (leider) noch nicht.

Erst einmal habe ich den schwarzen Balken und den Text auf getrennte Ebenen gelegt. Den Balken stellte ich mit width auf 100% ein. Der Netscape zog ihn korrekt von Rand bis Rand, der IE ließ rechts einen Abstand. Also legte ich einfach noch einen Balken an, der vom rechten Bildschrimrand (right:0px) starten sollte, so dass auch der IE das Richtige anzeigte. War das zu umständlich?

Was mich nun total verwunderte war, dass sich die 100% Breite auf die ursprüngliche Browsergröße einstellen, so dass der schwarze Balken bei notwendigem Quer-Scrollen nicht mitwächst. Ich hätte erwartet, dass sich die 100% jeweils an die benötigte Fläche anpassen. Dieser Effekt ist ziemlich ärgerlich. Gibt es da irgendeine Lösung oder habe ich halt Pech gehabt?

Meine nächste Überlegung war dann, dass ich halt nur die Menüebene nehme und diese schwarz hinterlege. Das funktioniert mit dem IE, aber nicht mit Netscape. Netscape zeigt die Schrift zwar bis zum Ende an (Ich habe white-space:nowrap angegeben, damit die Menüpunkte nicht umgebrochen werden.), hinterlegt jedoch nur bis zum ursprünglichen Rand.

Dazu kommt:

1. Der Text wird nicht mittig im Balken positioniert (Wieso nicht?) und padding-top wird wiederum von beiden Browsern unterschiedlich interpretiert.

2. Ich möchte, dass der Text des Menüs nicht direkt am linken Rand beginnt, sondern eingerückt wird. Mit einer Angabe für padding-left erreiche ich das zwar, gleichzeitig wird aber auch der gesamte Balken in die Breite gezogen, was ich nicht verstehe. Bei der Angabe padding soll doch der Inhalt zur Elementgrenze hin definiert werden, so dass ich die Elementgrenze als starre Größe erwarten würde. Das ärgerliche daran ist, dass ich dann immer einen Scrollbaen habe, selbst wenn er gar nicht nötig ist.

Über Rückmeldungen würde ich mich auf jeden Fall sehr freuen. Vielleicht habe ich ja auch einfach nur in die völlig falsche Richtung gedacht?

Grüße,
Conny