HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum
 

 
 

Anzeige 
 
HTMLWorld » Forum

Thema anzeigen - Problem mit CSS Ausklappmenü: Untermenü nutzt Platz nicht?

 FAQFAQ   SuchenSuchen   MitgliederlisteMitgliederliste   BenutzergruppenBenutzergruppen   RegistrierenRegistrieren 
 ProfilProfil   Einloggen, um private Nachrichten zu lesenEinloggen, um private Nachrichten zu lesen   LoginLogin 

Problem mit CSS Ausklappmenü: Untermenü nutzt Platz nicht?

 

Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Vorheriges Thema:
Nächstes Thema:  
Autor Nachricht
braindeadt



Anmeldungsdatum: 16.09.2006
Beiträge: 1

BeitragVerfasst am: 16.09.2006 21:11:36    Titel: Problem mit CSS Ausklappmenä: Untermenä nutzt Platz nicht? Antworten mit Zitat

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
Benutzer-Profile anzeigen Private Nachricht senden
Beiträge der letzten Zeit anzeigen:   
Neues Thema eröffnen   Neue Antwort erstellen    HTMLWorld Foren-Übersicht
   CSS
Alle Zeiten sind GMT + 1 Stunde
Seite 1 von 1

 
Gehe zu:  
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.