CSS: verschachtelte Listen - vertikal und horizontal darstellen

Dieses Thema im Forum "Web Page Design" wurde erstellt von Manjo, 25.07.2006.

  1. Manjo

    Manjo Thread Starter MacUser Mitglied

    Beiträge:
    903
    Zustimmungen:
    22
    MacUser 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
    MacUser 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
    MacUser 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
  1. hello
    Antworten:
    1
    Aufrufe:
    202
  2. Hoooray
    Antworten:
    2
    Aufrufe:
    282
  3. Kemna
    Antworten:
    6
    Aufrufe:
    535
  4. Saugkraft
    Antworten:
    5
    Aufrufe:
    612
  5. maceis
    Antworten:
    7
    Aufrufe:
    1.207

Diese Seite empfehlen