Ich: Margin-left bei H1 und ul soll gleich sein

Hallo,

ich bekomme es nicht hin, das meine Navigation mit einem Rahmen links bündig ist zur Überschrift im Anzeigebereich.

H1 und ul sollen beide einen Außenabstand links von 2.6em haben.

Ich weiß nicht was ich falsch durchdenke,
H1 hat doch eine Spezifität von 0001 und meine ul id eine Spezifität von 0100?

Ich schreibe jetzt schon die Deklarationsblöcke nach der Spezifikation auf (sollte man das nicht immer so machen?)

Kann mir jemand erklären, was ich falsch mache?
Hatte mir die einzelnen Elemente mit einem schwarzen Rahmen drumherum angeguckt, aber klarer wurde es dadurch auch nicht wirklich.

H1 und ul stammen doch beide von body direkt ab?

Hier einmal der Code:

body{
margin:0;
font-family:"Arial Narrow",Arial,sans-serif;
font-size:100.01%;
}

ul#navigation li a{
text-decoration:none;
color: #D6E7B1;
padding: 3px 6px 11.6px 6px;}

ul#navigation li{
text-align:left;
margin-left:2.6em;
border-left:1px solid #D6E7B1;
width: 102px;
height:29px;
float:left;}

ul#navigation{
list-style-type:none;
font-size:0.9em;
letter-spacing:0.1em;
padding:0;
}

h1{
font-size:1.5em;
font-weight:100;
letter-spacing:0.1em;
color:#D6E7B1;
padding:0;
}

</style>
</head>

<body>
<h1>Bla Bla Bla</h1>
<ul id="navigation">
 <li><a href="Startseite.html">Startseite</a></li>
 <li><a href="Verhalten.html">Verhalten</a></li>
 <li><a href="Nahrung.html">Nahrung</a></li>
 <li><a href="Galerie.html">Galerie</a></li>
</ul>
</body>

Gruß, Ich

  1. Hallo,

    ich bekomme es nicht hin, das meine Navigation mit einem Rahmen links bündig ist zur Überschrift im Anzeigebereich.

    H1 und ul sollen beide einen Außenabstand links von 2.6em haben.

    Ich weiß nicht was ich falsch durchdenke,
    H1 hat doch eine Spezifität von 0001 und meine ul id eine Spezifität von 0100?

    Ich schreibe jetzt schon die Deklarationsblöcke nach der Spezifikation auf (sollte man das nicht immer so machen?)

    Kann mir jemand erklären, was ich falsch mache?
    Hatte mir die einzelnen Elemente mit einem schwarzen Rahmen drumherum angeguckt, aber klarer wurde es dadurch auch nicht wirklich.

    H1 und ul stammen doch beide von body direkt ab?

    ich hab keine ahnung was du da so kompliziert machst - was interessieren dich spezifitäten, die sind nur wichtig, wenn du für mehrere selektoren für das selbe element in frage kommen - aber ich sehe in deinem css exakt einen selektor der für ul in frage kommt und da steht nirgends 2.6em

    ggf solltest du einfach mal

      
    h1, ul {  
      padding: 0;  
      margin: 0 0 0 2.6em;  
    }  
      
    li {  
      padding: 0;  
      margin: 0;  
    }  
    
    

    versuchen - nur so zum testen ;)

    Hier einmal der Code:
    ul#navigation{
    list-style-type:none;
    font-size:0.9em;
    letter-spacing:0.1em;
    padding:0;
    }

    h1{
    font-size:1.5em;
    font-weight:100;
    letter-spacing:0.1em;
    color:#D6E7B1;
    padding:0;
    }

    1. Hallo,

      ich hab keine ahnung was du da so kompliziert machst - was interessieren dich spezifitäten, die sind nur wichtig, wenn du für mehrere selektoren für das selbe element in frage kommen.

      Ja, danke, bin etwas verwirrt, weil es bisher nicht geklappt hat und ich es mir eigentlich recht simpel vorgestellt habe. Deshalb soviel auf verschiedene Seiten gelesen, jetzt werf ich alles durcheinander.

      Habs ausprobiert - das Ergebnis hatte ich auch bereits des Öfteren erreicht. Vielleicht habe ich mich zu unklar ausgedrückt.

      Wenn Du mal hier schauen magst.

      Jetzt sieht es so aus wie der obere Teil, ich möchte aber, dass es so aussieht wie im unteren Teil, die schwarze Linie soll darstellen, dass der Rahmen von den Listenpunkten links bündig zu der Überschrift sein soll.

      Verstehe das nicht mehr.

      Gruß, Ich

      1. Hallo Ich,

        Wenn Du mal hier schauen magst.

        Jetzt sieht es so aus wie der obere Teil, ich möchte aber, dass es so aussieht wie im unteren Teil, die schwarze Linie soll darstellen, dass der Rahmen von den Listenpunkten links bündig zu der Überschrift sein soll.

        Das sieht stark danach aus, als brächte das h1 überhaupt kein margin-left. Ansonsten musst du berücksichtigen, dass sich em-Angaben an der Schriftgröße orientieren. Wenn du z.B. gleiche Abstände haben willst, und die Schrift von h1 doppelt so groß ist, muss die Abstands-em-Angabe vom h1 halb so groß sein, wie die von der liste.

        Jonathan

        1. Hallo,

          »»Ansonsten musst du berücksichtigen, dass sich em-Angaben an der Schriftgröße orientieren. Wenn du z.B. gleiche Abstände haben willst, und die Schrift von h1 doppelt so groß ist, muss die Abstands-em-Angabe vom h1 halb so groß sein, wie die von der liste.

          Ja, genau, das muss ich wohl!

          Danke Euch, jetzt kann ich endlich weiter machen.

          Das war eine gedanklich logische Verknüpfung, die ich nicht sehen konnte.

          Gruß, Ich