B-ellanna: CSS Navigationsleiste

Hallo,
Ich versuche gerade eine Css Navigationsleiste aufzubauen, nach dem Beispiel in SelfHtml.
Ich habe das alles auch schon soweit hinbekommen, nur möchte ich gerne das es ein wenig anders aussieht. Ich nutze Mozilla, im IE siehts (whsl durch einen bug? so aus wie ich möchte). Meine Frage ist nun wie ändere ich das Stylesheet damit das so funktioniert?
meine Vorstellung:
|blabla|
|blabla|
|blabla|
   |unterblabla|
   |unterblabla|
|blabla|
aber so siehts im Mozilla aus
|blabla        |
|blabla        |
|blabla        |
   |unterblabla|
   |unterblabla|
|blabla        |
Unten zu finden das Stylesheet und das Html.
Ich freue mich über eure Hilfe!
B-ellanna

body { background-image:url(./bilder/parchmentbackground.gif);
  font-family: "Times New Roman", Times, Arial;
  text-decoration: none;
  font-size: 100.01%;
  margin: 0; padding: 1em 0;
  text-align: center
  }
div#Seite { text-align: left;    /* Seiteninhalt wieder links ausrichten */
      margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
      width: 90%;
      padding: 0;
      background: #FFE6BF url(hintergrund.gif) repeat-y;
      border: 2px ridge silver;
    }
html>body div#Seite {
      border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }
h1  { font-size: 3em;
      color: #B36B00;
      margin: 0; padding: 0.3em;
      text-align: left;
      background: #FFCC80 url(./bilder/header.gif) no-repeat 100% 45%;
      border-bottom: 1px solid silver;
    }
ul#Navigation { font-size: 1.0em;
      float: left;
      width: 10em;
      margin: 0; padding: 0.0em;
      border: none;
      background-color: #FFE6BF;
      text-align: center;
    }
* html ul#Navigation {  /* Korrekturen fuer IE 5.x */
      width:8.8em;
      w\idth: 8em;
      padding-left: 0;
      padd\ing-left: 0.1em;
    }
ul#Navigation li {
   list-style: none;
      margin: 0.1em; padding: 0;
    }
ul#Navigation li ul {
  list-style: none;
      margin: 0 0 0 1em; padding: 0;
    }
ul#Navigation li ul li {
  margin: 0.1em 0;
  }
* html ul#Navigation li ul li {  /* Korrektur fuer IE 5.x */
  margin-left: 1em;
  ma\rgin-left: 0;
  }
ul#Navigation a {
      display:block;
      padding: 0.2em;
      text-decoration: none; font-weight: bold;
      border: 1px solid black;
      border-left-color: white; border-top-color: white;
      color: #B36B00; background-color: #FFE6BF;
    }
* html ul#Navigation a {  /* Breitenangaben nur fuer IE */
      width: 100%;
      w\idth: 8em;
      }
ul#Navigation a:link {
      color: #B36B00; background-color: #FFE6BF;
    }
ul#Navigation a:visited {
      color: #B36B00; background-color: #FFE6BF;
    }
ul#Navigation a:hover {
      border-color: white;
      border-left-color: black; border-top-color: black;
      color: #ffcc99; background-color: #cc9900;
    }
ul#Navigation a:active {
      color: #B36B00; background-color: #FFE6BF;
    }

div#Inhalt {
      margin: 0 0 1em 10em;
      padding: 0 1em;
      text-align: justify;
    }
* html div#Inhalt {
      height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
      margin-bottom: 0;
    }
div#Inhalt h2 {
  font-size: 1.5em;
  margin: 0.2em 0;
  color: black;
    }
div#Inhalt h3 {
  font-size: 1.25em;
  margin: 0.2em 0;
  color: black;
  }
div#Inhalt p {
  font-size: 1em;
  margin: 1em 0;
      }
p#Fusszeile {
      clear: both;
      font-size: 0.8em;
      margin: 0; padding: 0.1em;
      text-align: center;
      background-color: #FFCC80;
      border-top: 1px solid silver;
    }

<html>
<head>

<link rel="stylesheet" type="text/css" href="./styles.css">

<title>Mus Rusticus</title>

<meta name="description" content="Startseite">
<meta name="author" content="Christina Stacke">
<meta name="keywords" content="Mittelalter Schaukampf Mus Rusticus Schwert Belagerung Auftritt Markt Mittelaltermarkt">
<meta name="generator" content="(X)HTML-Format">
</head>

<body>
<div id="Seite">
 <h1>Oberüberschrift</h1>
 <ul id="Navigation">
     <li><a href="Termine.htm">Termine</a></li>
     <li><a href="Angebot.htm">Angebot</a></li>
     <li><a href="Gefolge.htm">Gefolge</a></li>
     <li><a href="Bilder.htm">Bilder</a></li>
     <ul>
          <li><a href="./Bilder/Brandenburg04/Brandenburg04.htm">Brandenburg 2004</a></li>
          <li><a href="./Bilder/Eisenach05/Eisenach05.htm">Eisenach 2005</a></li>
          <li><a href="./Bilder/Herzberg04/Herzberg04.htm">Herzberg 2004</a></li>
          <li><a href="./Bilder/Kindergarten05/Kindergarten05.htm">Kindergarten 2005</a></li>
          <li><a href="./Bilder/Siloah04/Siloah04.htm">Siloah 2004</a></li>
          <li><a href="./Bilder/Siloah05/Siloah05.htm">Siloah 2005</a></li>
          <li><a href="./Bilder/Wittgensdorf04/Wittgensdorf04.htm">Wittgensdorf 2004</a></li>
        </ul>
     <li><a href="Links.htm">Links</a></li>
    <li><a href="Intern.htm">Intern</a></li>
     <li><a href="KontaktImpressum.htm">Kontakt & Impressum</a></li>
 </ul>
 <div id="Inhalt">
    <h2>Bilder</h2>
    <h3>Kleine Überschrift</h3>
    Das ist nur normaler Text.
   </div>
 <p id="Fusszeile">
  © 2006 Christina Stacke
      </p>
</div>
</body>
</html>

  1. Hallo,

    Schau mal nach, was 'inline' und was 'block' Elemente sind, und deren Unterschiede in der Darstellung, bezüglich der Breite.
    Dann vergewissere Dich, welches Element nicht Deinen Vorstellungen entspricht (a oder li z.B.) und warum [1px border geben, dann sieht man einiges klarer). Weise dem betreffenden Element dann mittels display: im CSS die gewünschte Eigenschaft zu, und das sollte dann hoffentlich weiterhelfen.

    mfG
    Ulrich

    P.S.
    Bin mir nicht sicher was richtig ist:
    <ul>
      <li>xxx</li>
      <ul>
        <li>kkk</li>
      </ul>
    </ul> wie bei Dir, oder:

    <ul>
      <li>xxx
      <ul>
        <li>kkk</li>
      </ul>
      </li>
    </ul>

    aber ich tendiere zu letzterer Annahme.
    Was aber vielleicht auch noch eine Option sein kann wäre:
    <dl>
      <dt>xxx</dt>
        <dd>kkk</dd>
    </dl>
    ermöglich über dt{ und dd{ im CSS recht eindeutige Formatierung.
    Man muß sich nur überlegen, ob eine _Definitionsliste_ an dieser Stelle semantisch sinnvoll ist. (oder man definiert das so als sinnvoll ;) )

    1. Moin!

      Ulrich, du tendierst richtig: Listen werden so verschachtelt:

      <ul>

      <li>xxx
        <ul>
          <li>kkk</li>
        </ul>
        </li>
      </ul>

        
      Das ist in der <http://de.selfhtml.org/html/referenz/elemente.htm@title=HTML-Element-Referenz> für `<[ref:self811;html/referenz/elemente.htm#ul@title=ul]>`{:.language-html} sowie `<[ref:self811;html/referenz/elemente.htm#li@title=li]>`{:.language-html} beschrieben.  
        
      Viele Grüße,  
      Robert
      
      1. Ulrich, du tendierst richtig: Listen werden so verschachtelt:

        <ul>

        <li>xxx
          <ul>
            <li>kkk</li>
          </ul>
          </li>
        </ul>

          
        Hallo, gut zu wissen das man so verschachtelt, aber wie löse ich mit diesem Wissen mein Problem?  
        Freue mich auf Hilfe,  
        B-ellanna
        
    2. Schau mal nach, was 'inline' und was 'block' Elemente sind, und deren Unterschiede in der Darstellung, bezüglich der Breite.
      Dann vergewissere Dich, welches Element nicht Deinen Vorstellungen entspricht (a oder li z.B.) und warum [1px border geben, dann sieht man einiges klarer). Weise dem betreffenden Element dann mittels display: im CSS die gewünschte Eigenschaft zu, und das sollte dann hoffentlich weiterhelfen.

      Hallo leider hat das noch nicht weitergeholfen bei inline und block verschiebt sich das ganze nur vertikal ineinander.
      Hat noch jemand einen guten Tipp?

      Dankeschön,
      B-ellanna

      1. Hallo,

        vielleicht verstehe ich Dein Problem auch nicht völlig.
        Kannst Du die Seite mal online stellen?

        Außerdem könnte ich mir vorstellen, daß eine "richtige" und eine "falsche" Verschachtelung von Listen bei dem ein oder anderen Browser in der Darstellung möglicherweise einen Unterschied macht.

        mfG
        Ulrich

        1. Hallo,

          vielleicht verstehe ich Dein Problem auch nicht völlig.
          Kannst Du die Seite mal online stellen?

          Hallo Ullrich,
          Leider kann ich die Seite nciht Online Stellen weil ich (noch) nciht weiß wie das geht (bald bekomme ich von meinem Kumpel die domain übertragen und dann lege ich los). Das einzige ist das ich ja schon das Stylesheet und die Seite angehänge hatte und ich es nochmal versuche besser zu beschreiben.
          Ich möchte, dass wenn man auf Bilder klickt sich eine Untermenüpunkt öffnet in dem die verschiedenen Aufnahmewochenenden gezeigt werden.
          Dieser Untermenüpunkt soll wie ein normaler Menüpunkt aussehen, nur etwas eingerückt. er soll aber genauso breit sein wie der normale menüpunkt. Bei mir wird er um die Einrückbreite verkürzt. Auch zu sehen hier:http://de.selfhtml.org/css/layouts/anzeige/nav_ebenen.htm
          Ich möchte halt das seite 2a,b,c nicht auf selber Höhe enden wie die anderen menüepunkte.
          War das besser erklärt?
          Ich hoffe nun ist es spezifisch genug das das Problem verstanden werden kann.
          Dankeschön!
          B-ellanna

          1. Hi,

            Dieser Untermenüpunkt soll wie ein normaler Menüpunkt aussehen, nur etwas eingerückt. er soll aber genauso breit sein wie der normale menüpunkt. Bei mir wird er um die Einrückbreite verkürzt. Auch zu sehen hier:http://de.selfhtml.org/css/layouts/anzeige/nav_ebenen.htm
            Ich möchte halt das seite 2a,b,c nicht auf selber Höhe enden wie die anderen menüepunkte.

            Dann gebe halt ein Breite vor. In diesem Beispiel wäre das:
            ul#Navigation a { width: 8.8em; }
            ohne den * html-Hack für den IE - auch den folgenden Hack müßtest Du dann entfernen.

            freundliche Grüße
            Ingo

            1. Dann gebe halt ein Breite vor. In diesem Beispiel wäre das:

              Toll, so einfach kann es sein.
              So gefällts mir schon viel besser.
              Danke vielmals!
              B-ellanna