Bulletproof-Navigationsleiste verspringt

[B.E.A.]

Ich finde den Fehler, oder das Problem nicht und bräuchte mal wieder eure Hilfe. Die Navigationsleiste macht einen Sprung und wird so angezeigt http://www.lebens-i-m-p-u-l-s-e.de/vielfalt/

Habe auf meinem Testblog http://www.bitte-einmal-anders.de/testblog/ das gleiche CSS-Style eingespielt und dort macht er den Quatsch nicht. Selbst die Anzahl der Links habe ich rauf und runter verändert, aber ich vestehe das nun nicht mehr.

Datenmüll in der Datenbank vielleicht???

Nachtrag: Damit die Links nicht nur aus wohllosen Buchstaben bestehen im Testblog, wollte ich es hübsch für euch machen, nun zeigt sich dort auch der Versprung ((((( Ich platze gleich

[yellowled]

Die Navigationsleiste macht einen Sprung und wird so angezeigt

1. Irgendwo™ in Deinem CSS steht für #sitenav ul li der Wert padding-bottom: 50; – da fehlt eine Einheit. padding darf nicht ohne Einheit stehen.

2. Du legst auf die li-Elemente der Navigation display: inline;. Das alleine reicht hier nicht, weil Du den a-Elementen innerhalb der Navigation float: left; zuweist. Ich nehme an, ein zusätzliches float: left; auf #sitenav ul li ist das, was Du suchst – wobei Du dann das float: left; auf #sitenav ul a rausnehmen und durch display: block; ersetzen solltest.

Zusammengefasst (neben den sonstigen Styles für die Navigation):

Code: Select all

#sitenav ul li {
    display: inline;
    float: left;
}

#sitenav ul a {
    display: block;
    /* … und float: left; streichen */
}

Bonuslevel: Deine Selektoren sind zu spezifisch. Das stört hier (noch) nicht, könnte es aber irgendwann mal. Statt #sitenav ul li sollte #sitenav li und statt #sitenav ul a sollte #sitenav a reichen. (Es sei denn, Du machst daraus irgendwann mal eine Dropdown-Navigation, dann ist die höhere Spezifität wieder nötig, aber dann brauchst Du auch komplett andere Styles.)

YL

[B.E.A.]

Herzlichen Dank für deine schnelle Hilfe. Ich habe als Basis das purple_style genutzt, was schon im Template drinn ist und die Vorgaben davon übernommen. Ist das denn falsch?

#sitenav {
background: #fff url('img/purple_nav.png') top left;
border-top: 2px solid #ffffff;
margin: 0;
padding: 0;
}

#sitenav ul li {
font-size: 90%;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .2em;
margin: 0;
padding: 0;
display: inline;
}

#sitenav ul a {
background: #fff url('img/purple_nav.png') top left;
border-right: 1px solid #dfdfdf;
padding: 6px 10px 6px 10px;
float: left;
overflow: hidden;
}

#sitenav ul li a:hover,
#sitenav .currentpage a {
padding: 6px 10px 6px 10px;
background: #CB97D8 url('img/purple_nav.png') bottom left;
}

[yellowled]

Ich habe als Basis das purple_style genutzt, was schon im Template drinn ist und die Vorgaben davon übernommen. Ist das denn falsch?

Nein, nur alt.

Bulletproof ist mittlerweile 8 Jahre alt. In Sachen HTML/CSS ist das wie Hundejahre, die Art und Weise, wie wir beides schreiben, hat sich weiter entwickelt.

Davon abgesehen sind die existierenden Styles nicht falsch, lediglich unnötig ausführlich. Bisschen so, als ob man eine gelbe Wand, die man blau streichen will, erstmal weiß streicht – es ist nicht nötig.

YL

[B.E.A.]

Wirklich... 8 Jahre alt. Da kannst du mal sehen wie zufrieden ich mit dem Template bin. Mir gefällt es immer noch Jedenfalls funktioniert alles wieder und ich bedanke mich für deine Hilfe.

[yellowled]

Mir gefällt es immer noch

Auch das ist wie mit der gelben Wand – so lange Du nicht wenigstens mal eine Ecke blau streichst, weißt Du nicht, ob Dir das nicht besser gefällt.

YL