nicht angemeldet
Verschachtelte Menus und Inhalte
Hallo,
auf vielen Seiten gibt es eine Navigation, bestehend aus Menus und Submenus und machmal eben auch Subsub...menus.
Wenn ich diese nun mit CSS formatieren möchte, habe ich bis jetzt immer irgendwelche komlizierten Id-Namen wie #subsubmenu oder #menu2teEbene usw. verwendet.
Bei meinem jetzigen Projekt würde ich gerne die entsprechenden Elemente ineinander verschachteln, z.B. folgendermassen:
<div id="menu">
</div>
<div id="inhalt">
<div id="menu">
</div>
<div id="inhalt">
...usw.
</div>
</div>
Wenn ich das "Submenu" (ein Menu im Menu) anders formatiert haben möchte, würden die CSS folgendermassen aussehen:
#menu {color:#ff0000;}
#menu #menu{color:#ff00ff;}
Macht das Sinn? (Falls ja, würde es mit "Klassen" statt "Ids" mehr Sinn machen?)
Danke und Gruss
Adriana Mikolaskova Nautsch
-
Hallo,
auf vielen Seiten gibt es eine Navigation, bestehend aus Menus und Submenus und machmal eben auch Subsub...menus.
Wenn ich diese nun mit CSS formatieren möchte, habe ich bis jetzt immer irgendwelche komlizierten Id-Namen wie #subsubmenu oder #menu2teEbene usw. verwendet.
Bei meinem jetzigen Projekt würde ich gerne die entsprechenden Elemente ineinander verschachteln, z.B. folgendermassen:Wie wäre es so?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Menuestruktur</title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <style type="text/css"> <!-- ul#menu, ul#menu ul {margin:0; padding:0;} ul#menu li {margin:0; padding:0; list-style-type:none;} ul#menu li {color:#f00;} /*Hauptmenuepunkte*/ ul#menu ul li {color:#f0f;} /*Untermenuepunkte*/ ul#menu ul ul li {color:#f08;} /*Unteruntermenuepunkte*/ --> </style> </head> <body> <ul id="menu"> <li>Hauptmenuepunkt <ul> <li>Untermenuepunkt</li> <li>Untermenuepunkt <ul> <li>Unteruntermenuepunkt</li> <li>Unteruntermenuepunkt</li> <li>Unteruntermenuepunkt</li> </ul> </li> <li>Untermenuepunkt</li> </ul> </li> <li>Hauptmenuepunkt</li> <li>Hauptmenuepunkt</li> </ul> </body> </html>http://de.selfhtml.org/css/layouts/navigationsleisten.htm#definieren
viele Grüße
Axel
-
Hallo
Danke an Alle für die Antworten.
Menus, die unmittelbar ineinander verschachtelt sind, habe ich bisher auch mit ineinanderverschachtelten Listen erstellt. In meinem konkreten Projekt handelt es sich aber nicht um eine Navigation, bei der die Submenus direkt unter dem jeweiligen Menueintrag aufgelistet sind, sondern:
die Hauptnavigation ist im oberen Bereich der Seite und die dazugehörigen Submenus erscheinen in einem ganz anderen Bereich(z.B. jeweils rechts neben dem inhalt-Bereich).Deshalb der div-"Murks".(innerhalb des menu-div würde ich dann für die einzelnen Einträge eine eine Liste einsetzen)
Wenn ich nun auch in diesem Fall mit ineinanderverschachtelten Listen arbeite, bleibt mir nichts anderes übrig, als die untergeordneten Listen mit absoluter Positionierung zu plazieren. (?)
Oder habe ich da etwas nicht verstanden?
Gruss
Adriana Mikolaskova Nautsch
-
Hallo,
Wenn ich nun auch in diesem Fall mit ineinanderverschachtelten Listen arbeite, bleibt mir nichts anderes übrig, als die untergeordneten Listen mit absoluter Positionierung zu plazieren. (?)
Ja oder nein, genau wie bei ineinander verschachtelten DIVs. Du kannst UL-Elemente genau so positionieren, wie DIV-Elemente. Deine Argumentation ist also keine für DIV und gegen UL, weil für CSS kein Unterschied zwischen DIV und UL besteht. Gegen DIV spricht aber immer noch, dass es ein im HTML bedeutungsloses Element ist, also in Darstellungen, die ohne CSS auskommen müssen, nichts aussagt.
viele Grüße
Axel
-
Hallo,
Du kannst UL-Elemente genau so positionieren, wie DIV-Elemente. Deine Argumentation ist also keine für DIV und gegen UL, weil für CSS kein Unterschied zwischen DIV und UL besteht. Gegen DIV spricht aber immer noch, dass es ein im HTML bedeutungsloses Element ist, also in Darstellungen, die ohne CSS auskommen müssen, nichts aussagt.
...für css macht es keinen Unterschied ob DIV oder UL, ja. Aber es macht einen Unterschied, wie die HTML-Elemente ineinander verschachtelt sind oder aufeinander folgen.
Wie kann ich denn z.B. in Deinem Beispiel folgendes Erscheinungsbild:
im oberen der Seite befindet sich das Menu,horizontal angeordnet, im Mittelfeld links das Untermenu, welches rechts vom jeweiligen Inhalt umflossen wird?
Nur, indem ich die "Untermenu"-Liste absolut positioniere, oder?Und selbst wenn ich die "Untermenu"-Liste absolut dort positioniere, wo ich sie haben möchte (in einem ganz anderen Bereich der Seite als die "Menu"-Liste): wenn ich sie z.B. vom Content umfliessen lassen möchte, müsste ich diesen, im HTML-Code, in die Liste einfügen...:
<ul> <li> </li> <li> <ul> <li> </li> <li> </li> </ul> <div id="content" </div> </li> </ul>Gruss
Adriana Mikolaskova Nautsch
-
Hallo,
Wie kann ich denn z.B.
Wie ich sagte, das geht mit verschachtelten UL/LI genau so, wie mit verschachtelten DIV-Elementen.
In Deiner Ausgangsfrage war die Rede von verschachtelten DIV-Elementen zur Darstellung des Menüs. Mit diesen Elementen hast Du genau die selben Probleme, wie Du sie hier angeblich für UL/LI hast.
Formuliere eine konkrete Layoutvorstellung, das was Du bisher sagtest, ist zu schwammig. Poste ggf. Deine Lösung hierfür mit DIVs. Dann kann ich Dir zeigen, wie ich das machen würde.
viele Grüße
Axel
-
-
-
-
-
Hallo,
meiner Meinung nach sind zur Abbildung solcher verschachtelter Menüs UL-Listen am besten geeignet. Das mache ich nur noch so.
Meistens komme ich dabei mit einer einzigen ID für das Wurzelelement und ohne zusätzliche Klassen aus.
Du kannst ja auf Deine zweite Ebene ganz einfach zugreifen mit dem Selektor "ul#meinMenue ul" etc.
Hilft Dir das weiter?Ciao,
Andreas--
"Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design" eines großen Konzerns...) -
hi,
Macht das Sinn?
Nein - schon deshalb nicht, weil dein HTML-Code Murks ist.
Sinnlos Divs ineinander zu verschachteln, ist schlecht.
Nutze Elemente, die die _Struktur_ des Inhaltes passend repräsentieren können - für Menüs zum Beispiel Listen.Jede Menge schöne Beispiele findest du u.a. auf http://css.maxdesign.com.au/listamatic/
(Falls ja, würde es mit "Klassen" statt "Ids" mehr Sinn machen?)
Eher mit Nachfahren- bzw. Child-Selektoren.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hallo,
#menu {color:#ff0000;}
#menu #menu{color:#ff00ff;}> Macht das Sinn? Nein, es ist falsch, weil es in einem Dokument keine Elemente geben kann, welche die ID "menu" haben und sich wiederum in einem Element befinden, welches auch die ID "menu" hat. IDs sind dokumentweit \_eindeutige\_ identifier. > (Falls ja, würde es mit "Klassen" statt "Ids" mehr Sinn machen?) Es wäre richtiger. Allerdings ist für ein verschachteltes Menü die UL/LI-Struktur eindeutig vorzuziehen. viele Grüße Axel