CSS Hover funktioniert nicht immer...

KDD · 02.11.2005, 00:17

Hallo zusammen. ich habe auch meiner HP www.gehtwas.net die Navigationsleiste zeifarbig gemacht um mehr Übersicht zu erhalten.
Nun mein Problem:
Der Navitext war orange mit rotem Hover, was auch wunderbar funktioniert. jetzt habe ich aber Naviteile blau gefärbt und hier funktioniert der Hovereffekt nicht mehr.
Wie kann ich das umgehen?

Hier HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<script LANGUAGE="JavaScript1.1">

</script>
<head>

<title>Navigationl</title>

<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive 6">
<title>Navigation</title>
</head>

<body bgcolor="black" text="#ff7000" link="#ff7000" vlink="#ff7000" alink="#ff7000">
<table width="190" border="0" cellspacing="0" cellpadding="0" cool gridx="16" gridy="16" height="148" showgridx showgridy usegridx usegridy>
<tr height="147">
<td width="32" height="147"></td>
<td width="157" height="147" valign="top" align="left" xpos="32"><a href="../ueberuns/support.html" target="Text"><img src="../images/rockfish%20smal.gif" alt="" height="144" width="112" border="0"></a></td>
<td width="1" height="147"><spacer type="block" width="1" height="147"></td>
</tr>
<tr height="1" cntrlrow>
<td width="32" height="1"><spacer type="block" width="32" height="1"></td>
<td width="157" height="1"><spacer type="block" width="157" height="1"></td>
<td width="1" height="1"></td>
</tr>
</table>
<blockquote>
<div align="left">
<table width="131" border="0" cellspacing="2" cellpadding="0" height="415">
<tr>
<td>
<div align="left">
<marquee behavior="scroll" height="15" loop="infinite" scrollamount="3" width="129">To support us please click the fish !!! Um uns zu unterstüzen, bitte den Fisch anklicken !!!</marquee></div>
</td>
</tr>
<tr>
<td>
<div align="left">
<b><a href="../hauptseite/hauptseite.html" target="Text"><font size="4" color="#1e90ff">Home / News</font></a></b></div>
</td>
</tr>
<tr>
<td>
<div align="left">
<b><a href="../ueberuns/ueberuns.html" target="Text">Über uns</a></b></div>
</td>
</tr>
<tr>
<td>
<div align="left">
<b><a href="../angeln/angeln.html" target="Text"><font color="#1e90ff">Angeln</font></a></b></div>
</td>
</tr>
<tr>
<td>
<div align="left">
<b><a href="../musik/musik_main.html" target="Text">Musik</a></b></div>
</td>
</tr>
<tr>
<td>
<div align="left">
<b><a href="../tiere/tiere.html" target="Text"><font color="#1e90ff">Tiere</font></a></b></div>
</td>
</tr>
<tr>
<td>
<div align="left">
<b><a href="../awards/awards.html" target="Text">Awards</a></b></div>
</td>
</tr>
<tr>
<td><b><a href="../links/links.html" target="Text"><font color="#1e90ff">Links</font></a></b></td>
</tr>
<tr>
<td><b><a href="/intern/intern_main.html" target="Text">Intern </a></b></td>
</tr>
<tr>
<td><b><a href="../ueberuns/ehren.html" target="Text"><font color="#1e90ff">Ehrenmitglied</font></a></b></td>
</tr>
<tr>
<td>
<div align="left">
<p><font size="2"><a href="http://www.gehtwas.net/cgi-data/newsletter/abo_form.html" target="Text"><b>Newsletter abonnieren</b></a>
</font></p>
</div>
</td>
</tr>
<tr>
<td><b><a href="http://www.gehtwas.net/cgi-bin/guestbook.php.cgi" target="Text"><font color="#1e90ff">Gästebuch</font><br>
</a></b><b><a href="http://www.gehtwas.net/cgi-bin/guestbook.php.cgi" target="Text"><img src="../images/gbook.gif" alt="" height="51" width="56" border="0"></a></b></td>
</tr>
<tr>
<td><a href="http://www.gehtwas.net/cgi-bin/formmanager.php.cgi?action=ext_preview&fid=1" target="Text"><img src="../images/e-mail.gif" alt="" height="40" width="80" border="0"></a></td>
</tr>
</table>
</div>
<p></p>
<p><br>
</p>
<p><br>
</p>
<p><br>
</p>
<p>
<script language="JavaScript1.2" src="http://www.wetter.com/home/woys2/woys2.js.php?35647,f1002a55142cab09f21c499f3b2c9f8d"></script>
</p>
</blockquote>
</body>

Danke für eure Hilfe, bin schon am verzweifeln!

Boris · 02.11.2005, 01:59

Du hast die Links mit CSS angepasst, mit diesem Code:

a:hover { color: red; text-decoration: none }
a { text-decoration: none }

Bei den "blauen" Links hast du (ganz brutal) die Farben über den FONT-Tag geändert ... bzw. durch GoLive ändern lassen.

Mach es durchweg mit CSS - wie das geht, wurde im TP schon oft beschrieben - such mal nach CSS und Links

UweB · 02.11.2005, 08:27

Du solltest für jede Farbe eine Klasse anlegen.
So sollte die CSS-Definition aussehen:
a:hover { color: red }
a.orange { color: orange }
a.blau { color: blue }

So sieht es dann im Quellcode aus
<a class="orange" href="#">...
<a class="blau" href="#">...

Wenn du das nicht im Quelltext bearbeiten willst, musst du in der Layoutansicht auf den entsprechenden Link gehen, und dann mit Rechts am unteren Fensterrand auf das <a> klicken.
Im nun aufklappenden Menü wählst du "CSS-Stil anwenden".
Daneben sollte nun eine Liste erscheinen (ohne, blau, orange).
Einfach das gewünschte anklicken und es sollte funktionieren.

Gruß
Uwe

KDD · 02.11.2005, 16:42

Danke für die schnelle Antworten.
Ich denke das wird helfen.

KDD · 07.11.2005, 21:09

Es geht, DANKE !