Hover definieren

[Christian]

Servus allerseits!

Ich stehe vor einem kleinen Problem. Und zwar konzipiere ich gerade eine neue Homepage. Leider klappt das mit den Hover-Effekten nicht so ganz...
Klickt am besten auf den folgenden Link, damit ihr die Fehlerbeschreibung einfacher versteht:
http://www.stalbert-pfarrjugend.de/test.htm

Folgendes:
Link 1 passt, er soll genau so aussehen, wie auf der Testseite.
Link 2 passt ebenfalls, er soll diesen Hover-Effekt haben.
Link 3 passt nicht, er soll keinen orangen, sondern einen blauen Hover-Effekt haben.
Link 4 passt nicht, er soll einen grünen Hover-Effekt haben.
Link 5 passt nicht, er soll einen roten Hover-Effekt haben.
Link 6 passt, er soll genau so aussehen, wie auf der Testseite.
Link 7 bis 9 passen nicht, sie sollen keinen dunkelroten, sondern einen weißen Hover-Efekt haben. Ebenfalls soll der Link an sich ebenfalls weiß sein und bleiben.

Das Problem ist, dass die Links 1 bis 5 keine eigene div oder tr haben. Ansonsten wäre es relativ einfach. Aber es müsste doch möglich sein, so wie der Quelltext jetzt ist einfach einen neuen Hover mit einem neuen CSS-Segment einzubauen, oder?

Ich hoffe, dass ihr mir weiterhelfen könnt. Vielleicht kann jemand von euch mir sogar einen korrigierten Quelltext liefern. Hierfür bedanke ich mich jetzt schon im Voraus!
Danke für eure Hilfe!

Liebe Grüße
Christian

[Zeromancer]

Hallo Christian,

Klickt am besten auf den folgenden Link, damit ihr die Fehlerbeschreibung einfacher versteht:
http://www.stalbert-pfarrjugend.de/test.htm

Das ist kein Link! Das ist ein Link zu deiner Seite. Wie man Verweise einbindet steht in der Hilfe zum Forum

Das Problem ist, dass die Links 1 bis 5 keine eigene div oder tr haben. Ansonsten wäre es relativ einfach. Aber es müsste doch möglich sein, so wie der Quelltext jetzt ist einfach einen neuen Hover mit einem neuen CSS-Segment einzubauen, oder?

  
<div id="headernavigation">  
<a id="current" href="http://www.link1.de" title="Link 1">Link 1</a>  
<a href="http://www.link2.de" title="Link 2" class="gruenefarbe">Link 2</a>  
<a href="http://www.link3.de" title="Link 3">Link 3</a>  
<a href="http://www.link4.de" title="Link 4">Link 4</a>  
<a href="http://www.link5.de" title="Link 5">Link 5</a>  
</div>  

Du kennst Universalattribute? Dann nutze doch Klassen und IDs für die Links und formatiere darüber. Oder verstehe ich was nicht?

  
div#headernavigation a.grunefarbe {  
  color:green;  
}  
div#headernavigation a.grunefarbe:hover {  
  color:red;  
}  

Mit freundlichen Grüßen,
André

[Christian]

Hallo André!

Danke für deine Antwort.
Hier ist nochmals der Link zu meiner Seite: Testseite

Du kennst Universalattribute? Dann nutze doch Klassen und IDs für die Links und formatiere darüber. Oder verstehe ich was nicht?

Mmmh, einen davon habe ich ja benutzt (current). Desweiteren habe ich "class" ebenfalls schon probiert aber leider wird der nicht angenommen. Ich habe mal zur Anschauung deinen Vorschlag eingebaut. Oder habe ich hier etwas falsch gemacht? Wieso wird der Hover-Effekt nicht angenommen?

Grüße
Christian

[Zeromancer]

Hallo Christian,

Oder habe ich hier etwas falsch gemacht? Wieso wird der Hover-Effekt nicht angenommen?

Grundregel Nr. 1 [1]: Alle Seiten müssen korrektes HTML enthalten. Ansonsten kannst du die Fehlersuche vergessen. http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.stalbert-pfarrjugend.de%2Ftest.htm

Mit freundlichen Grüßen,
André

[1] meiner Ansicht nach

[Christian]

Hallo André!

Also, wenn ich mir das so ansehe, verstehe ich nicht so ganz, was da alles angeprangert wird. Gibt es denn überhaupt korrekte Websites?

Übrigens: Ich habe eben aus Versehen die Testseite in einen falschen Ordner gespeichert. Jetzt liegt die abgeänderte Version vor.

Grüße
Christian

[Zeromancer]

Hallo Christian,

Also, wenn ich mir das so ansehe, verstehe ich nicht so ganz, was da alles angeprangert wird. Gibt es denn überhaupt korrekte Websites?

Aber natürlich! Es gibt mittlerweile Regeln, nach denen Webseiten aufgstellt werden. Dazu gehört auch der korrekte Aufbau einer Seite, der bestimmten Anforderungen genügen muss. Fehlen diese Bestandteile, interpretieren bestimmte Browser HTML-Seiten unterschiedlich. Wobei pixelgenaues Erstellen noch nie für alle Browser und Betriebssysteme ratsam war. Schau mal im Angebot von SELFHTML, dort speziell zum Aufbau einer HTML-Datei.

http://de.selfhtml.org/html/allgemein/index.htm

Übrigens: Ich habe eben aus Versehen die Testseite in einen falschen Ordner gespeichert. Jetzt liegt die abgeänderte Version vor.

Aha.

Mit freundlichen Grüßen,
André

[Zeromancer]

Hallo Christian,

Hier ist nochmals der Link zu meiner Seite: Testseite

Ich habe mal zur Anschauung deinen Vorschlag eingebaut. Oder habe ich hier etwas falsch gemacht? Wieso wird der Hover-Effekt nicht angenommen?

wir haben beide was falsch gemacht. Na dann mal los, es funktioniert bei mir auf'm Rechner schon:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Gleich XHTML? HTML mit "Transitional" würde doch bei dir reichen? Nun gut, wenn, dann richtig?! ;-)

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<html><head><title>Testseite</title>

Einmal "<html>" reicht.

<style type="text/css">

[...]

div#headernavigation a.grunefarbe {
  color:green;

muss
1. a.gruenefarbe heißen
2. ist "color" für die Schrift, für den Hintergrund "background-color" oder "background"

}
div#headernavigation a.grunefarbe:hover {
  color:red;
}

dito

</style>
</head>

<body>
<div id="headernavigation">

<a id="current" href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 1">Link 1</a>

<a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 2" class="gruenefarbe">Link 2</a>
   <a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 3">Link 3</a>
   <a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 4">Link 4</a>
   <a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 5">Link 5</a>
  </div>

Mit freundlichen Grüßen,
André

[Christian]

Hallo André!

wir haben beide was falsch gemacht. Na dann mal los, es funktioniert bei mir auf'm Rechner schon:

Mmmh, bei mir komischerweise überhaupt nicht. :(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Gleich XHTML? HTML mit "Transitional" würde doch bei dir reichen? Nun gut, wenn, dann richtig?! ;-)

;) Das hat mein Editor hingenudelt - hab's aber mal auf Traditional abgeändert.

<style type="text/css">
[...]

Was soll da nicht stimmen? Dies wird doch zur Interpretation benötigt...

muss

1. a.gruenefarbe heißen
2. ist "color" für die Schrift, für den Hintergrund "background-color" oder "background"

genau so habe ich das übernommen. Aber leider funktioniert's nicht. Genau diesen Tag hatte ich ebenfalls schon mal aufprobiert.

Das Resultat gibt's auf der Testseite.

Grüße
Christian

[Zeromancer]

Hallo Christian,

1. a.gruenefarbe heißen
2. ist "color" für die Schrift, für den Hintergrund "background-color" oder "background"
   genau so habe ich das übernommen. Aber leider funktioniert's nicht. Genau diesen Tag hatte ich ebenfalls schon mal aufprobiert.

guck' bitte genau hin!

a.gruenefarbe {
  background-color:green; color:#0000CC
  }
a.grunefarbe:hover {
  background-color:red; color:#00FF33
}

<a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 2" class="gruenefarbe">Link 2</a>

Es fehlt das "e" in deiner CSS-Definition! "gruenefarbe" und nicht "grunefarbe"!

Das Resultat gibt's auf der Testseite.

Mit freundlichen Grüßen,
André

[Christian]

Hallo André

Okay, das mit dem "e" ist abgeändert - aber in der Darstellung hat sich weiterhin nichts geändert. Wie kann es sein, dass es bei dir geht und bei mir nicht?
Testseite

Grüße
Christian

[Zeromancer]

Hallo Christian,

Okay, das mit dem "e" ist abgeändert - aber in der Darstellung hat sich weiterhin nichts geändert. Wie kann es sein, dass es bei dir geht und bei mir nicht?
Testseite

Hier mal meine ganze Datei:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
"http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Testseite</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
  
  <style type="text/css">  

  
A {  
 FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #8B0000; FONT-FAMILY: verdana; TEXT-DECORATION: none  
}  
A:hover {  
 COLOR: #000000; FONT-FAMILY: verdana; TEXT-DECORATION: underline  
}  
A.copyright {  
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 11px; PADDING-BOTTOM: 3px; COLOR: #ffffff; PADDING-TOP: 3px; TEXT-DECORATION: none  
}  
A.copyright:hover {  
 PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FONT-SIZE: 11px; PADDING-BOTTOM: 3px; COLOR: #ffffff; PADDING-TOP: 3px; TEXT-DECORATION: underline  
}  
BODY {  
 center repeat-y; font-size: 12px; font-family: verdana; BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 11px; BORDER-BOTTOM-WIDTH: 0px; BACKGROUND-COLOR: #ffffff; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: black; PADDING-TOP: 0px; FONT-FAMILY: Verdana; LIST-STYLE-TYPE: none; BORDER-RIGHT-WIDTH: 0px  
}  
H2 {  
 PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 17px; PADDING-BOTTOM: 0px; PADDING-TOP: 5px; MARGIN: 0px; FONT-FAMILY: Arial; TEXT-ALIGN: left  
}  
#post {  
 max-width: 440px; PADDING-LEFT: 10px; TEXT-TRANSFORM: lowercase; PADDING-TOP: 10px; PADDING-RIGHT: 10px; PADDING-BOTTOM: 10px; TEXT-ALIGN: left; color: #000000  
}  
#post_body {  
 TEXT-TRANSFORM: lowercase; border: #E6E1C6 solid 2px; TEXT-ALIGN: left; color: #000000; background-color: #ECE9DA;  
}  
#post_headline {  
 background-color: #E6E1C6; PADDING-TOP: 3px; PADDING-BOTTOM: 3px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #000000; TEXT-DECORATION: none  
}  
#post_headline a {  
 COLOR: #BD5F01; font-size: 12px; font-weight: bold;  
}  
#post_headline A:hover {  
 COLOR: #000000; TEXT-DECORATION: underline  
}  
#post_main {  
 PADDING-TOP: 15px; PADDING-BOTTOM: 15px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; COLOR: #000000; TEXT-DECORATION: none  
}  
#post_main IMG {  
 border: 1px solid #000000  
}  
#post_feedback {  
 font-size: 10px; background-color: #E6E1C6; PADDING-TOP: 3px; PADDING-BOTTOM: 3px; PADDING-LEFT: 5px; PADDING-RIGHT: 5px; COLOR: #000000; TEXT-DECORATION: none  
}  
#post_feedback A {  
 font-size: 10px  
}  
#feedback {  
 PADDING-LEFT: 15px; TEXT-TRANSFORM: lowercase; PADDING-TOP: 15px; TEXT-ALIGN: left;  
}  
#feedback A {  
 COLOR: #BD5F01; TEXT-DECORATION: none  
}  
#feedback A:hover {  
 COLOR: #000000; TEXT-DECORATION: underline  
}  
.copyright {  
 color: #fff;  
}  
.basic_table {  
 BORDER-RIGHT: #cccccc 1px solid; BORDER-TOP: #cccccc 1px solid; BORDER-LEFT: #cccccc 1px solid; BORDER-BOTTOM: #cccccc 1px solid  
}  
.inner_table {  
 border: 0px; padding: 0px;  
}  
table {  
 font-size: 11px;  
}  
td {  
 font-size: 11px;  
}  
#headernavigation {  
 OVERFLOW: hidden; TEXT-TRANSFORM: lowercase; COLOR: #533614; BORDER-BOTTOM: #efefef 1px solid; FONT-FAMILY: tahoma; BACKGROUND-COLOR: #424242; text-align: center  
}  
#headernavigation A {  
 BORDER-RIGHT: #efefef 1px solid; PADDING-RIGHT: 12px; PADDING-LEFT: 12px; FONT-SIZE: 10px; FLOAT: left; PADDING-BOTTOM: 5px; COLOR: #ffffff; MARGIN-RIGHT: 0px; PADDING-TOP: 5px; BACKGROUND-COLOR: #424242; TEXT-DECORATION: none  
}  
#headernavigation A:hover {  
 COLOR: #ffffff; BACKGROUND-COLOR: #DD7B03; TEXT-DECORATION: none  
}  
#headernavigation A.active {  
 COLOR: #000000; BACKGROUND-COLOR: #ffffff  
}  
#headernavigation A.last {  
 BORDER-RIGHT: #fff 0px solid; PADDING-RIGHT: 13px; BORDER-TOP: #fff 0px solid; PADDING-LEFT: 13px; PADDING-BOTTOM: 4px; BORDER-LEFT: #fff 0px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #fff 1px solid  
}  
A#current {  
 COLOR: #ffffff; BACKGROUND-COLOR: #DD7B03; TEXT-DECORATION: none  
}  
#headernavigation a.gruenefarbe {  
  background-color:#ff0; color:#0000CC;  
  }  
#headernavigation a.gruenefarbe:hover {  
  background:#f00; color:#00FF33;  
}  

  
  </style>  
  
</head>  
  
  
<body>  
  
<table class="basic_table" align="center" border="0" cellpadding="0" cellspacing="0" width="804">  
 <tbody><tr><td width="802">  
 <table class="inner_table" align="center" border="0" cellpadding="0" cellspacing="0">  
  <tbody>  
  <tr>  
  <td colspan="3" align="left" bgcolor="#424242">  
<div id="headernavigation">  
<a id="current" href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 1">Link 1</a>  
<a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 2" class="gruenefarbe">Link 2</a>  
<a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 3">Link 3</a>  
<a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 4">Link 4</a>  
<a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 5">Link 5</a>  
  </div>  
  </td>  
</tr>  
  <tr>  
    <td bgcolor="#cfcaad" valign="top" width="155">  
  
      </div></td>  
  
    <td style="border-left: 1px solid rgb(236, 233, 218); border-right: 1px solid rgb(236, 233, 218);" height="100" valign="top" width="500">  
<br>  
  
<div style="width: 460px; max-width: 460px;">  
  <h2>Test</h2>  
  <div id="post">  
 <div id="post_body">  
  <div id="post_headline">Test&uuml;berschrift</div>  
  <div id="post_main">  
  <div><a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 6">Link 6</a></div>  
  </div>  
  <div id="post_feedback"></div>  
 </div>  
 </div>  
  </div>  
<p><br>  
    </td>  
  
  
    <td bgcolor="#cfcaad" valign="top" width="145"><div id="leftmenu">    </td>  
  </tr>  
  
  <tr>  
    <td colspan="4" class="copyright" align="center" bgcolor="#1f1f1f" height="40" valign="middle">  
      <a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 7" target="_blank">Link 7</a> |  
      <a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 8" target="_blank">Link 8</a> |  
      <a href="http://www.stalbert-pfarrjugend.de/test.htm" title="Link 9" target="_blank">Link 9</a> |  
      </td>  
  
  </tr>  
</tbody></table>  
</td>  
</tr>  
</tbody></table>  
  </body>  
  </html>  

Dem Browser fehlte:

  
#headernavigation a.gruenefarbe {  
  background-color:#ff0; color:#0000CC;  
  }  
#headernavigation a.gruenefarbe:hover {  
  background:#f00; color:#00FF33;  
}  

Diese Version funktioniert. Grad getestet.

Mit freundlichen Grüßen,
André

[Christian]

Hallo André.

Wow, jetzt bin ich aber platt!
Lag das nur an der Backround-Color-Angabe? Wenn ich ehrlich bin, habe ich noch nie diese dreistellige Angabe gesehen, für gewöhnlich sind es ja eigentlich sechs. Wo bekomme ich denn solche Angaben her? für die sechsstelligen gibt es ja gengend Homepages und Software, aber für dreistellige?

Und noch was:
Schau dir doch bitte nur mal kurz den folgenden Forumeneintrag an. Weißt du, ob man diesen Fehler beheben kann?

Zum Schluss noch ein dickes Dankeschön an dich! Hast mir echt weitergeholfen!

Liebe Grüße
Christian

[Christian]

Servus nochmals!

Ich bin draufgekommen, was das Problem war: Es lad daran, dass keine Breite definiert war. Jetzt klappts nämlich!

Danke nomml!

Grüße
Christian

[Zeromancer]

Hallo Christian,

Wow, jetzt bin ich aber platt!
Lag das nur an der Backround-Color-Angabe? Wenn ich ehrlich bin, habe ich noch nie diese dreistellige Angabe gesehen, für gewöhnlich sind es ja eigentlich sechs. Wo bekomme ich denn solche Angaben her? für die sechsstelligen gibt es ja gengend Homepages und Software, aber für dreistellige?

es handelt sich hierbei lediglich um die verkürzte Schreibweise.
Bsp:

#000000 = schwarz, kürzt man ab #000
#ff0000 =        ,              #f00
#00ff00 =        ;              #0f0

wenn zwei aufeinanderfolgende Werte gleich sind, kann man eines davon weglassen:

<quote>
Farbangaben in Stylesheets nach CSS-Syntax sind nach den Regeln zum Seite Definieren von Farben in HTML möglich. Sie können Farbwerte also hexadezimal nach dem Schema #RRGGBB angeben, aber auch die verbreiteten Farbnamen verwenden. R ist der Rotwert, G der Grünwert und B der Blauwert der Farbe. Anders als in HTML existiert auch eine Kurzschreibweise der Form #RGB. Hier werden die einzelnen Farbangaben intern verdoppelt, #08a steht demnach für #0088aa. Die hexadezimale Schreibweise erlaubt Groß- und Kleinschreibung.
</quote>

http://de.selfhtml.org/css/formate/wertzuweisung.htm#farben

Der Browser wollte unbedingt #navigationsheader vor die Klasse haben. Daran lag's...

Viel Spaß noch mit deiner Seite. Bei  Fragen, kommste wieder! Aber immer schön freundlich sein, dann hilft man dir auch weiterhin über mehrere Tage. Versprochen!

Mit freundlichen Grüßen,
André

[Christian]

Servus André!

Viel Spaß noch mit deiner Seite. Bei  Fragen, kommste wieder! Aber immer schön freundlich sein, dann hilft man dir auch weiterhin über mehrere Tage. Versprochen!

Danke! Danke! Den werde ich noch haben. Ich komme gerne auf dein Angebot zurück - aber im Moment sieht's ganz gut aus :)

Danke nochmals!

Grüße
Christian

[at]

Hallo.

wenn zwei aufeinanderfolgende Werte gleich sind, kann man eines davon weglassen

Du meinst es sicher richtig, beschreibst es jedoch falsch. Denn selbst wenn du den sechsstelligen Code als sechs einzelne Werte betrachtest, lässt sich beispielsweise #0FF00F nicht in der von dir beschriebenen Weise kürzen. Vielmehr lassen sich nur die jeweils zweistelligen Werte für R, G und B kürzen, aber auch nur dann, wenn dies gleichzeitig bei allen drei zweistelligen Werten möglich ist.
MfG, at

[Christian]

Danke

Ich habs aber trotzdem schon verstanden

Grüße
Christian

[at]

Hallo.

Ich habs aber trotzdem schon verstanden

Alles andere hätte mich auch gewundert. Meine Ergänzung galt daher auch weniger dir als mitlesenden Neulingen, die dich beim Wort nehmen könnten.
MfG, at

[MudGuard]

Hi,

BODY {
center repeat-y;

Wosndehs?

cu,
Andreas

[Christian]

Servus Andreas!

Das ist ein Überbleibsel von meinem Hintergrundbild. Es sagt aus, dass die Graphik nur in der Y-Achse und nicht in der x-Achse wiederholt wird.

Grüße
Christian

[Christian]

Servus!

Was mir gerade ins Auge sticht:
Im Firefox ist die Linie unterhalb der Leiste mit den Links 1 bis 5 perfekt dargestellt.
Im IE hingegen ist sie direkt unterhalb der Links 1 bis 5 nicht zu sehen und rechts daneben ist sie am oberen Ende der Leiste.
Seltsam...

Ich muss ehrlich sagen: Langsam verzweifle ich an dieser Seite....

Grüße
Christian

[Auge]

Hallo

Klickt am besten auf den folgenden Link, damit ihr die Fehlerbeschreibung einfacher versteht:
http://www.stalbert-pfarrjugend.de/test.htm

Wenn ich auf den _Text_ klicke, passiert nichts. Für's nächste mal: Hilfe des SELFHTML-Forums: Verweise einbinden.

Die URL als Link: http://www.stalbert-pfarrjugend.de/test.htm

Folgendes:
Link 1 passt, er soll genau so aussehen, wie auf der Testseite.
Link 2 passt ebenfalls, er soll diesen Hover-Effekt haben.
Link 3 passt nicht, er soll keinen orangen, sondern einen blauen Hover-Effekt haben.
Link 4 passt nicht, er soll einen grünen Hover-Effekt haben.
Link 5 passt nicht, er soll einen roten Hover-Effekt haben.
Link 6 passt, er soll genau so aussehen, wie auf der Testseite.
Link 7 bis 9 passen nicht, sie sollen keinen dunkelroten, sondern einen weißen Hover-Efekt haben. Ebenfalls soll der Link an sich ebenfalls weiß sein und bleiben.

Zuallererst mal, benutze bitte bei solchen Beispielen keine Domainnamen, die dir nicht gehören (www.link1.de u.s.w.). Dazu gibt es festgelegte Domainnamen (z.B. www.example.org).

So weit, so unübersichtlich. Die Links 1 bis 5 gehören zu _einer_ Navigationsstruktur. Wenn du einzelne dieser Links anders formatieren willst, benutze dazu IDs in den Links. Achte dabei auf die Notation im Stylesheet. Gleiches gilt für dein Problem mit den Links 7 bis 9. Im Stylesheet sprichst du Links der Klasse .copyright an. Es gibt aber keinen einzigen Link dieser Klasse. Es gibt aber Links _innerhalb_ eines Elements der Klasse .copyright.

Hier mal Beispiele zur Einbindung (nur für die Pseudoklasse :link):

a#id:link {} /* Link mit der ID "id" */  
a.class:link {} /* Link der Klasse "class" */  
#id a:link {} /* Link innerhalb eines Elements mit der ID "id" */  
.class a:link {} /* Link innerhalb eines Elements der Klasse "class" */

Das Problem ist, dass die Links 1 bis 5 keine eigene div oder tr haben.

Wozu sollten sie auch?

Wenn wir schon dabei sind: Wenn du CSS benutzt, tue dies konsequent. Mische nicht HTML-Attribute zur Gestaltung (Beispiel: <td bgcolor="#cfcaad" ...>) darunter. Die Aufgabe erledigt sich per CSS wesentlich effektiver. Du musst auch keine Tabellen ineinander verschachteln, nur um farbige Ränder zu bekommen. Auch das erledigt man mit CSS.

Wenn du schon dabei bist, solltest du dich auch mal im SELFHTML-Kapitel Elemente zur Textstrukturierung umschauen, und dir überlegen, welches Stück Text/Inhalt in welches Element gehört. Diese kannst du dann nach eigenem Gusto per CSS gestalten.

Das macht den HTML-Quelltext übersichtlicher und so manche der Elemente[1] obsolet.

Vielleicht kann jemand von euch mir sogar einen korrigierten Quelltext liefern. Hierfür bedanke ich mich jetzt schon im Voraus!

Das ist hier unüblich (wegen dem Mann, dem Fisch und der Angel).

[1] Z.B. deine Tabellen für den Farbrand.

Tschö, Auge

[Christian]

Hallo!

Danke für deine Hilfestellung - auch für deine Tipps.
Hier ist der Link zu meiner
Testseite

Zuallererst mal, benutze bitte bei solchen Beispielen keine Domainnamen, die dir nicht gehören (www.link1.de u.s.w.). Dazu gibt es festgelegte Domainnamen (z.B. www.example.org).

Ehrlich gesagt, wusste ich das gar nicht mit diesen festgelegten Domainnamen. Aber ich werde es mir für die Zukunft merken. Ich habe auch schon die Links abgeändert - allerdings immer auf die Testseite ;)

So weit, so unübersichtlich. Die Links 1 bis 5 gehören zu _einer_ Navigationsstruktur. Wenn du einzelne dieser Links anders formatieren willst, benutze dazu IDs in den Links.

Mmmh, die Sache mit den IDs und Classes habe ich mir auch schon mal angeschaut aber irgendwie wird dies nicht angenommen. Ich verweise dich am besten mal auf das andere Posting.

Wenn wir schon dabei sind: Wenn du CSS benutzt, tue dies konsequent. Mische nicht HTML-Attribute zur Gestaltung (Beispiel: <td bgcolor="#cfcaad" ...>) darunter. Die Aufgabe erledigt sich per CSS wesentlich effektiver.

Das werde ich mir mal ansehen, sobald das Grundgerüst steht, dann kann ich immer noch was abändern. Du musst wissen: So richtig steige ich da noch nicht durch aber es wird langsam.

Vielleicht kann jemand von euch mir sogar einen korrigierten Quelltext liefern. Hierfür bedanke ich mich jetzt schon im Voraus!
Das ist hier unüblich (wegen dem Mann, dem Fisch und der Angel).

Ich wollte ja auch keinen kompletten Quelltext, sondern nur diese Sache mit den Hovers.

Nochmals Danke!
Grüße
Christian