CSS: verschachtelte Listen - vertikal und horizontal darstellen

Diskutiere mit über: CSS: verschachtelte Listen - vertikal und horizontal darstellen im Web Page Design Forum

  1. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    Registriert seit:
    25.07.2005
    Hallo!

    Ich möchte 2 Listen ineinander verschachteln, wobei die Punkte der ersten Ebene untereinander, die der jeweiligen Unterebene nebeneinander dargestellt werden. Ich weiß, es geht auch ohne 2. Liste, einfach aneinanderreihen, aber sauberer ist es hier nunmal mit einer 2. Liste.
    Code:
    <ul>
      <li>Ebene 1_1
        <ul>
          <li>Ebene 1_2_1</li>
          <li>Ebene 1_2_2</li>
          <li>Ebene 1_2_3</li>
          <li>Ebene 1_2_4</li>
        </ul>
      </li>
      <li>Ebene 2_1</li>
      <li>Ebene 3_1
        <ul>
          <li>Ebene 3_2_1</li>
          <li>Ebene 3_2_2</li>
        </ul>
      </li>
      <li>Ebene 4_1</li>
      <li>Ebene 5_1</li>
    </ul>
    
    dazu in css folgendes:
    HTML:
    ul li ul {margin: 0; padding:0;list-style-type:none;}
    ul li ul li {float:left;}
    Das führt allerdings dazu, dass die Elemente der Ebene 2_1 und folgende nicht mehr in der gleichen Spalte wie Ebene 1_1 sondern direkt hinter dem letzen Element der 2. Ebene angeordnet werden. Mit clear:both; kann ich nicht arbeiten, da sich das Ganze in einer Umgebung, die bereits mit float arbeitet, befindet.

    Eine Idee?

    Viele Grüße
    Manjo.
     
  2. 2nd

    2nd MacUser Mitglied

    Beiträge:
    8.902
    Zustimmungen:
    242
    Registriert seit:
    25.07.2004
    Meinst Du es so?


    [​IMG]


    Wenn ja heisst das Schlüsselwort "display: inline" für die 2. Liste.


    PHP:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <
    title>Liste</title>
    <
    style type="text/css">
    <!--
    .
    nav_1 {
        
    color:#FF0000;

    }

    .
    nav_2 {
        
    color:#00FF00;

    }

    .
    nav_2 li {
        
    displayinline;

    }
    -->
    </
    style>
    </
    head>

    <
    body>

    <
    ul class="nav_1"
        <
    li>Ebene 1_1 
            
    <ul class="nav_2"
                <
    li>Ebene 1_2_1</li
                <
    li>Ebene 1_2_2</li
                <
    li>Ebene 1_2_3</li
                <
    li>Ebene 1_2_4</li
            </
    ul
        </
    li>
        <
    li>Ebene 2_1</li
        <
    li>Ebene 3_1 
            
    <ul class="nav_2"
                <
    li>Ebene 3_2_1</li
                <
    li>Ebene 3_2_2</li
          </
    ul
        </
    li>
        <
    li>Ebene 4_1</li
        <
    li>Ebene 5_1</li>
    </
    ul>


    </
    body>
    </
    html>


    2nd
     
  3. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    Registriert seit:
    25.07.2005
    Oh ja klasse! Danke!

    Man, manchmal sieht man den Wald vor lauter Bäumen nicht mehr.
     
Die Seite wird geladen...
Ähnliche Themen - CSS verschachtelte Listen Forum Datum
CSS Selektor - Leerzeichen Web Page Design 12.09.2015
lokale css-Anweisung für macuser.de? Web Page Design 21.07.2015
Auslagerung von Klassen in CSS-File Web Page Design 02.04.2015
CSS Problem mit Breiten von ul/li Web Page Design 07.10.2014
CSS: Styling von Abonnieren-Feld Web Page Design 20.08.2014

Diese Seite empfehlen

Benutzerdefinierte Suche