Hallo Leute

Ich habe ein Problem bei der Umsetzung einer Navigation. Es ist ein horizontales Menü mit 6 Menüpunkten. Die Punkte 1 bis 5 sind Text-Links, der 6. Punkt ist eine verlinkte Grafik.

Es ist eine simple HTML-Liste. Den Listenpunkten gebe ich ein float:left. Da das Menü skalierbar sein soll, sich also anpassen soll auch wenn ich im Browser eine grössere Schrift wähle, habe ich die Schriftgrösse und den Innenabstand der Links in em definiert.

Ein Beispiel seht ihr hier. Soweit, so gut.

Nun gibt es jedoch zwei Dinge, die ich einfach nicht hinbekomme. Das erste Problem: Wenn ich die Schrift im Browser vergrössere, entsteht beim Menüpunkt mit der Grafik am unteren Rand eine unschöne Lücke.



Das zweite Problem ist noch wesentlich kniffliger. Aus der Seite folgen unter dem Menü noch weitere Elemente. Im Beispiel seht ihr einen Textblock. Alle Elemente einschliesslich der Navigation sollen die gleiche Breite haben - egal wie gross die Schrift ist. Ich habe das mal so gelöst, dass ich dem Body ebenfalls eine Breite in em gegeben habe. Aber wie bekomme ich nun die Menüpunkte gleichmässig auf diese Breite verteilt?

Hat irgendjemand von euch eine Idee wie ich diese beiden Probleme lösen kann?

Für Tipps wäre ich sehr dankbar.

Gruss

Das erste Problem kannst du ganz leicht beheben:

Beim zweiten Problem überlege ich noch, aber ich glaub´, dass sich das ohne weiteres nicht lösen lässt.

height aber bitte nicht in px Falls es ohne height & Deko-Grafik im Markup sein soll: Für den letzten Punkt normalen Text, und dann text-indent: -9999px; und die Grafik als HG. Der Text ist dann noch da (nur verschoben) und erzeugt die Höhe. Für Gecko dann die outline entfernen (normalerweise reicht font-size: 0;, aber das geht hier ja gerade nicht).

Für volle Funktionalität auch bei deakt. Grafiken siehe "Gilder/Levin": http://meiert.com/de/publications/articles/20050513/ (mühsam ohne height-Deklaration, aber möglich).

Und zu Problem 2: Einfach rechnen, die Gesamtbreite ist ja bekannt.

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Und ich versteh´ bis heute nicht, warum kann mir das mal bitte jemand erklären?

Wenn man den Text vergrößert, läuft er über

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Dank für den Tipp.

Dem Link eine Höhe zu geben habe ich auch schon probiert. Das funktioniert ja eigentlich nur zerschiesst der IE 6 aufgrund dessen gleich das ganze Menü, weil er die Menüpunkte (aufgrund der fehlenden Breitenangabe) so breit macht wie das Layout.

Dank, probiere ich gleich mal aus.

Jein, die Gesamtbreite kann eben variieren, weil ich sie ja relativ angeben muss. Wenn ich sie absolut definiere, z.B. in Pixel, dann hat der Text in den Menüpunkten beim Vergrössern keinen Platz mehr.

Und was hindert dich, sie ebenso "relativ" anzugeben, wie die Gesamtbreite?

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Eben.

Wie gesagt, rechnen.

__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Herrschaften, manchmal ist man wirklich so fixiert auf einen Ansatz! Ich habe die ganze Zeit in eine völlig andere Richtung gesucht, bei der sich die Menüpunkte automatisch auf die Breite verteilen - statt auf die Idee zu kommen, die jeweiligen Breiten in em auszurechnen.

Danke für die Tipps! Ich glaube, ihr habt meinen Abend gerettet