20.04.2024, 00:40
Sprache ändern
Registrieren
Anmelden
Sie sind nicht angemeldet.
CSS-Style-Problem
Dienstag, 22. Januar 2008, 13:43
Hi,
ich habe ein Problem, dass eine html-Dok zwar die normalen Style-Parameter aus der css-Datei nimmt, nur die Eigenschaften für hover-Links nicht. In zwei anderen Dokumenten funktionierts aber einwandfrei (komplett) - und die Sache ist so simple, dass da eigentlich kein Fehler dirn sein kann. Was hab ich übersehen?
Aus css-Stylesheet (Auszug):
Beispiel, wo es geht:
(interessant ist der Link "Login")
Wo es nicht klappt:
Das ganze im kompletten ist Klick
(Startseite (Login-Link-Hover-Effekt) geht, die Seite nachm klicken auf das Bild (unterm Text: "storage chart"-Link-Hovereffekt) geht nicht).
ich habe ein Problem, dass eine html-Dok zwar die normalen Style-Parameter aus der css-Datei nimmt, nur die Eigenschaften für hover-Links nicht. In zwei anderen Dokumenten funktionierts aber einwandfrei (komplett) - und die Sache ist so simple, dass da eigentlich kein Fehler dirn sein kann. Was hab ich übersehen?
Aus css-Stylesheet (Auszug):
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 |
.content_splash{
font-family: Arial, sans-serif;
font-size: 14px;
margin: 12px 0px 0px 0px;
text-align: center;
}
.content_splash a:hover{
letter-spacing: 5px;
}
|
Beispiel, wo es geht:
|
|
Quellcode |
1 2 3 4 |
<div class="content_splash"> <a href="./public/system_overview.html" title="System Overview"><img src="./splash.jpg" alt="No Pic :/" border="1"></a><p> <a href="./private/main.html" title="Private Section">[Login]</a> </div> |
(interessant ist der Link "Login")
Wo es nicht klappt:
|
|
Quellcode |
1 2 3 4 5 6 |
<div class="content_splash"> <br><a href="./storage_chart.html" title="storage chart">[storage chart]</a> </div> |
Das ganze im kompletten ist Klick
(Startseite (Login-Link-Hover-Effekt) geht, die Seite nachm klicken auf das Bild (unterm Text: "storage chart"-Link-Hovereffekt) geht nicht).
Re: CSS-Style-Problem
Dienstag, 22. Januar 2008, 14:37
Zunächst mal solltest du im <head> die halboffenen Metaelemente schließen.
Der mit "storage chart" betitelte Link wird deshalb nicht hervorgehoben, weil er schlicht und ergreifend in keinem <div> mit der Klasse ".content_splash" eingeschlossen ist.
Unterstriche: Jein. Sie funktionieren zwar *meistens*(tm), aber laut Spec sind die iirc nicht erlaubt. Deshalb habe ich irgendwann alles von Unter- auf Bindestriche (die sind nämlich erlaubt) umgestellt. Das sieht auch nicht schlechter aus und ist auch noch besser zu tippen.
[Exkurs] Übrigens macht der IE einmal mehr komische Sachen: Dort wird ein Attribut "_foo" als "foo" interpretiert, von "richtigen" Browsern nicht. Zum Auskommentieren (während der Entwicklung!) eignet sich das also nicht . Da verwende ich dann "f_oo", weil das sowohl IE als auch die anderen Browser als ungültiges Attribut ansehen.
Was das Letter-spacing angeht, da solltest du keine Pixel, sondern eine relative Einheit (z.B. em) verwenden, damit das auch beim Skalieren noch den gewünschten Effekt beibehält.
Sofern man nicht gerade mit Rastergrafiken arbeitet und daher pixelgenaue Angaben benötigt, sind relative Angaben immer eine gute Idee. Dann sieht das nämlich auch für eine Beamer-Präsentation o.ä. gut aus, wofür man ggf. vergrößern muss.
Die CSS-Attribute in den Blöcken solltest du auf jeden Fall für die (initiale) Lesbarkeit einrücken, zwei oder vier Pixel sind da gängig und angebracht.
Bei 0-Werten kann man die Einheit auch weglassen, was wiederum oft die Lesbarkeit erhöht.
Was sollen eigentlich so Scherze wie <p> am Zeilenende? Sauberes XHTML ist immer eine gute Idee.
Bei den Links selbst solltest du überlegen, ob du sie nicht durch den typischen Strich darunter hervorhebst, damit sie aus dem (insbesondere gleichfarbigen) Inhalt hervortreten. Eine andere Farbe für Links ist oft hilfreich für den Anwender, aber auch ohne Farben (also bei s/w-Ansicht, nicht zuletzt beim Ausdruck [auch wenn man dafür natürlich separate Styles definieren kann]) sollten Links noch deutlich zu erkennen sein.
So oft wie du Arial als Schriftart angibst, solltest du das gleich in der body-Definition tun - dann nämlich insgesamt nur einmal. Sofern du anderswo überhaupt eine andere Schriftart verwenden möchtest, wendest du die einfach auf das oder die betroffenen Elemente an (lassen sich ja auch z.B. mit `h2, h3, h4 { ... }` zusammenfassen) und hast so eine zentralere Verwaltung der Schriften.
Diese Tipps entstanden nicht zuletzt aus ca. (gefühlt) 30 Jahren modforge
Der mit "storage chart" betitelte Link wird deshalb nicht hervorgehoben, weil er schlicht und ergreifend in keinem <div> mit der Klasse ".content_splash" eingeschlossen ist.
Unterstriche: Jein. Sie funktionieren zwar *meistens*(tm), aber laut Spec sind die iirc nicht erlaubt. Deshalb habe ich irgendwann alles von Unter- auf Bindestriche (die sind nämlich erlaubt) umgestellt. Das sieht auch nicht schlechter aus und ist auch noch besser zu tippen.
[Exkurs] Übrigens macht der IE einmal mehr komische Sachen: Dort wird ein Attribut "_foo" als "foo" interpretiert, von "richtigen" Browsern nicht. Zum Auskommentieren (während der Entwicklung!) eignet sich das also nicht . Da verwende ich dann "f_oo", weil das sowohl IE als auch die anderen Browser als ungültiges Attribut ansehen.
Was das Letter-spacing angeht, da solltest du keine Pixel, sondern eine relative Einheit (z.B. em) verwenden, damit das auch beim Skalieren noch den gewünschten Effekt beibehält.
Sofern man nicht gerade mit Rastergrafiken arbeitet und daher pixelgenaue Angaben benötigt, sind relative Angaben immer eine gute Idee. Dann sieht das nämlich auch für eine Beamer-Präsentation o.ä. gut aus, wofür man ggf. vergrößern muss.
Die CSS-Attribute in den Blöcken solltest du auf jeden Fall für die (initiale) Lesbarkeit einrücken, zwei oder vier Pixel sind da gängig und angebracht.
Bei 0-Werten kann man die Einheit auch weglassen, was wiederum oft die Lesbarkeit erhöht.
Was sollen eigentlich so Scherze wie <p> am Zeilenende? Sauberes XHTML ist immer eine gute Idee.
Bei den Links selbst solltest du überlegen, ob du sie nicht durch den typischen Strich darunter hervorhebst, damit sie aus dem (insbesondere gleichfarbigen) Inhalt hervortreten. Eine andere Farbe für Links ist oft hilfreich für den Anwender, aber auch ohne Farben (also bei s/w-Ansicht, nicht zuletzt beim Ausdruck [auch wenn man dafür natürlich separate Styles definieren kann]) sollten Links noch deutlich zu erkennen sein.
So oft wie du Arial als Schriftart angibst, solltest du das gleich in der body-Definition tun - dann nämlich insgesamt nur einmal. Sofern du anderswo überhaupt eine andere Schriftart verwenden möchtest, wendest du die einfach auf das oder die betroffenen Elemente an (lassen sich ja auch z.B. mit `h2, h3, h4 { ... }` zusammenfassen) und hast so eine zentralere Verwaltung der Schriften.
Diese Tipps entstanden nicht zuletzt aus ca. (gefühlt) 30 Jahren modforge
Zitat von »Grinchy« 