Hi,
also die Zauberei deines Technikers entpuppt sich hier als Bärendienst.
- Warum haben sowohl dein Link als auch dein Button „homebutton“ als Klasse?
Zwei Elemente mit derselben Klasse sehen natürlich auch gleich aus,
logischerweise sieht dadurch dein Link wie ein button aus.
Du musst die beiden schon trennen, also zum Beispiel
Dies ist nur ein Testlink
weiter im Text,
im
Text
So, dann zur CSS:
Zuerst mal soltests du das Kapitel Pseudoformate nochmal genauestens lesen:
http://de.selfhtml.org/css/eigenschaften/pseudoforma…
Dann erkennst du, dass diese hinter der Klasse stehen müssen.
Also, dein Stylesheet ist aus folgenden Gründen falsch:
.homebutton {
font-family:Verdana, Arial, Helvetica, sans-serif;
/\* 1.:
Du fängst hier mitten in der Styledefinition von .homebutton eine neue
definintion an. WARUM? Erstmal muss diese fertiggebaut werden, dann
kannst du mit a:..... weitermachen
Den Teil ab font-size:11px, den du unten fortgesetzt hast holst du also
mit schliessender Klammer hier hoch
\*/
/\* 2.:
Lies Selfhtml - Pseudoformate. Und du solltest jetzt nicht .homebutton
schreiben sondern, weil die Dinge hier nur den Link etwas angehen,
nimm stattdessen einen eigenen Klassennamen für die Links.
Es geht zwar einen Klassennamen mehrfach zu verwenden, und dann nur durch
den HTML-Elementnamen zu unterscheiden aber dann blickst du am Ende gar
nicht mehr durch, ist ja jetzt schon schwer.
also a.klassenNameFuerLinks:stuck\_out\_tongue:seudoformat{ und dann darfst du
\*/
a:link.homebutton{
text-decoration:none;
font-weight:normal;
border-color:#999900;
}
a:hover.homebutton{
text-decoration:none;
font-weight:bold;
border-color:#cc9999;
}
a:active.homebutton{
color:#0000EE;
text-decoration:none;
background-color:#33FF99;
font-weight:normal;
}
a:focus.homebutton{
background-color:none;
text-decoration:none;
font-weight:normal;
}
a:visited.homebutton{
background-color:none;
text-decoration:none;
font-weight:normal;
}
/\* Das hier gehört noch zum button, hoch damit \*/
font-size:11px;
border-width:1px;
border-style:solid;
border-color:#000000;
background:#DDD279;
color: #000000;
-moz-border-radius:5px;
}
Diese Fehler und die boesen Browserspezifischen Attribute findest du auch, wenn du deine CSS-Datei hier überprüfen lässt:
http://jigsaw.w3.org/css-validator/
Dann mal losgearbeitet. Sag Bescheid wenn’s hinterher trotzdem nicht geht und lade deine Erbgebnisse am besten direkt wieder hoch, damit wir sie auch sehen können.
. Zeilenumbrüche kann man mit