Damian: Einrückung verschachtelter Listenpunkte

SELF-Forum

Einrückung verschachtelter Listenpunkte

Damian
– Informationen zu den Bewertungsregeln

Hallo zusammen!

Ich habe eine Navigation als Liste erstellt. Zumindest im IE6 (andere Browser stehen leider nicht zur Verfügung) sind die Unterpunkte aber ziemlich weit eingerückt.
Versuche mit margin, padding und list-style-position haben bislang nicht gefruchtet.

Hier mal der Code:

<div id="navi"><ul><li><a href="./index.htm">Start</a></li>
<li><a href=foo.htm>Foo</a>
<div class="navi"><ul>
<li><a href="./foo_bar1.htm">Bar1</a></li>
<li><a href="./foo_bar2.htm">Bar2</a></li>
<li><a href="./foo_bar3.htm">Bar3</a></li>
</ul></li></div>
<li><a href=foobar.htm>Foobar</a>
<div class="navi"><ul>
<li><a href="foobar_foo1.htm">Foo1</a></li>
</ul></li></div></ul></div>

Und das entsprechende Stylesheet:

div#navi {
    font-size: 0.83em;
    float: left;
    margin: 1em 1em 1em 0em;
    padding: 0.5em;
    background-color: #003366;
    text-align: left;
  }
  div#navi ul li {
    list-style-type: none;
  }
  div#navi ul ul li {
  }
  div#navi a {
    display: block;
    padding: 0.1em;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #003366;
  }

.navi {
    font-size: 0.83em;
    padding-left: 1.5em;
  }
  .navi a {
    display: block;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #003366;
  }

Wie kann ich da nun die Unterpunkte nur geringfügig einrücken?!?

Schonmal vielen Dank und Grüße!
Damian

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Einrückung verschachtelter Listenpunkte

    Zeromancer
    – Informationen zu den Bewertungsregeln

    Hallo Damian,

    <div id="navi"><ul><li><a href="./index.htm">Start</a></li>
    <li><a href=foo.htm>Foo</a>
    <div class="navi"><ul>
    <li><a href="./foo_bar1.htm">Bar1</a></li>
    <li><a href="./foo_bar2.htm">Bar2</a></li>
    <li><a href="./foo_bar3.htm">Bar3</a></li>
    </ul></li></div>
    <li><a href=foobar.htm>Foobar</a>
    <div class="navi"><ul>
    <li><a href="foobar_foo1.htm">Foo1</a></li>
    </ul></li></div></ul></div>

    ist kein sauberer Aufbau.

    <div id="navi">

    kannst du weglassen, da du ein Blockelement in ein anderes Blockelement packst. Formatiere die Liste direkt!

    <ul>
    <li><a href="./index.htm">Start</a></li>
    <li><a href=foo.htm>Foo</a>

    <div class="navi">

    auch weg. Dieses <div> ist hier völlig fehl am Platze.

    <ul>
    <li><a href="./foo_bar1.htm">Bar1</a></li>
    <li><a href="./foo_bar2.htm">Bar2</a></li>
    <li><a href="./foo_bar3.htm">Bar3</a></li>
    </ul>
    </li>

    </div>

    weg damit!

    <li><a href=foobar.htm>Foobar</a>

    <div class="navi">

    auch weg.

    <ul>
    <li><a href="foobar_foo1.htm">Foo1</a></li>
    </ul>
    </li>

    </div>

    weg.

    </ul>

    </div>

    weg.

    Somit entsteht:

    <ul id="navi">  
 <li><a href="./index.htm">Start</a></li>  
 <li><a href=foo.htm>Foo</a>  
   <ul class="navi">  
     <li><a href="./foo_bar1.htm">Bar1</a></li>  
     <li><a href="./foo_bar2.htm">Bar2</a></li>  
     <li><a href="./foo_bar3.htm">Bar3</a></li>  
   </ul>  
  </li>  
  <li><a href=foobar.htm>Foobar</a>  
   <ul class="navi">  
     <li><a href="foobar_foo1.htm">Foo1</a></li>  
   </ul>  
  </li>  
</ul>

      
ul#navi {  
    font-size: 0.83em;  
    float: left;  
/*Hier fehlt eine Angabe zur Weite der Liste, um float sinnvoll nutzen zu können*/  
    margin: 1em 1em 1em 0em;  
    padding: 0.5em;  
    background-color: #003366;  
    text-align: left;  
/*sofern keine Angaben zum Textlauf angegeben sind, ist text-align:left die Grundeinstellung und muss nicht extra angegeben werden*/  
  }  
  ul#navi li {  
    list-style-type: none;  
  }  
  ul#navi ul li {  
/*hier fehlt etwas*/  
  }  
  ul#navi a {  
    display: block;  
    /*hier fehlt die Angabe zu den Ausmaßen des Blocks*/  
    padding: 0.1em;  
    font-weight: bold;  
    color: #FFFFFF;  
    background-color: #003366;  
  }  
  
  .navi {  
    font-size: 0.83em;  
    padding-left: 1.5em;  
  }  
  .navi a {  
    display: block;  
/*hier fehlt die Angabe zu den Ausmaßen des Blocks*/  
    font-weight: bold;  
    color: #FFFFFF;  
    background-color: #003366;  
  }

    Dann kannst du deine Tests mit padding, margin etc. wiederholen.

    Ungetestet!

    Mit freundlichen Grüßen,
    André

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Einrückung verschachtelter Listenpunkte

      Damian
      – Informationen zu den Bewertungsregeln

      Hallo Damian,

      <div id="navi"><ul><li><a href="./index.htm">Start</a></li>
      <li><a href=foo.htm>Foo</a>
      <div class="navi"><ul>
      <li><a href="./foo_bar1.htm">Bar1</a></li>
      <li><a href="./foo_bar2.htm">Bar2</a></li>
      <li><a href="./foo_bar3.htm">Bar3</a></li>
      </ul></li></div>
      <li><a href=foobar.htm>Foobar</a>
      <div class="navi"><ul>
      <li><a href="foobar_foo1.htm">Foo1</a></li>
      </ul></li></div></ul></div>

      ist kein sauberer Aufbau.

      <div id="navi">

      kannst du weglassen, da du ein Blockelement in ein anderes Blockelement packst. Formatiere die Liste direkt!

      Wohl wahr! Sowas entsteht, wenn man im Umbau-Fieber ist... ;-) War vorher keine Liste, dafür waren Zeilenumbrüche etc. notiert; jetzt wollte ich das besser machen, und dann sowas! Danke für den Hinweis!

      Dann kannst du deine Tests mit padding, margin etc. wiederholen.

      Das werde ich jetzt gleich mal machen! Danke!

      Viele Grüße
      Damian

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

    2. Einrückung verschachtelter Listenpunkte

      Damian
      – Informationen zu den Bewertungsregeln

      So, habe das jetzt umgebaut, komme aber immer noch nicht weiter! Hier mal mein jetztiges CSS:

      ul#navi {
          font-size: 0.83em;
          float: left;
          margin: 1em 1em 1em 0;
          padding: 1.5em;
          background-color: #003366;
          text-align: left;
        }
        ul#navi li {
          list-style-type: none;
          font-weight: bold;
          padding: 0.5em;
        }
        ul#navi ul li {
          font-weight: normal;
          padding: 0.2em;
        }
        ul#navi a {
          display: block;
          padding: 0.1em;
          font-weight: bold;
          color: #FFFFFF;
          background-color: #003366;
        }

      .navi {
          font-size: 0.83em;
          font-weight: normal;
        }
        .navi a {
          display: block;
          font-weight: bold;
          color: #FFFFFF;
          background-color: #003366;
        }

      ul#navi {
          font-size: 0.83em;
          float: left;
      /Hier fehlt eine Angabe zur Weite der Liste, um float sinnvoll nutzen zu können/

      Ist gemäß CSS2.1 nicht mehr nötig, da sich die Weite nach dem Inhalt richtet, was ja durchaus auch Sinn macht (siehe auch: [link:http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float@title=SELFHTML-Artikel zu float]).

      margin: 1em 1em 1em 0em;
          padding: 0.5em;
          background-color: #003366;
          text-align: left;
      /sofern keine Angaben zum Textlauf angegeben sind, ist text-align:left die Grundeinstellung und muss nicht extra angegeben werden/

      Ist in diesem Fall nötig, da vorab <h1> zentriert wird.

      }
        ul#navi li {
          list-style-type: none;
        }
        ul#navi ul li {
      /hier fehlt etwas/

      Nicht mehr...

      }
        ul#navi a {
          display: block;
          /hier fehlt die Angabe zu den Ausmaßen des Blocks/

      Verhält sich wohl ähnlich wie bei float, oder?

      padding: 0.1em;
          font-weight: bold;
          color: #FFFFFF;
          background-color: #003366;
        }

      .navi {
          font-size: 0.83em;
          padding-left: 1.5em;
        }
        .navi a {
          display: block;
      /hier fehlt die Angabe zu den Ausmaßen des Blocks/

      s.o.

      font-weight: bold;
          color: #FFFFFF;
          background-color: #003366;
        }

        
  
  
Viele Grüße  
Damian
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Einrückung verschachtelter Listenpunkte

        Zeromancer
        – Informationen zu den Bewertungsregeln

        Hallo Damian,

        So, habe das jetzt umgebaut

        jetzt kommt das Archiv ins Spiel. zum Beispiel:

        http://forum.de.selfhtml.org/archiv/2005/7/t111615/#m703235

        http://forum.de.selfhtml.org/archiv/2005/5/t107581/#m669519

        Mit freundlichen Grüßen,
        André

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln