Hover-Effekt macht Probleme

Guten Morgen,

Ich will folgendes erreichen:
Im Link besteht ein Zeilenumbruch, bei dem die zweite Zeile (hier Diverses) kleiner dargestellt werden soll.
Der Link wird im Normalfall auf dem Hintergrund (Farbe #555555) mit weißer Schrift dargestellt.
Bei einem Mouseover sollen sich die Farben tauschen. Also die Schrift soll die Farbe #555555 bekommen und der Hintergrund soll weiß werden.

Auszug aus CSS:

* {color:white;} html,body {background-color:#555555;} a:link {text-decoration:none;} a:hover {background-color:#ffffff; color:#555555}

Auszug aus HTML:

Problem:
Wenn ich den Befehl „small“ weglasse, funktioniert es. Aber in der obigen Version bleibt bei dem Mouseover die Schrift weiß und verschwindet somit im Hintergrund, welcher sich weiß färbt. Mit dem Befehl „h4“ tritt das gleiche Phänomen auf.

Wie bekomme ich die zweite Zeile verkleinert und der Hover das macht, was er soll? Vielen Dank schon mal.

Gruß Elsner

PS: Leider habe ich zur Zeit keine Möglichkeit euch einen Link anzubieten. Den reiche ich heute Abend nach.

Mach’s mal so:

html,body {background-color:#555; color:white;} // wird vererbt, daher ist * unnötig a:link, a:visited {text-decoration:none; background:transparent; color:white;} a:active, a:hover {background-color:white; color:#555;}
Die Reihenfolge und die vollständige Angabe aller Pseudoklassen sind bei Links (in manchen Browsern) entscheidend. Einzig :focus kann entfallen.

Danke i.deFix für deine schnelle Antwort.

Wenn ich color:white nur im html/body schreibe, wird es nicht bei den Link angewendet. Deswegen habe ich es mit * gemacht.

Hier ist mal meine komplette Linkdeklaration in CSS:

a:link {text-decoration:none; background:transparent; color:#ffffff; } a:link.link {text-decoration:underline; background:transparent; color:#ffffff; } a:visited {text-decoration:none; background:transparent; color:#ffffff; } a:visited.link {text-decoration:underline; background:transparent; color:#ffffff; } a:hover {background-color:#ffffff; color:#555555; } a:hover.link {text-decoration:none; background-color:#ffffff; color:#555555; } a.bild:hover {background: transparent; background:transparent; color:#555555; }

Leider funktioniert es noch nicht.
Der Fehler tritt nur in dem Bereich des Links auf, den ich manipuliere (z.B. mit small oder h4). Hast du vielleicht noch eine Idee?

Und deswegen habe ich die Links mit “color:white;” versehen…

[quote=“elsner”]Hier ist mal meine komplette Linkdeklaration in CSS:
a:link.link {text-decoration:underline; background:transparent; color:#ffffff; }[/quote]
Jetzt wird es interessanter. Du vergibst an Links noch zusätzliche Klassen - da ist es eigentlich unnötig, nochmal die kompletten Deklarationen anzugeben (und womöglich gegenseitig zu überschreiben)…

Am besten postest Du mal hier, welche Klassen Du verwendest und was diese bewirken (sollen).
Wie wird ein a.link dargestellt? Und ein a.bild?

Noch besser wäre es natürlich, wenn Du einen Link (zur Not zu einer Probeseite ohne Inhalt) geben könntest.

Deswegen vermute ich die zusätzlichen Klassen als Fehlerquelle… aber ohne genaue Kenntnis des Quelltextes kann ich nichts dazu sagen.

Und deswegen habe ich die Links mit “color:white;” versehen…[/quote]
Entschuldige. Das habe ich übersehen.

Hier ist mal die komplette CSS:

[code]* {color:white;
}

html,body {background-color:#555555;
font-family:verdana,arial,sans-serif;
scrollbar-base-color:#555555;
scrollbar-arrow-color:#ffffff;
}

#alles {margin:0 auto;
text-align:center;
clear:both;
}
.kopf {width:800px;
height:150px;
margin:0 auto;
clear:both;
}
.kopflink {width:800px;
height:150px;
display:block;
margin:0 auto;
}
.kopfbild {background:url(kopf.jpg) no-repeat;
}
.kopflink:hover {background-position:0 -150px;
}
#navi {width:750px;
margin:15px auto 0px;
clear:both;
}
#navi_1 {width:750px;
margin:5px auto 0;
clear:both;
}
#inhalt {background:url(hintergrund_inhalt.jpg);
width:750px;
margin:15px auto 0px;
text-align: justify;
padding:10px;
border: 2pt #000000 solid;
clear:both;
}
#navieinzelbild {text-align:center;
}

.td_galerie {vertical-align:top;
margin:0 auto;
text-align:center;
padding:10px;
}
.galerieuebersicht {margin:0 auto;
}
#galeriebild {text-align:center;
margin:10px 0;
}
.kommentar {text-align:center;
}
.navi_galerie {margin:0 1em;
}

a:link {text-decoration:none;
}
a:link.link {text-decoration:underline;
}
a:visited {text-decoration:none;
}
a:visited.link {text-decoration:underline;
}
a:hover {background-color:#ffffff;
color:#555555
}
a:hover.link {text-decoration:none;
}
a.bild:hover {background: transparent;
}

img {border:0;
}
a img:hover {none;
}

#ueber_mich {float:right;
margin-left:10px;
}
#portfolio {text-align:center;
margin-top:10px;
}

h2 {margin-bottom:0;
}
p {margin-bottom:0;
}

input {background-color:#555555;
border-color:#000000;
}
textarea {background-color:#555555;
border-color:#000000;
}

form {margin-bottom:0;
}[/code]

Die HTML-Seite mit dem Problem:

[quote]

Bildbearbeitung
Startseite  |  Über mich  |  Galerie  |  Kontakt  |  Gästebuch  |  Impressum
Fotografie  |  Bildbearbeitung

Bildbearbeitung


Galerie 1
Diverses

Galerie 2
Helena

[/quote]

Mit den Link-Klassen soll folgendes erreicht werden:
Generell besitzen die Links auf der Seite keinen Unterstrich und haben die gleiche Farbe wie der Text. Um im Text vorkommende Links kenntlich zu machen, sollen diese unterstrichen werden. Das erreiche ich mit der Klasse “.link”.
Auf der Seite befinden sich Bilder, welche mit einem Link versehen sind. Diese Bilder besitzen transparente Bereiche, die bei einem Mouseover weiß dargestellt werden. Um dies zu unterbinden, benutze ich die Klasse “.bild”.
Diese beiden Klassen machen auch soweit keine Probleme.

Eine Testseite werde ich zum besseren Verständnis heute Abend hochladen. Auf der Arbeit habe ich dazu leider keine Möglichkeit.

Na, da habe ich den Fehler recht schnell identifizieren können: das Problem ist tatsächlich der * (deswegen bin ich mit solchen globalen Einstellungen auch recht vorsichtig). Diese Angabe wird vererbt und deswegen auch auf <h?> und angewendet.

Nimm’ also mal die Deklaration " * {color:white;} " raus und formatiere statt dessen die Links wie oben von mit gepostet (mit allen Pseudoklassen, Hintergrund- und Farbangaben).

Damit wäre der Fehler erstmal beseitigt…

Und nun mal grundsätzlich ein paar Tipps zu den zusätzlichen Klassen:
Um Links im Text zu unterstreichen reicht diese Angabe:.link {text-decoration:underline;}
Und um den Hintergrund bei Bildern zu unterbinden, brauchst Du keine eigene Klasse - da reicht ein genaueres Selektieren:a:link img, a:visited img, a:active img, a:hover img {background:#555;}
Eventuell könnte auch nur "a img {background: none;} " genügen - das habe ich nicht getestet.

Ich habe heute einen guten Tag - hier die CSS, wie ich sie schreiben würde:

[code]
html,body {
background:#555;
font-family:verdana,arial,sans-serif;
}
#alles {
margin:0 auto;
text-align:center;
}

.kopf {
width:800px;
height:150px;
margin:0 auto;
}
.kopflink {
width:800px;
height:150px;
display:block;
margin:0 auto;
}
.kopfbild {background:url(kopf.jpg) no-repeat top left transparent;}
.kopflink:hover {background-position:0 -150px;}

#navi {
width:750px;
margin:15px auto 0px;
}
#navi_1 {
width:750px;
margin:5px auto 0;
}
#inhalt {
background:url(hintergrund_inhalt.jpg) top left repeat;
width:750px;
margin:15px auto 0px;
text-align: justify;
padding:10px;
border: 2px solid black; // waren Punkt (pt) wirklich gewollt?
}

#navieinzelbild {text-align:center;}

.td_galerie {
vertical-align:top;
margin:0 auto;
text-align:center;
padding:10px;
}

.galerieuebersicht {margin:0 auto;}

#galeriebild {
text-align:center;
margin:10px 0;
}

.kommentar {text-align:center;}

.navi_galerie {margin:0 1em;}

// Linkformatierung
a:link, a:visited {text-decoration:none; color:white; background:transparent;}
a:active, a:hover {background:white; color:#555;}

// “Sonderfälle” bei Links
.link {text-decoration:underline;}
a:link img, a:visited img, a:active img, a:hover img {background:#555; border:none;}

img {border:none;}

#ueber_mich {
float:right;
margin-left:10px;
}

#portfolio {
text-align:center;
margin-top:10px;
}

h2, p, form {margin-bottom:0;}

input, textarea {
background-color:#555;
border-color:black;
}[/code]
Zwei Dinge, die mir sofort aufgefallen sind:
a) Scrollbars einfärben ist nicht valide und funktioniert nicht in Geckos
b) clear ist unnötig, wenn nicht gefloatet wird :wink:

Vielen Dank i.deFix. Es lag wirklich an der globalen Deklaration. Jetzt macht die Seite das, was sie tun soll.

Und auch vielen Dank für die optimierte CSS-Datei. Als Anfänger bin ich für solche Optimierungsvorschläge dankbar und werde mir die Datei mal in Ruhe anschauen.

Gruß Elsner