|
|||
Sitemap Level 1 vertikal, Level 2 horizontal
Hallo,
ich bastel an einer Sitemap und die soll am Schluss so aussehen: Hauptmenu1 Hauptmenu2 Untermenu1 - Untermenu2 - Untermenu3 Hauptmenu3 Untermenu1 - Untermenu2 etc... Ich arbeite mit einem CMS, also Framework. Der XHTML-Code sieht so aus (gekürzt): Code:
<div class="mod_sitemap block" id="footmenu"> <ul class="level_1"> <li><a href="hauptmenu1.html">Hauptmenu1</a></li> <li class="submenu"><a href="hauptmenu2.html">Hauptmenu2</a> <ul class="level_2"> <li><a href="untemenu1.html">Untemenu1</a></li> <li><a href="untemenu2.html">Unternemu2</a></li> <li><a href="untemenu3.html">Unternemu3</a></li> </ul> </li> <li class="submenu"><a href="hauptmenu3.html">Hauptmenu3</a> <ul class="level_2"> <li><a href="untemenu1.html">Untemenu1</a></li> <li><a href="untemenu2.html">Unternemu2</a></li> </ul> </li> </ul> </div> Code:
#footmenu{width:1000px;} #footmenu ul.level_1{display:block;} #footmenu ul.level_2{display:inline;} #footmenu ul.level_2 li{float:left;} #footmenu .level_1 li{width:120px;font-weight:bold;} #footmenu .level_2 li{font-weight:normal;} Grüsse, Alphi |
Sponsored Links |
|
|||
Hallo alphi,
dein Code reicht bei weitem nicht aus (Typolight?). Ich empfehle Dir, die Beispiellinks in der Klappmenü - FaQ zu verfolgen und dort die Funktionsweise der Menüs nachzuvollziehen. Ansonsten ist ein Online-Beispiel (testcase) unverzichtbar. Es ginge ja eine statische Testseite mit dem entsprechenden CSS im Header.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
Hallo andir
danke für deine Antwort. Ja, Typolight hast du richtig erkannt. Ich möchte keine Dropdownmenüs oder Flyout-menüs etc. Ich wollte lediglich eine statische Darstellung in dieser Form: Hauptmenu1......UM1..UM2..UM3 Hauptmenu2......UM1..UM2 Dank deiner Antwort bin ich fast soweit gekommen, dass ich meine Lösung hätte brauchen können. Ich habe statt der ID den Klassen-Namen genommen und nun läufts fast. Nachstehend seht ihr den gesamten Testcase. Das einzige, was mich noch stört ist das float:right, das ich bei den Untermenüs habe definieren müssen. Die Ansicht wird so nämlich so: Hauptmenu1........................................ ...UM3..UM2..UM1 Hauptmenu2........................................ ...........UM2..UM1 Man beachte die Reihenfolge der Untermenüs und natürlich das right-align. Geht nicht wirklich! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de"> <head> <title>Test Sitemap</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="index,follow" /> <style type="text/css" media="screen"> <!--/*--><![CDATA[/*><!--*/ #wrapper { width:1000px; margin:0 auto; } #footmenu{width:1000px;} .mod_sitemap ul.level_1{display:block;} .mod_sitemap ul.level_2{display:inline;} .mod_sitemap ul.level_2 li{float:right;} .mod_sitemap .level_1 li{font-weight:bold;padding-right:30px;} .mod_sitemap .level_2 li{font-weight:normal;} .mod_sitemap .level_3 li,.mod_sitemap .level_4 li{display:none;font-size:0px;line-height:0px;} .mod_sitemap a{text-decoration:none;} .mod_sitemap a:hover{text-decoration:underline;} /*]]>*/--> </style> </head> <body id="top"> <div id="wrapper"> <div class="mod_sitemap block" id="footmenu"> <ul class="level_1"> <li><a href="hauptmenu1.html">Hauptmenu1</a></li> <li class="submenu"><a href="hauptmenu2.html">Hauptmenu2</a> <ul class="level_2"> <li><a href="untemenu1.html">Untemenu1</a></li> <li><a href="untemenu2.html">Unternemu2</a></li> <li><a href="untemenu3.html">Unternemu3</a></li> </ul> </li> <li class="submenu"><a href="hauptmenu3.html">Hauptmenu3</a> <ul class="level_2"> <li><a href="untemenu1.html">Untemenu1</a></li> <li><a href="untemenu2.html">Unternemu2</a></li> </ul> </li> </ul> </div> </div> Grüsse Alphi |
|
|||
Sorry, dass ich mich erst jetzt melde, ich hatte den Thread vollkommen vergessen. Wenn Du richtig verschachtelt hättest, wärst Du mit einfachster Auszeichnung ausgekommen so wie in meinem Beispiel. Ich habe es doch richtig interpretiert?
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de"> <head> <title>Test Sitemap</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="robots" content="index,follow" /> <style type="text/css" media="screen"> <!--/*--><![CDATA[/*><!--*/ #wrapper { width:1000px; margin:0 auto; } #footmenu{width:1000px;} .mod_sitemap ul.level_1 {display: block; width: auto; background-color: orange;} .mod_sitemap ul.level_2 { display:inline; background-color: #999;} .mod_sitemap .level_1 li { display: inline; padding-right:30px;} .mod_sitemap .level_2 li {display: inline; font-weight:normal;} .mod_sitemap a{text-decoration:none;} .mod_sitemap a:hover{text-decoration:underline;} /*]]>*/--> </style> </head> <body id="top"> <div id="wrapper"> <div class="mod_sitemap" id="footmenu"> <ul class="level_1"><li><a href="hauptmenu1.html">Hauptmenu1</a></li></ul> <ul class="level_1"> <li class="submenu"><a href="hauptmenu2.html">Hauptmenu2</a> <ul class="level_2"> <li><a href="untemenu1.html">Untermenu1</a></li><li><a href="untemenu2.html">Unternemu2</a></li><li><a href="untemenu3.html">Unternemu3</a></li></ul> </li></ul> <ul class="level_1"> <li class="submenu"><a href="hauptmenu3.html">Hauptmenu3</a> <ul class="level_2"> <li><a href="untemenu1.html">Untemenu1</a></li> <li><a href="untemenu2.html">Unternemu2</a></li> </ul> </li> </ul> </div> </div></body></html>
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte Geändert von andir (12.10.2009 um 17:04 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
CSS-Seite horizontal und vertikal zentrieren! | Boof | CSS | 20 | 05.02.2010 13:23 |
Hintergrundbild vertikal UND horizontal zentrieren? | yggdrasil | CSS | 3 | 06.07.2008 11:19 |
Tabellenloses Layout - Horizontal 100% vertikal zentriert. Probleme :( | strohy | CSS | 8 | 23.02.2007 09:59 |
container horizontal und vertikal zentrieren | forumwurm | CSS | 11 | 30.08.2004 17:30 |
Bild horizontal und vertikal zentrieren | Anonymous | CSS | 10 | 18.06.2003 12:20 |