Border bei 2. Ebene in Nav-Leiste senkrecht

[Felix Riesterer]

Liebe Selfer,

meine Menüzeile (vier <li>s waagrecht, also links gefloatet) klappt als zweite Menü-Ebene eine weitere, verschachtelte <ul> auf, deren <li>s dann senkrecht untereinander stehen. Diese zweite Menü-Ebene wollte ich mit einem Border umfangen, was mir aber nicht so recht gelingen mag.

Offensichtlich ist die tatsächliche Höhe der <ul> das Problem, denn einen Rahmen erkenne ich, nur umspannt er ein einziges <li>, anstatt alle zusammen. Wenn ich die Höhe der <ul> fest definiere, dann habe ich einen - wie auch immer dimensionierten - Rand, der sich aber leider immer noch nicht an die tatsächliche Größe der <ul> anpasst. Was habe ich denn nur übersehen?

Hier ist die Seite zum ansehen, und hier ist die dazugehörige CSS-Datei (inzwischen leider sehr unübersichtlich geworden).

Ich danke ganz herzlich für alle Hinweise, die mich der Lösung näher bringen, und natürlich auch für alle anderen Hinweise, die hilfreich sind.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[MudGuard]

Hi,

meine Menüzeile (vier <li>s waagrecht, also links gefloatet) klappt als zweite Menü-Ebene eine weitere, verschachtelte <ul> auf, deren <li>s dann senkrecht untereinander stehen. Diese zweite Menü-Ebene wollte ich mit einem Border umfangen, was mir aber nicht so recht gelingen mag.

floatende Elemente beeinflussen die Höhe ihres Elternelements nicht, sie sind ja aus dem Fluß genommen.

Wegen

.navigation li { display: block; float: left; width: 169px; border: 1px solid #c0c0c0; text-align: center; padding: 0; margin: 0; }

floaten ALLE li innerhalb von .navigation, egal wie tief geschachtelt.

Du müßtest hier

.navigation ul ul li { margin: 0; text-align: left; background: url(images/navbg.png) repeat-x bottom; border: none; }

angeben, daß Du kein float wünschst.

(ungetestet)

cu,
Andreas

[Felix Riesterer]

Lieber Andreas,

Wegen
.navigation li { display: block; float: left; width: 169px; border: 1px solid #c0c0c0; text-align: center; padding: 0; margin: 0; }
floaten ALLE li innerhalb von .navigation, egal wie tief geschachtelt.

Du müßtest hier
.navigation ul ul li { margin: 0; text-align: left; background: url(images/navbg.png) repeat-x bottom; border: none; }
angeben, daß Du kein float wünschst.

Nö, das habe ich mit "float:none" ausprobiert, aber ohne den gewünschten Erfolg. Auch ein "clear:both" nützt nix, egal ob in "ul ul" oder "ul ul li".

Vielen Dank für Deine Idee! Ich suche weiter...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[MudGuard]

Hi,

Wegen
.navigation li { display: block; float: left; width: 169px; border: 1px solid #c0c0c0; text-align: center; padding: 0; margin: 0; }
floaten ALLE li innerhalb von .navigation, egal wie tief geschachtelt.
Du müßtest hier
.navigation ul ul li { margin: 0; text-align: left; background: url(images/navbg.png) repeat-x bottom; border: none; }
angeben, daß Du kein float wünschst.

Nö, das habe ich mit "float:none" ausprobiert, aber ohne den gewünschten Erfolg. Auch ein "clear:both" nützt nix, egal ob in "ul ul" oder "ul ul li".

Dann könnte es ggf. das hier sein:

.navigation ul { display: block; width: 100%; height: 1.5em; margin: 0; padding: 0; font-size: 90%; font-family: Verdana, sans-serif; list-style-type: none; }
hier wird height für alle ul in .navigation au 1.5em gesetzt.

.navigation ul ul { font-size: 100.01%; display: none; width: 169px; padding: 0; margin: 3px 0 0 -3px; position: absolute; z-index: 9; border: solid 1px #c0c0c0; border-top: none; }

Hier wird nichts gegenteiliges gesagt ...

cu,
Andreas

[Felix Riesterer]

Lieber Andreas,

.navigation ul { display: block; width: 100%; height: 1.5em; margin: 0; padding: 0; font-size: 90%; font-family: Verdana, sans-serif; list-style-type: none; }
hier wird height für alle ul in .navigation au 1.5em gesetzt.

.navigation ul ul { font-size: 100.01%; display: none; width: 169px; padding: 0; margin: 3px 0 0 -3px; position: absolute; z-index: 9; border: solid 1px #c0c0c0; border-top: none; }

Hier wird nichts gegenteiliges gesagt ...

Ich Danke Dir von Herzen! Exakt DAS ist es, was ich so hartnäckig übersehen habe. Nun stimmt die Höhe. Jetzt muss ich nur noch an der Breite schrauben, damit der Rand nicht überdeckt wird.

Wunderbar! Ich danke Dir!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Zeromancer]

Hallo Felix,

meine Menüzeile (vier <li>s waagrecht, also links gefloatet) klappt als zweite Menü-Ebene eine weitere, verschachtelte <ul> auf, deren <li>s dann senkrecht untereinander stehen.

bevor ich mit meinem Mauszeiger auf den ausgeklappten Teilen bin, ist die Navi schon wieder zugeklappt. Man muss "verdammt" schnell sein, um navigieren zu können.

Mit freundlichen Grüßen

André

[Felix Riesterer]

Lieber André,

bevor ich mit meinem Mauszeiger auf den ausgeklappten Teilen bin, ist die Navi schon wieder zugeklappt. Man muss "verdammt" schnell sein, um navigieren zu können.

Das passiert im IE manchmal. Ja. Ich arbeite bereits daran. Dieses Problem wird dadurch "vermieden", dass man den aufklappenden Teil höher positioniert. Dadurch verlässt man dann das Elternelement mit der Maus nicht mehr, wenn man auf die aufgeklappten Links möchte. Aber die Anpassung an die diversen Browser findet gerade noch statt!

Trotzdem Danke für den Einwand!

Liebe Grüße aus Ellwangen,

Felix Riesterer.