Kategorien
Design HTML/CSS

CSS richtig schreiben

So manche Style-Definition will auf Anhieb nicht funktionieren, Schuld sind nicht selten versteckte Syntaxprobleme. Vor Überraschungen gefeit ist man nur, wenn man mit den Zeichen und Bezeichnungen richtig umgehen kann.

CSS ist „case insensitiv“, das heißt Groß- und Kleinschreibung werden nicht unterschieden.

 b {font-size : 1em;} und 
B {font-size : 1em;}

können geschrieben werden. Ähnliches gilt für eigene Klassen:

      .oben {font-size : 1em;} und
.Oben {font-size : 1em;} und
.OBEN {font-size : 1em;}

sind das selbe.

Zahlen und Sonderzeichen sind hier jedoch nicht erlaubt. Mancher Browser mag sich vielleicht nicht daran stören, ein anderer aber wohl. Vermeiden Sie Definitionen wie:

      .1 {font-size : 1em;} 
._ {font-size : 1em;}
.überschrift {font-size : 1em;}

Die Grundlage dafür ist etwas komplizierter. Erlaubt nach CSS2 sind A-Za-z0-9 und die ISO 10646 Zeichen 161 und höher sowie das Zeichen „-“ mit dem eine Klasse jedoch nicht beginnen darf. Besser also man beschränkt sich auf das Alphabet.

Mancher ist von HTML noch den Gebrauch des Anführungszeichen gewohnt, dies ist hier nicht zulässig.

      B {font-size : "1em";}
    

Klammern müssen immer Paarweise erscheinen. Das gilt für ( und { und [ sowie für “ und ‚.

Leerzeichen produzieren keine Fehler. Dieses Beispiel funktioniert:

      B {font-size :   1em ;}
    

Falschschreibungen sollten dazu führen, dass nichts ausgeführt wird. Beispielsweise:

      K 
{font-size : 1em;}
    

oder

      H8 {font-size : 1em;} 

    

Diese Definitionen wird ein Browser ignorieren. Das gilt auch für:

      P 
{font-family :  garamond;} 

und ähnliche Konstruktionen.

Kategorien
Design HTML/CSS

Villa Kunterbunt

Farbmonitore wurden erfunden, damit man bunte Seiten ansehen kann. Wer will, kann auch Hyperlinks in allen Farben erglühen lassen. Das Interessante: Jeder Link „hovert“ in seinen eigenen Farben. Das nennt man dann nicht einfach bunt, sondern kunterbunt.

Dazu werden Style-Befehle benötigt, die Farben und Links miteinander verbinden. Die lassen sich in den Dateikopf schreiben oder als externes Stylesheet einbinden.

 <style>

A.blue:link { color: blue ; text-decoration:underline; }
 A.blue:visited {
color:blue; text-decoration:underline; }
 A.blue:active { color: red; text-decoration:underline;
}
 A.blue:hover { color: magenta; text-decoration:underline; }
      A.green:link
{ color: green ; text-decoration:underline; }
 A.green:visited { color:green;
text-decoration:underline; }
 A.green:active { color: red; text-decoration:underline;
}
 A.green:hover { color: red; text-decoration:underline; }
 </style>

Nach dieser Definition werden in die Links entsprechende Klassen eingefügt:

      <a
class="blue" href="#">Navigation</a><br>

<a class="green" href="#">Hyperlink</a><br>

Die Online Demo zeigt, was dabei herauskommt. Der eigenen Kreativität sind hier keine Grenzen gesetzt. Denkbar ist beispielsweise, allen Links, die zu einer Gruppe gehören, gleiche Farben – und unterschiedlichen Gruppen jeweils andere Farben zuzuweisen.

Kategorien
Design HTML/CSS

Doppelte Unterstreichung in Variation

Weder HTML noch CSS kennen die direkte doppelte Unterstreichung. Einen Befehl dafür gibt es jedenfalls nicht. Mit Umwegen kommen wir dennoch ans Ziel.

style=“border-bottom : double

wäre eine der Möglichkeiten.

Das klappt erstaunlicherweise auch in Farbe, indem man den Farbnamen, resp. die entsprechende Codierung dahintersetzt.

style=“border-bottom : double red

Nicht übel, doch noch nicht ganz im Sinne unsere Artikels. Doppelt hält auch bei Unterstreichungen besser. Wer mehr möchte, muss mehr Befehle einsetzen:

style=“text-decoration : text-decoration : underline; border-bottom : 1px solid red“

Damit sorgen wir für eine gewöhnliche Unterstreichung in der Farbe des Textes. Dazu kommt die untere Rahmenlinie (border-bottom), die wir auch in anderen Farben darstellen können, ohne das der eigentliche Text davon berührt wird.

Die dynamische Variante:

Ein Link, der nicht nur bei Mausberührung seine Farbe wechselt (Hover) sondern dessen Unterstreichung ebenfalls eine Variation, nämlich eine Verdoppelung erfährt.

 <style type="text/css">

 <!-- 
 a:visited{TEXT-DECORATION: underline; color : black;} 
 a:hover
{TEXT-DECORATION: underline; color : blue; border-bottom : 1px solid red; } 
      //-->

 </style>

Kategorien
Design HTML/CSS

Verschachtelte Rahmen

Wem ein Rahmen nicht genügt, der kann ja mehrere verwenden und sie verschachteln. Ein wenig CSS genügt und die Tabelle kann zu Hause bleiben.

Standardrahmen sind langweilig. CSS bietet nicht nur mehr Möglichkeiten, sondern auch die kreativeren. Allerdings können die Rahmen nicht einfach mehrmals definiert werden, wir benötigen einige DIV-Container, um das zu erreichen. Die nämlich lassen sich wunderbar ineinander schieben.


So könnte es aussehen

Zu beachten ist die Angabe der Breite im Ersten <div>, diese ist notwendig, da einige Browser sonst den Rahmen über die gesamte Browserbreite anlegen. Hier muss ein wenig probiert werden, um das richtige Maß zu finden. Übrigens: der Vielfachrahmen ist auch um Texte und Hyperlinks möglich.

Live Demo

Es darf eifrig probiert werden, durch verschiedene Abstände (padding) und Rahmenbreiten und -typen entstehen interessante Varianten, die man so nicht für möglich halten würde.

 <div style="width
: 100px;">
 <div style="border : 2px solid blue; padding :
1px; ">
 <div style="border : 2px outset powderblue; padding
: 1px;">
 <div style="border : 2px dotted silver; padding :
1px;">
 <img src="../images/illu_suche_total.jpg" alt=""
width="84" height="84"></div></div></div></div>

Kategorien
Design HTML/CSS

CSS: Spaß mit Rahmen

Rahmen sind ein wichtiges Gestaltungselement, wenn es um Tabellen und das Seitenlayout geht. CSS-Befehle sind hier besonders praktisch. Sie lassen sich auch auf ganze Seiten anwenden – mit überraschenden Ergebnissen.

Die Handhabung ist einfach, es genügt eine Ergänzung im <body>-Tag nach diesem Muster:

 <body style="border : 150px solid yellow;">

Das Ergebnis erinnert auf den ersten Blick an eine geframte Seite. Live Demo. Der dicke Rahmen lässt nur einen verhältnismäßig kleinen Bereich für den eigentlichen Seiteninhalt frei, der sich der Browsergröße anpasst. Damit ist es allerdings noch nicht ganz getan. Mozilla/Netscape Browser zeigen füllen das Browserfenster nicht komplett aus. Und diesen Extrarahmen zu beseitigen, werden die Randabstände manipuliert:

      <body
style="margin : 0px; border : 150px solid yellow;">

Leider reicht auch das noch nicht, der Browser zeigt den Rahmen nämlich nicht komplett an, weil die Seite nicht über ausreichenden Inhalt verfügt. Hat man den, gibt es kein Problem; ist nicht genug Inhalt vorhanden, hilft man ganz einfach nach. Wir definieren einen Layer, der die gesamte Seite füllt. Etwa so:

      <div
style="width : 100%; height : 100%;">Seiteninhalt</div>

Opera spielt nicht ganz mit, ältere Browser müssen hier sowieso passen. Interessant wird die Sache mit kreativen Variationen. Wer Lust hat, probiert einmal die verschiedenen Rahmenarten durch. Als da wären:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset

Selbstverständlich kann jede Seite des Browserfensters anders formatiert werden. Damit sind ausgesprochen bunte und ungewöhnliche Konstruktionen möglich. Das könnte zum Beispiel so aussehen:

      <body style="margin
: 0px; border-left : 150px solid yellow; border-right : 100px ridge blue; border-top
: 120px double red; border-bottom : 150px groove green;">

Natürlich sind sich auch hier die Browser nicht ganz einig, was angezeigt werden sollte. Jeder macht es ein wenig anders, aber im Grunde erhöht das noch den Reiz. Es macht übrigens einen Unterschied, ob die Rahmendefinitionen im <body>-Tag oder im <HTML>-Tag untergebracht werden, was ebenfalls möglich ist. Und natürlich kann auch der Layer für den Inhalt mit einem lustigen Rahmen umgeben werden. Was dabei herauskommt, ist freilich kein funktionales Alltags-Design mehr.

Kategorien
Design HTML/CSS

Elegante Zwischenüberschrift

Wenig Arbeit, aber große Wirkung. Diese Überschriften beziehen ihre Wirkung aus der doppelten Unterstreichung. Sachlich, aber elegant eignen sie sich besonders gut für geschäftliche Auftritte.

Demo im neuen Fenster.

Screenshot
Elegante Zwischenüberschriften

Beispiel 1 verwendet eine linksbündige Ausrichtung, Beispiel 2 tut dasselbe nach Rechts. Klappen sollte das mit allen CSS-fähigen Browsern.

 <h3 style="text-align:
left; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 0px"><span style="font-family:
Verdana, sans-serif; font-size: .8em; border-bottom: 3px solid black;">Betonte
Überschrift</span></h3>
      <p
style="border-top: 1px solid black; padding-top: .8em; padding-top: 0; margin-top:
0;font-size: 1em;"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

Das H3-Element ist nicht zwingend nötig, doch mit ihm bleibt die logische Struktur erhalten. Um den erhöhten Platzbedarf der H3-Überschrift auszugleichen, wurden „margin“ und „padding“ hinzugefügt.

Kategorien
Design HTML/CSS

Aurales Webdesign mit CSS

von Jan Winkler

Die Mehrheit aller Webworker setzt Cascading Style Sheets zur Textgestaltung oder zur Anordnung von Objekten ein. Aber CSS könnte noch viel mehr: nämlich Webseiten für Sprachbrowser attraktiv machen.

Sprachgestaltung

Ebenso wie normaler Text mittels Farbe, Schriftart oder -größe gestaltet werden kann, ist es mit CSS auch möglich, eben diesen Text für die Ausgabe in einem Sprach-Browser attraktiver zu machen. Dies kann beispielsweise durch unterschiedliche Stimmen bei einem Gesprächstext oder spezifischere Betonungsmechanismen bei einer Erzählung geschehen.

Gestaltung von Stimmen
Um die Lesestimme zu verändern (hohoho) stehen gleich mehrere CSS-Eigenschaften zur Verfügung. Hierzu zählen pitch (Stimmenlage), pitch-range (Stimmbereich), richness (Helligkeit), speech-rate (Sprechgeschwindigkeit), stress (Betonung) und voice-family (Klang). Um nun beispielsweise einen Gesprächstext für den Zuhörer akustisch etwas aufzupeppen, wäre es denkbar, mit diesen Eigenschaften zwei Charaktere zu erstellen. Ein Beispiel:

 <style>

.anton
 { voice-family:male; richness:75;
 pitch:low; speech-rate:slow;
}
      .monika
 { voice-family:female; richness:35;
 pitch:medium;
speech-rate:medium; }
      .betonung
 { stress:75; speak:spell-out;
}
 </style>
 ...
      <p>Es ist ein schöner
Tag: Die Vögel zwitschern
 und der Bach plätschert ruhig vor sich
hin ...</p>
 <p class="anton">Hallo Monika.</p>

<p class="monika">Hallo, wie gehts?</p>
 <p class="anton">Danke,
gut, ich komme gerade aus dem HTZUF.</p>
 <p class="monika">Woher
kommst du?</p>
 <p class="anton">Na, aus dem <span
class="betonung">HTZUF</span>.</p> ...

Wie im Beispiel gezeigt empfiehlt es sich manchmal, auch nur bestimmte Worte oder Wortgruppen mit eigenen Sprachdefinitionen zu versehen. Hier wird durch die speak-Eigenschaft beschrieben, dass bei Elementen der Klasse betonung alle Buchstaben einzeln ausgesprochen werden sollen. So wird erreicht, dass der so definierte Text, also extrem deutlich artikuliert wird, wodurch das Akronym erst richtig zur Geltung kommt.

Pausen
Neben verschiedenen Stimmen bieten sich auch Pausen oder verschiedene Geschwindigkeiten zur auralen Gestaltung von Texten an. Die Eigenschaften pause (Pausendefinition), pause-after (Pause nach dem Element), pause-before (Pause vor dem Element) und speech-rate (Sprechgeschwindigkeit) finden hier besonderen Anklang. Bei den drei pause-Eigenschaften sollte der Wert nicht zu hoch gewählt werden, da der Sprachfluss sonst unnötig gestört werden könnte. Pausen bieten sich auch bei Aufzählungen, Absätzen oder Überschriften an. Beispiel:

      H1
{ pause-before: 1500ms; pause-after: 1000ms; }
 P { pause-before: 500ms; pause-after:
500ms; }
 ACRONYM { pause:500ms; speak:spell-out; }

Effekte
Unter Umständen lohnt es sich auch, gewisse Effekte in den Text einzubauen. So könnte bei steigender Spannung die Sprechgeschwindigkeit (speech-rate) erhöht und bestimmte Wörter könnten akustisch mit Hintergrundmusik (play-during) hinterlegt werden, um die Aussagekraft zu verstärken (bumm, platsch, schepper, klirr …) oder der Klang kommt aus verschiedenen Richtungen (azimuth [horizontal] / elevation [vertikal]) um eine Distanz zwischen zwei Stimmen zu verdeutlichen. Viele weitere Möglichkeiten ergeben sich. Beispiel:

      <style>

.erzaehler
 { elevation: lower; }
      .anton
 { voice-family:male;
azimuth:left; }
      .monika
 { voice-family:female; azimuth:right-side;
}
      .wasser
 { play-during: url('wasser.wav') mix repeat;
}
 </style>
      ...
      <p class="erzaehler">Es
ist ein schöner Tag:
 Die Vögel zwitschern und <span class="wasser">der
Bach plätschert
 ruhig vor sich hin ...</span></p>
 <p
class="anton">Hallo Monika.</p>
 <p class="monika">Hallo,
wie gehts?</p> ...

Spezifische Sprache
Bei einigen Elementen – wie beispielsweise Tabellen – bietet es sich an, den normalen Textfluss durch CSS-Eigenschaften etwas abzuändern, damit der Zuhörer dem Kontext leichter folgen kann. Dazu gibt es speziell für Tabellen eine Eigenschaft die es erlaubt, das Lesen von Tabellen zu kontrollieren: Die speak-header-Eigenschaft. Sie beschreibt, wann und wie oft Tabellenüberschriften (besser gesagt Spaltenüberschriften) gelesen werden sollen. Die Werte once (einmalig) und always (jedes Mal) beschreiben dabei, ob die Überschrift vor jeder Zelle (jedes Mal) oder nur vor jeder Spalte (einmalig) vorgelesen werden sollen. Je nach Größe und Umfang der Tabelle ist die eine oder andere Variante zu empfehlen. Beispiel:

      <table>

<thead>
 <tr>
 <th id="LM">Ware</th><th>Preis</th><th>Anzahl</th>

</tr>
 </thead>
 <tr>
 <th headder="LM">Brot</th>

<td>2,50 EUR</td><td>1</td>
 </tr>
 <tr>

<th headder="LM">Milch</th>
 <td>1,40 EUR</td><td>3</td>

</tr>
 </table>

Mit der Definition

      TABLE {speak-header:always;}

Mit der Definition

      TABLE {speak-header:once;}