Hovereffekt funz nicht

[Ripperz]

Hallo,
ich möchte bei mir ein Hovereffekt einbauen, jedoch klappt das nicht ganz so wie ich das möchte.
Wenn ich über meine Links hover soll das so aus sehen wie hier in der Navi:

http://www.reisecenter-fehmarn.de/index.html

Bei mir sieht das aber so aus:

http://www.szene-in-hamburg.de

.block a    {    COLOR: #ffffff;     FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica;     padding-top:2px; line-height:1.5em;     }
.block         {    COLOR: #ffffff;         FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica;     padding-top:8px; padding-bottom:8px; line-height:1.7em;     background:#7097BB; }
.block a:hover    {    COLOR: #ffffff;     FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica;     padding-top:2px; line-height:1.7em; background:#3E6283; height:23px; width:160px; boarder-top:#ffffff; boarder-bottom:#000000;}
.block a:visited {    COLOR: #ffffff;     FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica;     padding-top:2px; line-height:1.5em; }
.block a:active    {    COLOR: #ffffff;     FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica;     padding-top:2px; line-height:1.5em; } 

[Ingo]

AW: Hovereffekt funz nicht

Hi,
Du musst border-top und border-bottom für a in Hintergrundfarbe angeben und die Farbe dann für a:hover ändern - sonst zappelt's eben.

Gruß
Ingo

[Ripperz]

AW: Hovereffekt funz nicht

Mhhh...sorry aber das verstehe ich irgendwie nicht, wie du da meinst.

[dhx]

AW: Hovereffekt funz nicht

Mahlzeit!

Also dieser Code stimmt nicht mit dem auf deiner Seite überein. D.h. dort
hast du keine Angaben zum Rahmen gemacht.

[COLOR=#000000][COLOR=#006600].[/COLOR][COLOR=#0000cc]block a    [/COLOR][COLOR=#006600]{    [/COLOR][COLOR=#0000cc]COLOR[/COLOR][COLOR=#006600]: [/COLOR][COLOR=#ff9900]#ffffff;     FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica;     padding-top:2px; line-height:1.5em;     }
[/COLOR][COLOR=#006600].[/COLOR][COLOR=#0000cc]block         [/COLOR][COLOR=#006600]{    [/COLOR][COLOR=#0000cc]COLOR[/COLOR][COLOR=#006600]: [/COLOR][COLOR=#ff9900]#ffffff;         FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica;     padding-top:8px; padding-bottom:8px; line-height:1.7em;     background:#7097BB; }
[/COLOR][COLOR=#006600].[/COLOR][COLOR=#0000cc]block a[/COLOR][COLOR=#006600]:[/COLOR][COLOR=#0000cc]hover    [/COLOR][COLOR=#006600]{    [/COLOR][COLOR=#0000cc]COLOR[/COLOR][COLOR=#006600]: [/COLOR][COLOR=#ff9900]#ffffff;     FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica;     padding-top:2px; line-height:1.7em; background:#3E6283; height:23px; width:160px; boarder-top:#ffffff; boarder-bottom:#000000;}
[/COLOR][COLOR=#006600].[/COLOR][COLOR=#0000cc]block a[/COLOR][COLOR=#006600]:[/COLOR][COLOR=#0000cc]visited [/COLOR][COLOR=#006600]{    [/COLOR][COLOR=#0000cc]COLOR[/COLOR][COLOR=#006600]: [/COLOR][COLOR=#ff9900]#ffffff;     FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica;     padding-top:2px; line-height:1.5em; }
[/COLOR][COLOR=#006600].[/COLOR][COLOR=#0000cc]block a[/COLOR][COLOR=#006600]:[/COLOR][COLOR=#0000cc]active    [/COLOR][COLOR=#006600]{    [/COLOR][COLOR=#0000cc]COLOR[/COLOR][COLOR=#006600]: [/COLOR][COLOR=#ff9900]#ffffff;     FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica;     padding-top:2px; line-height:1.5em; }  [/COLOR][/COLOR]

Wobei es "border" und nicht "boarder" heißt.

Das Problem sollte gelöst werden, indem du den Wert bei der Zeilenhöhe (line-height) hier änderst:

[COLOR=Black].block a    
{    
COLOR: #ffffff;     
FONT-SIZE: 10px; 
FONT-FAMILY: Verdana, Arial, Helvetica;     
padding-top:2px; 
[B]line-height:1.7em;[/B]     
}[/COLOR]

Also statt "1.5em" nun "1.7em".

[Ripperz]

AW: Hovereffekt funz nicht

Hallo,
das eigentliche Problem ist das der Hoverbackground nicht so breit wie die Navi (160px) und um den Hovereffekt ist keine Ragmen.

PS: das die css nicht mit dem aktuellem übereinstimmt, liegt daran, das ich getestet habe.

lg Sven

[dhx]

AW: Hovereffekt funz nicht

Mahlzeit!

Ripperz:
das eigentliche Problem ist das der Hoverbackground nicht so breit wie die Navi (160px)...

Achso. Dann probier mal folgendes:

Ergänze deine CSS-Datei um diese Angaben

.block a    
{
[B]display: block:
height:23px; 
width:160px;   [/B] 
COLOR: #ffffff;     
FONT-SIZE: 10px; 
FONT-FAMILY: Verdana, Arial, Helvetica;     
padding-top:2px; 
line-height:1.7em;     
}

Im "HTML-Teil" müssen dann die Zeilenumbrüche (<br>) aus der Navigation
rausgenommen werden:

<tr><td class="block" width="160">
<strong><big>· </big></strong>
<a title="Was man sich in Hamburg anschauen kann" href="http://www.szene-in-hamburg.de/sehenswuerdigkeiten.html">Sehenswürdigkeiten</a>
<strong><big>· </big></strong>
<a title="Die Besten Veranstaltungen auf einen Blick" href="http://www.szene-in-hamburg.de/veranstaltungen.html">Veranstaltungen</a> 
...usw...

Das Problem werden aber diese Aufzählungszeichen:

[B] <strong><big>· </big></strong>[/B]

werden. Wenn du auf diese verzichten kannst, dann entferne auch diese.

Ansonsten käme nur eine Liste <ul>...</ul> in Frage um die Navigation so
aufzubauen wie du es möchtest.


Eine andere Lösung wüsste ich jetzt auch nicht.

[Ripperz]

AW: Hovereffekt funz nicht

Hat jetzt alles geklappt.
Danke