|
Vorheriges Thema: Nächstes Thema: |
Autor |
Nachricht |
braindeadt
Anmeldungsdatum: 16.09.2006 Beiträge: 1
|
Verfasst am: 16.09.2006 21:11:36 Titel: Problem mit CSS Ausklappmenä: Untermenä nutzt Platz nicht? |
|
|
Hallo,
ich habe da ein kleines Problem bei der Erstellung eines CSS basierten Aufklappmenüs.
Wenn man den Code (siehe unten) im Firefox oder Opera betrachtet (woanders habe ich es nicht getestet und das Problem besteht in beiden Browsern), dann stellt man fest das in dem aufgeklappten Menü, der Platz nicht vollständig genutzt wird, dazu kommt das der Inhalt scheinbar rechtsbündig angezeigt wird (daran ändert auch ein text-align:left nichts).
Wenn ich den Inhalt über relative Positionierung nach links verschiebe, habe ich den ungenutzten Raum nur rechts. Das merkwürdige ist, das dieses Problem scheinbar mit der Angabe: position:relative im übergeordneten li Tag, zusammenhängt, wenn ich den Wert auf position:absolute ändere, dann wird zumindest der aufgeklappte Block korrekt dargestellt, wenn man davon absieht das, dass Haupsmenü dann vollkommen zusammenbricht.
Das Problem dabei sind 3 Sachen:
1. Muss das, dem Untermenü übergeordnete, Element (li) eine position Angabe, verschieden von static, besitzen, da sonnst die absolute Positionierung des Untermenüblocks auf den Body bezogen wird.
2. Kann ich für das Haupt li keine absolute Positionierung verwenden, da in meinem Hauptdesign, die Menüpunkte stark unterschiedliche Breite besitzen und damit kein Menü aufbau berechnet werden kann. Wenn ich die breiten der Hauptmenüpunkte festlegen würde könnte ich zwar das Menü konstruieren allerdings würde ich dann die Barrierefreiheit aufgeben, da die Haupt li Elemente dann nicht mehr mit den, möglicherweise von User vergrößerten, Schriftarten mitwachsen.
3. wird in allen Beispielen die ich im Internet gefunden habe, für das übergeordnete li Tag, die relative Positionierung verwendet.
Code: |
<html>
<head>
<style type="text/css">
<!--
ul.menu {margin:0px;padding:0px;background-color:red}
ul.menu li {float:left;list-style:none;position:relative;}
ul.menu li ul {display:none; background-color:green;position:absolute;top:25px;}
ul.menu li:hover ul {display:block}
ul.menu li ul li {list-style:none;background-color:orange;display:block}
-->
</style>
</head>
<body>
<div>
<ul class="menu">
<li>Eintrag 1</li>
<li>
Eintrag 2
<ul>
<li>Eintrag 2.1</li>
<li>Eintrag 2.2</li>
</ul>
</li>
<li>Eintrag 3</li>
</ul>
</div>
</body>
</html>
|
|
|
Nach oben |
|
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben. Du kannst auf Beiträge in diesem Forum nicht antworten. Du kannst deine Beiträge in diesem Forum nicht bearbeiten. Du kannst deine Beiträge in diesem Forum nicht löschen. Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
|
|