Problem mit CSS-Navigation

dorleeins · 27.06.2012

Hallo,
bin ein absoluter Neuling in der CSS-Welt :-( und habe natürlich gleich ein Problem und komme nicht drauf, was ich falsch mache:

In dem Moment, wenn ich mit der Maus über die Links gehe, erscheint eine leere "Zeile", d.h. der Block erweitert sich nach unten. Wie kann ich dies verhindern.

Was ich auch nicht verstehe ist die Tatsache, dass trotz "text-decoration:none" der Text unterstrichen ist. Ich arbeitet zur Zeit im IE 8 .

#navi { width: 12%;
float: left;
margin-left: 3%;
background-color:silver;
}

a: link{color: black;
width: 7em;
padding:2px;
text-decoration:none;
background-color:silver;
}

a: visited{color:#6C6;
width: 7em;
padding:2px;
text-decoration:none;
background-color:silver;
}

a:hover {color: red;
background-color: #6F0;
text-decoration: none;
display: block;
}

<body>

<div id="navi">
<a href="unbenannntx.html" target="_blank">Home</a><br />
<a href="unbenannntx.html" target="_blank">Home</a><br />
<a href="unbenannntx.html" target="_blank">Home</a><br />
</div>
<body>

Danke vorab

Myhar · 27.06.2012

AW: Problem mit CSS-Navigation

Hier mal ein paar nützliche Tipps, welche dir Helfen sollen, wenn du dich denn wirklich mit CSS beschäftigen willst:

Erstens: Verwende Firefox mit Firebug und keinen IE zum Entwickeln. Warum? Die IE Entwicklerwerkzeuge sind nicht wirklich zu gebrauchen. Bei Firebug kannst du dir auch die Eigenschaften eines Elements im :hover Zustand ansehen, damit solltest du dein Problem gut eingrenzen können.
Dein Problem hat mit display:block zu tun, hier solltest du dir das Verhalten einmal ansehen.

Zweitens:
Achte darauf, semantisch sinnvolles HTML zu verwenden. Ein div hat keine Bedeutung, deshalb auch nur für Elemente verwenden, welche keine Bedeutung haben. Eine Navigation realisiert man mittels einer (verschachtelten) Liste:

HTML:

<ul id="nav">
<li><a href=" [...]> Google</a></li>
<li><a href=" [...]> Microsoft</a></li>
</ul>

Zusatz: In HTML5 gibt es zusätzlich das <nav> Element, welches man um die gesamte Navigation wrappen kann.

dorleeins · 27.06.2012

AW: Problem mit CSS-Navigation

mit einer "UL-Navigation" hat das geklappt, das war nicht das Problem. Das Problem kam dann erst danach, dass nämlich der "Inhaltsbereich" plötzlich nicht mehr neben der Navigation stand, sondern darunter. Also kam ich auf die Idee, dies nicht mit "UL" zu machen und blieb hängen.

Du schreibst:
Dein Problem hat mit display:block zu tun, hier solltest du dir das Verhalten einmal ansehen.

Wo ist denn geanu hier das Problem? Was ist falsch?

Myhar · 27.06.2012

AW: Problem mit CSS-Navigation

Wenn du Firebug nimmst und dir den Zustand des A-Elements im Hover ansiehst, wirst du merken, dass du dort ein display:block notiert hast. Warum du das tust weiß ich nicht, aber ich bin mir zu 99% sicher, dass dort das Problem herkommt.

Wieso ist überhaupt ein Leerzeichen nach dem :? Ich denke, das ist nicht valide? Oder sind beide Varianten erlaubt?

Btw: Wenn die Darstellung nicht klappt, dann muss man im HTML nichts ändern. Eventuell die Reihenfolge der Elemente muss für manche Darstellungswünsche geändert werden. Jedoch kann ein ul exakt gleich gestyled werden wie ein div. Oder wie ein span oder ein a oder.... Deshalb lieber die semantisch sinnvollen Elemente verwenden.

schnullerbacke · 27.06.2012

AW: Problem mit CSS-Navigation

Myhar hat im Prinzip schon alles gesagt.
Die Links werden unterstrichen, weil die css-Anweisung ignoriert wird. Das liegt am Leerzeichen.
Sowohl bei a: link als auch bei a: visited das Leerzeichen entfernen.

Die Leerzeile beim hovern kommt durch das display: block in der Anweisung a:hover.
Erklärung: Durch display:block bekommt das a-Element beim hovern eine eigene "Zeile" und sorgt für einen Umbruch. Dadurch rutscht das <br />, welches ja hinter dem a-Element folgt, in die nächste "Zeile" und bewirkt diese ominöse "Leerzeile".

Entweder nimmst du das display:block komplett weg, oder
du verwendest es in der Anweisung a:link statt in a:hover. Dann können auch die <br /> in der Navigation weg.

Und ja, mit dem IE8 solltest du wirklich nicht entwickeln.