[DIEBABS]

Hallo Leute!

Vielleicht kann mir ja jemand in diesem Forum helfen!!!!!!!!
Habe versucht über Suchfunktionen eine Lösung meines Problems zu finden, leider konnte mir kein Tut noch andere Lösungsvorschläge im Forum weiterhelfen.

Ich möchte ein Horizontales DropDown menü erstellen, es funkt in den Grunddingen ja auch, leider aber nicht in den Kleinigkeiten.
Das Untermenü sollte horizontal aber unter dem Hauptmenü erscheinen!
Hier mein Template und das css, sowie 3 Screenshots wie es aussieht und wie es aussehen soll. Vielleicht kann mir jemand meine Blockade wegmachen. DANKE schon im Voraus!


Template:
MENUE = HMENU
MENUE {
wrap = <div id="nav"> | </div>
1=TMENU
1.wrap = <ul> | </ul>
1.NO.wrapItemAndSub = <li> | </li>
2=TMENU
2.wrap = <ul> | </ul>
2.NO.wrapItemAndSub = <li> | </li>
}

CSS:
#nav {
font-family: Verdana, sans-serif;
text-decoration: none;
font-variant: small-caps;
}

#nav ul{
padding-left: 0;
margin-left: 0;
}

#nav ul li {
list-style-type: none;
}

#nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
float: left;
padding: 10px;
font-size: 18px;
}

#nav ul li li a {
text-decoration: none;
color: blue;
font-weight: normal;
float: left;
padding: 10px;
font-size: 16px;
}

[micha182]

Hi,

sorry, aber ich verstehe nicht ganz wie es aussehen soll. So?

Menüpunkt 1 Menüpunkt2 .....
Untermenü1
Untermenü2
...

Und das Problem momentan ist, dass die Untermenüeinträge nebeneinander erscheinen und nicht untereinander?

Ich persönlich würde die Listen rauslassen und stattdessen simple breaks, also <br /> benutzen. Vielleicht hilft dir das ja schon weiter.

Gruß, Micha

[DIEBABS]

Danke für Deine Antwort,

es soll so aussehen wie im letzten Bild ersichtlich.
D. H . zuerst nur das horizontale Menü in weiß und wenn man zum untermenü kommt (blau) soll dieses darunter zu sehen sein.

lg

[micha182]

Ah okay, jetzt verstehe ich. Ich möchte jetzt nicht wild an deinem CSS rumschrauben etc... deshalb mal nur ein kurzer Denkanstoß, der zum Erfolg führen sollte..

Du hast eine gewisse Breite der Seite, sagen wir 800px;
Nun dfinierst du einen Container "menu" z.B. mit float left und breite 800px und wrapst damit das erste Menülevel.
Einen zweiten Container "submenu" definierst du ebenfalls mit float left und beliebiger Breite. Mit diesem wrapst du das zweite Menülevel.

Meiner Meinung nach sollte dann das Untermenü aufegrufen werden und unter dem bestehenden angesetzt werden. Feinheiten wie Ausrichtung und so musst du dir nach Belieben einfügen.

Gruß - Micha

[DIEBABS]

hallo nochmals,

also liegts doch am css. ich bin absolut schwach in dem bereich. habe jetzt versucht die änderungen vorzunehmen, klappt aber nicht.

MENUE = HMENU
MENUE {
wrap = <div id="nav"> | </div>
1=TMENU
1.wrap = <ul><div id="menu"> |</div> </ul>
1.NO.wrapItemAndSub = <li> | </li>
2=TMENU
2.wrap = <ul><div id="submenu"> |</div> </ul>
2.NO.wrapItemAndSub = <li> | </li>
}
IMPRESSUM = HMENU
IMPRESSUM {
special = list
special.value = 9
1=TMENU
1.NO.allWrap = <li class="impress">|</li>
}


wenn ich aber jetzt im css arbeite tut sich nicht besonderes viel! nur im Hauptmenü, nicht im Untermenü.

HILFE!

[micha182]

Hi,

kein Problem, probiers mal so:

MENUE = HMENU
MENUE {
wrap = <div id="nav"> | </div>
1=TMENU
1.wrap = <div id="menu">|</div>
2=TMENU
2.wrap = <div id="submenu">|</div>
}

Gruß, Micha

[DIEBABS]

hey!

wie soll das css aussehen? das ist mein eigentliches problem!

lg
babs

[micha182]

hey,

glaube ich nicht aber probier doch einfach zunächst mal, die div-angaben direkt im wrap anzugeben..

zuerst würde ich einfach nur <div>|</div> probieren. im normalfoll sollte das untermenü dann schon in dem seperaten div angezeigt werden.

tut mir leid, wenn ich da nicht konkreter werden kann, aber ich löse dein vorhaben in der regel anders..

gruß, micha

[ttb]

Moin,

@micha182
die Liste passt schon. Stichwort semantische Textauszeichnung!

Zum Thema:
Mal bei selfhtml vorbeischauen:
-> SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten
anstatt display: block; ist display: inline; an den entsprechenden Stellen dein Freund.

[DIEBABS]

hallo!

Danke. Jetzt hab ich es schon fast so wie ich es gerne hätte. In der Anlage siehst Du den aktuellen Screenshot. Leider stellen sich die Untermenüpunkte übereinander. Und ich finde einfach den Fehler nicht.

hier das css:
#nav {font-family: Verdana, sans-serif;
text-decoration: none;
font-variant: small-caps;
margin-top: 80px;
}


#nav ul{
padding-left: 0;
margin-left: 0;
}

#nav ul li {
list-style-type: none;
display: inline;
float: left;
position: relative;
}

#nav ul li a {
text-decoration: none;
color: white;
font-weight: bold;
padding: 10px;
font-size: 18px;
}

#nav ul li li {
float: left;
Position: absolute;
margin-top: 20px;
}

#nav ul li li a {
text-decoration: none;
color: blue;
font-weight: bold;
font-size: 16px;
padding: 10px;
}

danke!