|
|||
Schwierige Umsetzung einer Navigation
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 |
Sponsored Links |
Sponsored Links |
|
||||
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.) Geändert von heiko_rs (30.09.2008 um 19:48 Uhr) |
|
||||
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.) |
|
|||
Zitat:
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. |
|
|||
Zitat:
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.) |
Sponsored Links |
|
|||
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 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit Navigation | safari | CSS | 12 | 20.04.2011 11:11 |
Float-Problem? | mischaef | CSS | 33 | 20.10.2010 16:20 |
Problem mit FlyOut Menu im IE7 | quarki69 | CSS | 5 | 15.03.2010 15:46 |
Javascript UL Navigation im IE6 | ven | CSS | 7 | 29.04.2008 15:29 |
Container mit 2 Container darin -> Hintergrund anzeigen | bendar | CSS | 4 | 05.04.2005 18:18 |