• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Pseudoklassen - Problem

N

Nicky

Neues Mitglied
Ich habe als Aufgabenstellung die Bearbeitung einer HTML Seite mit CSS. Ein Unterpunkt ist es, Links mit Pseudoklassen "auszuschmücken". a:hover, a:link usw.

Wenn ich das mache, verschwindet aber die Hintergrundfarbe (es bleibt einfach weiß)! Habe es mit internem Style Sheet probiert und mit inline CSS. Geht alles nicht. =(
Woran liegt das?

Hier die externe CSS Datei:

<html>

<head>
</head>

<body>


body {background-color: #FF4040;}

a:link { color: #FFF68F;
font-size: 1pc;
font-family: MV Boli;
}

a:hover {color: green;}

a:focus {color: blue;}

a:visited {color: black;}

h1 {color: #FFF68F;
font-size: 3pc;
font-family: Maiandra GD;
font-weight: bold;
text-align: center;
}

</body>

</html>


Habs sonst immer so gemacht, funktioniert auch überall. Nur hier eben nicht.
Hilfe!!
 
Externe CSS-Dateien dürfen keinen HTML-Code enthalten. Es sind ja CSS-Dateien, keine HTML-Dateien.
 
Das ist allerdings nicht der einzige Fehler:

Code: 
font-family: MV Boli;

Schriftarten, die aus zwei Wörtern bestehen, müssen in Anführungszeichen gesetzt werden, also:

Code: 
font-family: "MV Boli";

Das selbe gilt natürlich auch bei "Maiandra GD".
 
threadi schrieb:
Externe CSS-Dateien dürfen keinen HTML-Code enthalten. Es sind ja CSS-Dateien, keine HTML-Dateien.
Zum Vergrößern anklicken....



Gut, und was soll ich dann tun damits funktioniert? Wieso gehts dann bei allen anderen css Dateien auch??

Es funktioniert ja nicht mehr, wenn ichs im HTML direkt reinschreib, es geht einfach gar nicht mehr :sad:
 
Zunächst musst du die CSS-Angaben entweder in den head-Bereich innerhalb eines style-Tags schreiben oder besser in eine ausgelagerte CSS-Datei.
Wie das funktioniert, findest du hier unter Ziffer 1 und 2 erklärt:
CSS-Styleangaben einbinden

Daneben musst du bei den Pseudoklassen eine bestimmte Reihenfolge für die Linkzustände beachten, siehe hier Ziffer 8: Häufige CSS-Fehler

Für die Linkzustände selbst hast du lediglich eine Schriftfarbe (color) hinterlegt, jedoch keine Hintergrundfarbe (background-color).

Eine einheitliche Linkgröße sowie einen Hovereffekt über die gesamte Linkgröße erreichst du mit einer Zuweisung von "display: block;" sowie eines Breiten- und Höhenwerts.

Eine Komplettanleitung für eine Navi findest du hier: Vertikale Listennavigation
 
Nicky schrieb:
Gut, und was soll ich dann tun damits funktioniert? Wieso gehts dann bei allen anderen css Dateien auch??
Zum Vergrößern anklicken....

Dateien mit der Endung .css enthalten NUR CSS-Code, nichts anderes!
Und so geht das auch bei allen anderen Dateien. Schau dir nur mal hier vom Forum die Style-Dateien an.

Es funktioniert ja nicht mehr, wenn ichs im HTML direkt reinschreib, es geht einfach gar nicht mehr :sad:
Zum Vergrößern anklicken....

Wenn Du die Styles im der HTML-Datei schreiben willst (die mit der Endung .html oder .htm), dann musst Du diese auch entsprechend auszeichen.

Code: 
<style type="text/css">
HIER DEIN CSS-Code
</style>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben