Teil 3: Workshop CSS
- Workshop CSS
- Teil 2: Workshop CSS
- Teil 3: Workshop CSS
Grafik und Text verknüpfen Das nächste Beispiel verknüpft Grafiken mit Links und reagiert in beide Richtungen. Wird das hover-Element der Grafik ausgelöst, wird gleichzeitig auch der Text geändert und umgekehrt....
Grafik und Text verknüpfen
Das nächste Beispiel verknüpft Grafiken mit Links und reagiert in beide Richtungen. Wird das hover-Element der Grafik ausgelöst, wird gleichzeitig auch der Text geändert und umgekehrt.
Mit dem bekannten Verfahren der CSS-Sprites wird auch in diesem Beispiel die passende hover-Grafik geladen - es existieren insgesamt drei Dateien mit je zwei roten, blauen und grünen Kreisen.
ul li#rot a {
background: url(rot.gif) bottom
center no-repeat; }Im Gegensatz zu den anderen Beispielen wird an dieser Stelle als Erstes die untere Grafik ausgewählt und angezeigt.
ul li#rot a:hover {
background-position: top center; }Mit dem hover-Ereignis wird der Fokus von der unteren Grafik auf die obere verändert und gleichzeitig über das hover-Ereignis des Anchor-Tags der Text umformatiert:
a:hover { color: red;
font-weight: bold; }Die Listenelemente werden in gewohnter Form von links nach rechts angeordnet, die Texte werden noch einmal speziell platziert. Dies geschieht über die CSS-Formatierung:
ul li#rot a em { top: 150px; }Jeder weitere Text wird 30 Pixel unterhalb des vorherigen über die Eigenschaft top platziert. Da die Grafiken jeweils 100 Pixel breit sind, würden die Texte für blau und grün automatisch 100 Pixel nach rechts rücken. Damit dies nicht passiert, korrigieren Sie die Position über die Eigenschaft links um -100 Pixel beim ersten und -200 Pixel beim zweiten, damit die Schriftzüge untereinander angeordnet sind.
ul li#blau a em { top: 180px;
left: -100px; }
ul li#gruen a em { top: 210px;
left: -200px; }Themenwolke
Sogenannte Themenwolken können Sie mit einfachen Mitteln erstellen. Dazu benötigen Sie als Erstes die Themenliste, welche Sie abbilden möchten. Im Beispiel gibt es insgesamt zwölf Themen, die verlinkt werden sollen. Der notwendige HTML-Bereich sieht dafür wie folgt aus:
<div id="page-wrap"><ul><li><a class="punkt1" href=#">
iPhone</a></li><li><a class="punkt2" href=#">
Internet Magazin</a></li><li><a class="punkt3" href=#">
Firefox</a></li><li><a class="punkt4" href=#">
VDSL</a></li><li><a class="punkt5" href=#">
Web 2.0</a></li><li><a class="punkt6" href=#">
VoIP</a></li><li><a class="punkt3" href=#">
Green IT</a></li>
...</ul></div>Der <div>-Tag page-wrap dient dazu, einen Bereich zu schaffen, in welchem die Begriffe optisch angeordnet werden.
#page-wrap {
width: 410px; margin: 20px auto; }Er besitzt im Beispiel eine Breite von 410 Pixeln, kann aber frei angepasst werden. Die eigentliche Arbeit geschieht in den Klassen punkt1 bis punkt6.
ul li a.punkt6 {
color: #430069;
padding: 24px; }
ul li a.punkt6:hover {
background-color: #7600b9;
color: white; }Die erste Formatierung - bei nicht aktiviertem Punkt - weist punkt6 einen Lilaton als Schriftfarbe zu und sorgt für einen entsprechenden Abstand. Diese wurden bei den einzelnen Punkten bewusst unterschiedlich gehalten, um die gewollte Unordnung herzustellen.
Der hover-Effekt weist nun dem Begriff eine weiße Schriftfarbe und gleichzeitig einen lila Hintergrund zu. Der Link kann natürlich durch Setzen des href-Attributs im HTML-Teil gesetzt werden.
Erben und vererben
Einige dieser Beispiele arbeiten mit dem Überschreiben von Attributen oder setzen verschiedene Werte doppelt und übersteuern so den ersten Wert. Damit dies auch erfolgreich funktioniert, sollten Sie einige Grundregeln beachten. Am einfachen Beispiel wird die Problematik schnell deutlich. Als Erstes legen Sie eine Aufzählung mit drei Fußballvereinen an und verwalten diese unter der ID BuLi: FC Bayern München, Schalke 04 und VfB Stuttgart.
<ul id="BuLi"><li>FC Bayern München</li><li>Schalke 04</li><li>VfB Stuttgart</li></ul>Alle drei Vereine erhalten die Standardformatierung über die Klasse BuLi:
ul#BuLi li {
font-weight: normal;
font-size: 18px;
font-family: Courier;
color: black; }Sie möchten im nächsten Schritt Ihren Lieblingsverein, etwa Bayern München, fett drucken und anstelle der Standardschriftfarbe den Mannschaftsnamen in Rot schreiben. Sie definieren dazu eine Klasse liebling und weisen diese dem ersten Listenelement zu:
<ul id="BuLi"><li class="liebling">
FC Bayern München</li>
...Die Zuweisung der neuen Attribute erfolgt im Kopf über die CSS-Klasse:
.liebling {
color: red; font-weight: bold; }Anstelle der erhofften Formatierung erscheint die Liste jedoch weiterhin im gewohnten Aussehen. Die Ursache hierfür ist, dass es für die Schriftfarbe und die Formatierung zwei unterschiedliche Aussagen gibt: über die CSS-Klasse ul#BuLi li erhalten diese eine normale Formatierung und die Schriftfarbe Schwarz. Die Klasse liebling versucht diese zu übersteuern, hat jedoch keinen Erfolg.
Deswegen sollten Sie ein paar einfache Regeln beachten: Nutzen Sie mehrfach die gleiche Klasse und überschreiben darin enthaltene Werte, so gilt immer die zuletzt getroffene Zuweisung. Dies gilt jedoch nicht in diesem Beispiel, denn an dieser Stelle kommt eine weitere Regel zum Tragen: Seien Sie immer so genau wie möglich bei der Adressierung der Klasse. Die allgemeine Formatierung der Listenelemente (ul#BuLi li) ist dabei klar im Vorteil, denn es sind sowohl das HTML-Tag als auch der Klassenname sowie das Listenelement bei der Adresse der Klasse benannt.
Berücksichtigen Sie dies auch bei der Namensgebung Ihres Lieblingsvereins und ändern diesen auf ul#BuLi li.liebling. Danach wird auch Ihr Lieblingsverein - im Beispiel der FC Bayern München - in roten Buchstaben erstrahlen.
Text durch Grafik ersetzen
In einigen Beispielen haben Sie gesehen, dass CSS auch dazu verwendet wird, einem bestimmten Tag eine Grafik zuzuweisen. Dies hat den Vorteil, dass die Suchmaschinen- Roboter den Text sehen, diesen als Überschrift erkennen und somit eine größere Bedeutung zuweisen, obwohl es sich nur um eine Grafik handelt. Im anschließenden CSS wird dann aus dem Text ein Logo.
Der Überschrift wird die Klasse logo zugewiesen und mit einem Text versehen:
<h1 class="logo">Internet World</h1>Die Klasse logo lädt dann die Grafik nach.
h1.logo {
width: 350px; height: 75px;
background: url(logo.jpg);
text-indent: -9999px; }Diese Vorgehensweise hat jedoch auch einen Nachteil: Hat der Besucher Ihrer Website CSS nicht aktiviert, dann kann er auch das entsprechende Bild nicht sehen. Eine Anpassung im HTML-Code gleicht diesen Nachteil aus:
<h1 class="logo"><a href="#"><img src="logo.jpg" alt=
"Internet Magazin" /></a></h1>Damit erhalten Sie selbst bei ausgeschaltetem CSS noch ein Bild. Wenn die Anzeige von Grafiken im Browser unterbunden ist, erscheint immer noch der Inhalt der Eigenschaft alt. Außerdem können Sie sogar beim zweiten Vorgehen bei Bedarf zwei unterschiedliche Grafiken einsetzen, falls dies gewünscht ist.
E-Mail-Links formatieren
Recht wenig geläufig sind die CSS Attribute Selectors - eine Möglichkeit, Elemente basierend auf den Inhalten eines Links zu formatieren. Dies klingt beim ersten Lesen recht kompliziert, gestaltet sich jedoch in der Praxis recht einfach und ist an manchen Stellen auch sehr nützlich.
Eine normale CSS-Klasse sieht für eine Überschrift h1 folgendermaßen aus:
h1 { color: red; }Sie können die Formatierung nun genauer spezifizieren, indem Sie nur Überschriften rot einfärben, die einen Titel haben:
h1 [title] { color: red; }Mithilfe von Operatoren können Sie die bedingte Formatierung noch stärker einschränken, indem Sie zusätzlich den Inhalt des Titels mit in Betracht ziehen:
[title = "Internet Magazin"] berücksichtigt alle Titel, die Internet Magazin beinhalten. [title ~= "Internet Magazin"] berücksichtigt alle Titel, die Internet Magazin als Begriff enthalten. [title ~= "Internet Magazin"] berücksichtigt alle Titel, die Internet Magazin als Begriff enthalten.
Mit diesem Wissen können Sie nun auch Ihre Inhalte neu kombinieren und so Ihre E-Mail-Links individuell formatieren.
Zur Identifikation verwenden Sie den folgenden Befehl: a[href^="mailto"] Er erkennt alle Anchor-Tags, bei denen die Verlinkung mit mailto beginnt. Für diese wird beim Auslösen des hover-Ereignisses im Anschluss an den Link ein Größer-als-Zeichen und die E-Mail-Adresse aus dem Titel eingefügt.
a[href^="mailto"]:hover:after
{ content: " > " attr(title); }Der Trick funktioniert übrigens nicht im Internet Explorer - dieser reagiert nicht auf CSS Attribute Selectors.
