Linkformatierung funktionier nicht

[No0by]

Hallo, ich bin gerade dabei eine Seite zu entwerfen. Nun bin ich auf ein paar Fehler aufmerksam geworden.
Der erste Fehler ist, das meine Links oben (Home, Sendeplan etc.) nicht in der Farbe angezeigt werden die ich ihnen zugewießen habe.
Auszug aus Quelltext:

<style type="text/css"><!-- 
a.head:link {text-decoration: none; color:#9A9A9A; font-size:11px}
a.head:hover {color:#FFFFFF; text-decoration:underline; font-size:11px}
//--> </style>

<td bgcolor="#515151" colspan="2" valign="middle" width="626" height="38" align="center"><a href="" class="head">Home<a></td>

Der zweite Fehler auf der Seite ist, dass unten die links die Links ein komischen Zeilenabstand haben, der aber nur teilweiße vorhanden ist, es sind nur 2 Zeilenabstände falsch, was hab ich da flsch gemacht?
Link zu meiner Seite: http://no0by.no.funpic.de/Index.html

Ich hoffe ihr könnt mir helfen,

MfG No0by

 

[XraYSoLo]

kann ja nicht gehen, denn eine pseudeklasse kann nicht "a.head" heißen.

<style type="text/css"><!-- 
a_head_link {text-decoration: none; color:#9A9A9A; font-size:11px}
a_head:hover {color:#FFFFFF; text-decoration:underline; font-size:11px}
//--> </style>

<td bgcolor="#515151" colspan="2" valign="middle" width="626" height="38" align="center"><a href="" class="head">Home<a></td>

jetzt sollte es gehen.

Nils aka XraYSoLo

 

[Prophet]

Das kann so nicht Funktionieren XraYSoLo. Damit würdest du den Tag a_head_link ansprechen, nicht aber eine Pseudoklasse erstellen. Die von ihm verwendete schreibweise war vollkommen richtig

 

[No0by]

ok danke erstmal für eure schnellen antworten. Wenn es richtig ist warum funktioniert es dann nicht?

 

[Prophet]

Ich vermute du hast einen Fehler bei der zuweisung der Klassen in den HTML Tags. Kannst du daein Paar zeilenumbrüche reinmachen damit es etwas lesbarer wird?

 

[No0by]

ok ich habe jetzt den quelltext etwas übersichtlicher gestalltet, ich hoffe du findest dich jjetzt zurecht.

mfg No0by

 

[hobbyuser]

Hi NoOby

es wäre sicherlich gut die Seite erstmal zu validieren, denn CSS funktioniert nur richtig, wenn auch das HTML korrekt ist. :roll:
LINK: Validator Ergebnis

Des weiteren würde ich (selbst wenn es erlaubt ist) keine Tag-Namen als Klasse oder ID verwenden.

Nun zu deinem Code.

       <td bgcolor="#515151" colspan="2" valign="middle" width="626" height="38" align="center">
                                 <a href="" class="head">Home<a><font size="-1" color="#737373"> | </font>
                                 <a href="" class="head">Sendeplan</a> <font size="-1" color="#737373"> | </font>
                                 <a href="" class="head">Forum</a> <font size="-1" color="#737373"> | </font>
                                 <a href="" class="head">Chat</a> <font size="-1" color="#737373"> | </font>
                                 <a href="" class="head">G&auml;stebuch</a> <font size="-1" color="#737373"> | </font>
                                 <a href="" class="head">Bildergallerie</a> <font color="#737373" size="-1"> | </font>
                                 <a href="" class="head">&Uuml;ber uns</a> <font size="-1" color="#737373"> | </font>
                                 <a href="" class="head">Kontakt</a> <br>

			</td>

Das ist die Navigation im Kopfbereich und hier sieht man auch gleich das der Nutzen von CSS nicht verstanden wurde.

Richtig wäre folgender Aufbau:

<td id="kopf" colspan="2">
  <a href="">Home</a> | 
  <a href="">Sendeplan</a> |
  <a href="">Forum</a> |
  <a href="">Chat</a> |
  <a href="">G&auml;stebuch</a> |
  <a href="">Bildergallerie</a> |
  <a href="">&Uuml;ber uns</a> |
  <a href="">Kontakt</a><br>
</td>

Den Text bzw die | formatierst du wie die Zelle über CSS

#kopf {
  background-color:#515151;
  vertical-align:middle;
  width:626px
  height:38px;
  text-align:center;
  font-size:small;
  color:#737373;
}

Jetzt kommt der entscheidende 2. Vorteil, du sprichst die Links einfach über die ID an.

#kopf a {
  text-decoration:none;
  color:#9A9A9A;
  font-size:11px;
}
#kopf a:hover {
  color:#FFFFFF;
  text-decoration:underline;
}

Das zweite Problem mit den Zeilen ist für mich nicht direkt ersichtlich, also mach mal einen Screenshot oder so. :roll:

Gruß
Hobbyuser

EDIT: Die überflüssigen Klassen noch aus dem Quelltext entfernt.

 

[Prophet]

Zwar habe ich den Fehler mit den zeilen nicht gefunden. Dafür aber diesen hier:

a_newsbox:hover

 

[No0by]

Hallo,
vielen vielen dank an hobbyuser für die ausführliche erklärung! ich weiß das sehr zu schätzen das du dir soviel arbeit gemacht hast um das zu analysieren! ;Jump
@ Prophet, das hat einen weiteren Fehler behoben, dafür auch nochmal DANKE.

MfG No0by