zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Sitemap Level 1 vertikal, Level 2 horizontal

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.10.2009, 13:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.10.2009
Beiträge: 2
alphi befindet sich auf einem aufstrebenden Ast
Standard 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>
Und das dazugehörige CSS:

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;}
Seit Stunden bastel ich schon an dieser Ansicht rum, aber es will einfach nicht so, wie ich will. Danke im voraus für einen Tipp.

Grüsse, Alphi
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.10.2009, 13:54
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.10.2009, 15:08
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.10.2009
Beiträge: 2
alphi befindet sich auf einem aufstrebenden Ast
Standard

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>
Vielleicht hätte jemand noch eine bessere genauere Lösung.
Grüsse
Alphi
Mit Zitat antworten
  #4 (permalink)  
Alt 12.10.2009, 17:02
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.034
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:17 Uhr.