komischer Hover-Effekt

[Dark D.]

Auf dieser website vermieten Haus werden die Links beim hovern auseinandergeschoben.
Wenn ich 'height: 0px;' angebe, zeigt es gar nichts an.

.nav A:LINK {
display: block;
padding-left: 3px;
border: none;
background-color: #C0C0C0; color: #000000;
text-decoration: none;
}
.nav A:VISITED {
display: block;
padding-left: 3px;
border: none;
background-color: #C0C0C0; color: #000000;
text-decoration: none;
}
.nav A:HOVER {
border-left: 3px solid #FFFFFF;
}
.nav A:FOCUS {
border-left: 3px solid #FFFFFF;
}
}

 

[ingoS]

Warum musst du überhaupt eine Null-Angabe machen?
Schreib doch einfach statt diesem hier:

height: 0%;

das hier:

height: 1em;

So hast du es doch auch überall sonst gemacht (bei a:hover und a:focus steht 1em).

 

[Dark D.]

Ich schreib 'height: 1em;', weil der border sonst nicht angezeigt wird.

 

[gruenspan]

Schmeiß Deinen Code weg und nimm folgenden:

*{
margin:0;
padding:0;
}

A{
text-decoration:none;
border:none;
padding:0px 3px 0px 3px;
display:block;
}

A:hover{
border-left:3px solid left;
}

Das sollte wohl in Grundzügen das tun, was Du willst.

 

[ingoS]

Ich schreib 'height: 1em;', weil der border sonst nicht angezeigt wird.

Und warum schreibst du es bei .nav A:LINK NICHT?

Bei dir steht doch:

.nav A:LINK {
display: block;
margin: 0%; padding: 0px 3px 0px 3px;
height: 0%;
background-color: #C0C0C0; color: #000000;
text-decoration: none;
}

Stattdessen solltest du schreiben:

.nav A:LINK {
display: block;
margin: 0%; padding: 0px 3px 0px 3px;
height: 1em;
background-color: #C0C0C0; color: #000000;
text-decoration: none;
}

Einfach 0% durch 1em ersetzen. Das war mein Vorschlag. Und er sollte funktionieren.
Oder du reißt alles um und nimmst gruenspans Code.

 

[Dark D.]

Das hat alles nicht geklappt :-(
Ich aktuallisiere noch mal die CSS-Datei.

PS: DIVs sind noch nicht positioniert.

 

[ingoS]

Das hat alles nicht geklappt :-(
Ich aktuallisiere noch mal die CSS-Datei.

Ich weiß nicht, was du gerade machst, aber im Moment funktioniert es in FF und IE - oder willst du auch die seitliche (horizontale) Verschiebung loswerden?

Die Positionierung ist natürlich noch eine ganz andere Sache.

 

[Fredmonster]

.nav A:LINK {
display: block;
padding-left: 3px;
border: none;
background-color: #C0C0C0; color: #000000;
text-decoration: none;
}
.nav A:VISITED {
display: block;
padding-left: 3px;
border: none;
background-color: #C0C0C0; color: #000000;
text-decoration: none;
}
.nav A:HOVER {
border-left: 3px solid #FFFFFF;
padding-left:0px;
}
.nav A:FOCUS {
border-left: 3px solid #FFFFFF;
padding-left:0px;
}
}

 

[Dark D.]

Nein, nein, es geht nicht um die horizontalen Abstände, sondern um die Vertikalen.

 

[ingoS]

Nein, nein, es geht nicht um die horizontalen Abstände, sondern um die Vertikalen.

Die sind jetzt weg bzw. bleiben beim "hovern" gleich. Ich kann kein Problem mehr erkennen.

 

[Dark D.]

Weg?
Bei mir sind die Links immer noch gut 1em auseinander, bei euch nicht?

 

[ingoS]

Weg?
Bei mir sind die Links immer noch gut 1em auseinander, bei euch nicht?

Ja, sie sind noch auseinander, aber sie werden nicht mehr auseinandergeschoben, wie es am Anfang war.
Wenn du sie näher aneinander haben willst, musst du die <br/> nach jedem Link entfernen.

 

[Dark D.]

Uuuups, das wars
Na ja, danke euch allen!