Kategorien
Design HTML/CSS

Leseleiste

Es gibt viele Möglichkeiten, das Lesen längerer Texte angenehm zu gestalten. Illustrationen, Gliederungen, Textformatierungen und vieles mehr bieten sich an. Wie wäre es zum Beispiel mit einer dynamischen Leseleiste, an der sich das Auge orientieren kann?

Die Leseleiste ist im Prinzip nichts anderes als ein zarter Strich. Wir haben uns für eine dünne rote Linie entschieden, die wir so erzeugen:

 <p style="background: transparent; border-top : 1px solid red;
    font-size : 1pt">&nbsp;</p>

Dank des durchsichtigen Hintergrundes lässt sich die Leiste später flexibel abbilden. Andere Farben, Strichstärken oder sogar Grafiken sind natürlich auch denkbar.


Screenshot

Leseleiste in Aktion

Bewegen lässt sich das Ganze via DHTML. Dazu ist allerlei Code notwendig. Deshalb haben wir uns entschieden, die Leseleiste über ein HTC (Link) einzubinden. Ein komplettes Script befindet sich in einer separaten Datei und bringt die oben definierte Leiste in Bewegung. Dies klappt nur mit dem Internet Explorer ab Version 4, andere Browser verstehen die Anweisung nicht und ignorieren sie. Das ist von Vorteil, da man auf die Weise mögliche Fehlermeldungen, wie zum Beispiel mit Opera oder alten Browsern, geschickt umgehen kann.

Live Muster | HTC Datei zum Download

So binden Sie Script und Leiste in Ihre Seite ein:

      <div id=leiste style="BEHAVIOR: url(scripts/float.htc)width:
    100% height: 1px" TITLE="Leselinie">
      <p style="background: transparent; border-top : 1px solid red;
    font-size : 1pt">&nbsp;</p>
      </div>

Die Leiste folgt dem Text beim Scrollen und bietet dem Auge eine zusätzliche Orientierungshilfe. Je nach Länge des Browserfensters und gegebenem Seiteninhalt reicht die Leiste vielleicht nicht bis an das Textende – eine Frage des Layouts. Die Leseleiste ist eine benutzerfreundliche Idee.

Kategorien
Design HTML/CSS

Style Sheet on Demand

Viele Besucher haben unterschiedliche Vorlieben. Da Style Sheets die komplette Seite formatieren können, lassen sich verschiedene Versionen der Seite bauen, aus denen der Besucher seine bevorzugte Version auswählt. Hier die JavaScript-Variante des Tricks.

Sinn macht das vor allem zur Unterscheidung zwischen Druck- und Bildschirmversion, oder mit größeren Schriften für Besucher mit Sehschwächen.

Zum Live-Demo (neues Fenster)

Die Beispiel-Datei kann drei verschiedene externe Style Sheets aufrufen. Ein kleines Javascript wählt das jeweilige Style Sheet aus. Mit dem Link wird die Datei in einem neuen Fenster aufgerufen. Mit einem Fragezeichen wird der Wert für die Style Sheet-Abfrage angehängt, den unsere JavaScript Funktion dann abfragt.

Die Links in der Datei sehen so aus (die Datei heißt linker.html):

 <a href="linker.html?1" target="_blank">Seite
neu formatieren (1)</a><br>
 <a href="linker.html?2"
target="_blank">Seite neu formatieren (1)</a><br>

<a href="linker.html?3" target="_blank">Seite neu formatieren
(1)</a><br>

Das Skript im HEAD der Datei sieht wie folgt aus:

      <script language="javascript">
 var style
= location.search;
 style = style.substr(1,2);
      if(style=="1")
{document.write('<link rel="stylesheet" type="text/css"
href="linker1.css">');}
 if(style=="2") {document.write('<link
rel="stylesheet" type="text/css" href="linker2.css">');}

if(style=="3") {document.write('<link rel="stylesheet"
type="text/css" href="linker3.css">');}
 </script>

Der Variable „style“ wird mit location.search der mit dem Fragezeichen übermittelte Wert zugewiesen. Da nicht nur die Zahlen 1, 2 oder 3, sondern auch das Fragezeichen zugewiesen wird, weist die Funktion substr der Variable „style“ nur das zweite Zeichen zu, das Fragezeichen wird also gelöscht. Die IF-Abfrage entscheidet anhand des Wertes der Variable „style“, welches Style Sheet nun eingebunden wird.

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

Anmerkungen zur Unterstreichung

Textpassagen oder Worte mit Hilfe einer Unterstreichung hervorzuheben ist eine selbstverständliche Sache. Aber nicht im Web.

Hier ist die Unterstreichung verpönt, denn man kann sie leicht mit einem Hyperlink verwechseln. Der Besucher wird unweigerlich klicken und aller Wahrscheinlichkeit nach enttäuscht sein, weil nichts passiert.

Sie können die Unterstreichung trotzdem verwenden. Mit CSS. Sie muss nur etwas dicker als gewöhnlich ausfallen, die Farbe lässt sich ebenfalls variieren. Damit wird die Verwechslungsgefahr beseitigt.

Zwei Beispiele

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.

Der Quellcode

 <span
style="border-bottom : 2px solid black">nonummy</span>
      <span
style="border-bottom : 2px solid red">wisi enim</span>

Mehr als 2 Pixel wirkt übertrieben, die Wirkung ist jedoch abhängig vom gewählten Durchschuss (line-height). Üblicher Hinweis: alte Browser können das nicht, ein entscheidender Verlust ist das aber in diesem Fall nicht.

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

Ausdrucken verhindern

Erste Möglichkeit: Nichts mehr im Web veröffentlichen. Zweite Möglichkeit: Die Seiten so häßlich und uninteressant machen, dass niemand sie ausdrucken will.

Das Web ist ein offenes Prinzip. Die Web-Seiten sind doch für den Besucher da. Der Eine druckt gern, der Nächste speichert und wieder andere kopieren die Inhalte. Verbieten kann man das nicht.

Nun, eine Möglichkeit gibt es. Sie funktioniert allerdings nur mit neuen Browsern. Legen Sie ein externes Stylesheet an und schreiben Sie diese Zeile hinein:

 BODY { display
: none;}

Anschließend verbinden Sie die neue Datei druck.css auf diese Weise mit Ihren Seiten:

      <link rel="stylesheet"
media="print" href="druck.css">

Wir empfehlen, das Gegenteil zu tun.

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;}

Kategorien
Design HTML/CSS

URLs im Ausdruck

Dietmar Rabich

Links können angeklickt werden und die neue Seite erscheint. Druckt man allerdings eine Seite aus, gehen Informationen verloren.

So unter anderem die URL, die hinter einem Link steht, denn diese ist normalerweise nicht sichtbar. Ein klein wenig CSS schafft Abhilfe:

 @media print
 {
 a[href]:after

{
 content: \' [\' attr(href) \']\';
 }
 }

Die Anweisung sorgt dafür, dass die URL, die hinter einem Link steht, auf der gedruckten Seite erscheint. Bei der normalen Darstellung im Browser ist davon nichts zu merken.

Mit ein wenig CSS3, dem zukünftigen Nachfolger von CSS2, kann die Sache noch ein wenig spezialisiert werden:

      @media print
 {
 a[href^=\"http://\"]:after,

a[href^=\"ftp://\"]:after
 {
 content: \' [\' attr(href) \']\';

}
 }

Um die Technik nutzen zu können, muß der Browser die entsprechenden CSS2-Fähigkeiten haben – aktuelle Versionen von Mozilla und Opera sind dazu in der Lage.

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

CSS3: Der Stand der Dinge

von Steffen Wenzel

Cascading Style Sheets Level 1 ist längst etablierter Standard, auch CSS2 wird immer flächendeckender unterstützt. Aber wie sieht es aktuell mit CSS Level 3 aus? Welche Innovationen plant das W3C, und wann können diese in die Praxis umgesetzt werden?

Module
Die CSS-Spezifikation der dritten Generation wird – im Gegensatz zu seinen Vorgängern – kein zusammenhängendes Dokument sein, sondern aus einzelnen Modulen bestehen, die sich ausschließlich mit der Syntax oder dem Box Model befassen. Hier wurde an die Autoren gedacht, die Dokumente so einfacher aktualisieren und bearbeiten können.

Außerdem soll diese Regelung den User Agents (Programme oder Hardware, die das Dokument dann darstellen oder lesen soll) die Möglichkeit eröffnen, sich die Module auszusuchen, die sie unterstützen. So muss ein PDA mit Schwarzweiß-Display das Farbenmodul nicht komplett unterstützen. Dazu wird vom W3C eine Untergruppe, die verschiedene Module enthalten soll, vorgegeben. Wenn sich ein Hersteller für ein Modul entscheidet, muss er es auch nach dem Willen der Erfinder voll und ganz unterstützen. Ob sich diese auch daran halten, wird die Zukunft zeigen.

Status
Mit einer fertigen Recommendation ist in nächster Zeit nicht zu rechnen, denn zu vielen Modulen wurde nach jetzigem Stand noch keine Veröffentlichung oder Working Draft gemacht; zumindest keine Öffentlichen. Auch viele angesetzte Termine wurden bereits überschritten. Andererseits besteht kein wirklicher Grund zur Eile. Die CSS2-Empfehlung stammt aus dem Jahr 1998 und ist auch noch nicht komplett umgesetzt.

Die Browserhersteller scheint das aber nicht zu interessieren. Sie picken sich stattdessen die interessantesten Features schon jetzt heraus, wie die sprichwörtlichen Rosinen aus dem Kuchen. So haben Mozilla und der Internet Explorer bereits proprietäre Deklarationen, um Transparenz zu erzeugen, obwohl diese Funktion erst ab CSS3 vorgesehen ist. Nebenbei: beide liegen etwas daneben. Die Eigenschaft soll schlicht und einfach „opacity“ heißen.

Bisher beschränken sich die Neuerungen hauptsächlich auf eine Präzisierung der voran gegangenen CSS-Versionen. So kann man beispielsweise bestimmen, an welchem X/Y-Wert der Hintergrund beginnen soll oder ob er sich in dem Rahmen erstreckt. Auf einige Module möchte ich aber doch etwas detaillierter eingehen.

Medien
Mit CSS3 wird es möglich sein, das Medium, auf dem das Dokument angezeigt wird, mit komplexen Abfragen zu ermitteln. Bisher schrieb man schlicht und einfach

 <link 
rel="stylesheet" type="text/css" media="print, handheld" 
href="print.css">
    

um ein Stylesheet für PDA und Ausdruck festzulegen. Jetzt wird es möglich, die folgende Abfrage zu starten:

      <link 
rel="stylesheet" media="screen, print and resolution > 90dpi" 
href="highres.css">
    

Dies überprüft, ob das Anzeigemedium entweder ein Bildschirm oder ein Drucker ist. Dieser Drucker muss aber mit mehr als 90dpi Auflösung arbeiten, sonst wird dieses Stylesheet nicht verwendet. Damit kann man das Problem mit kleinen Schriftarten umschiffen, die zwar zur Zeit recht beliebt, aber auf einem niedrig auflösenden Ausdruck schwer lesbar sind.

Selectors
Auch die Selectors werden um einige Funktionen erweitert. (Der Selector in der Deklaration P { font-size: 13px; } ist P. P.footer wäre auch einer.) Man wird die Möglichkeit haben, vom User ausgewählte Checkboxen anders zu formatieren als nicht ausgewählte oder jene Elemente, die einen bestimmten String (Buchstaben- oder Zeichenkette) enthalten, der mit einem gelben Hintergrund versehen ist. Eine praktische Anwendung wäre hier eine DHTML-Suchfunktion, die vom User eingegebene Wörter sucht und den ganzen Absatz hervorhebt.

Mehrspaltiges Layout
Das W3C möchte eine Syntax schaffen, mittels derer ein vielseitiges mehrspaltiges Layout erzeugt werden kann, ohne komplizierten Code schreiben zu müssen. Das könnte auch funktionieren, denn mit nur einer Hand voll Deklarationen wird dem Browser mitgeteilt, wie er die Spalten zu rendern hat. Dieser Befehlscheint aber mehr darauf ausgerichtet zu sein, Text in mehrere nebeneinander liegende Spalten zu einzuteilen, wie es bei Zeitungen der Fall ist – weniger als Layoutmittel zum Ersatz von Tabellen. Ob man damit aber mit ein wenig kreativem Umgang CSS-basierte Layouts erzeugen kann, wird sich noch zeigen.

Paged Media
Ein spezielles Stylesheet für den Ausdruck zu erstellen ist längst Standard, oder sollte es zumindest sein. Bisher blieben aber einige Wünsche offen. So sind zum Beispiel Hyperlinks ein Problem. Mit CSS3 wird man aber die Möglichkeit haben sich in der ausgedruckten Version auf das Ziel des Links zu beziehen. Eine Kostprobe:

      <p>Lesen Sie bitte auch die <a href="#copyright">Copyrighthinweise</a>.
    

Am Ende der Seite steht folgendes:

      <h1><a name="copyright">Informationen 
zum Copyright</a></h1> 

Für gewöhnlich würde nur „Lesen Sie bitte auch die Copyrighthinweise“ ausgedruckt werden. Indem man sich aber auf das Ziel bezieht und den Inhalt des Elements auswertet, wird man auch „Lesen Sie bitte auch die Copyrighthinweise auf Seite 3“ oder „Lesen Sie bitte auch die Informationen zum Copyright (S. 3)“ ausdrucken können. Ferner könnte man auch den Inhalt des Attributs „href“ auslesen und so schreiben: Dr. Web (http://www.drweb.de/) ist spitze!. Das alles wird recht unkompliziert über die content-Eigenschaft bewerkstelligt.

Des weiteren wird es machbar sein, Seitenzahl (auch Seite 2 von 5), den aktuellen Titel des Kapitels (aus der Überschrift gezogen), Datum der Erstellung und Angaben wie Autor oder URL des Dokuments im Kopf- oder Fußzeile des Blattes anzuzeigen. Und das ohne großen Aufwand.

Bilanz
Abschließend kann man sagen, dass CSS3 viel komplexere und detailliertere Eingriffe in die Darstellung des Dokuments erlaubt als bisher. Einige Neuerungen erinnern mich spontan an den Beruf eines Schriftsetzers. Ob jeder Webmaster diesen Aufwand betreiben will oder doch nur die effektvollsten Features verwendet bleibt abzuwarten. Zu wünschen wäre es allemal, da das Web nach wie vor zu einem Löwenanteil aus schriftlichen Informationen besteht und die Lesbarkeit im Vordergrund stehen sollte.

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

Gepunktete Rahmen

Auch das Webdesign unterliegt modischen Strömungen. Mit erweiterten Standards und neuen Browsern ändert sich auch das Aussehen der Websites.

Zunehmend häufiger zu finden sind gestrichelte Linien, sie ersetzen die die bekannten, dicken Tabellenlinien und da man sie bequem und einfach mit CSS erzeugen kann, braucht man keine Grafiken mehr.

Der Quellcode ist einfach, mit Containern statt mit Tabellen klappt es natürlich genauso.

Inhalt
 <table
style="border : dotted 2px black;" 
width="200" border="0"><tr><td>Inhalt</td>
</tr></table>

Zu sehen sind sie zwar nur mit modernen Browsern, aber das ist nicht weiter schlimm, da sie ja die Funktionalität nicht einschränken. Wählt man anders als im Beispiel oben eine Breite von nur einem 1px, zeigen Mozilla/Netscape/Opera und der IE ein anderes Bild. Microsofts Produkt zaubert gestrichelte Linien auf den Monitor, hässlich ist aber auch das nicht.

Kategorien
Design HTML/CSS

Font-Tags ausradieren

Wer seine Webseiten in Helvetica oder Verdana formatieren will oder muss, kommt um unzählige Font Tags nicht herum. Die aber machen den Quellcode unübersichtlich und verdoppeln unter Umständen die Ladezeit eines Dokuments. Externe Style-Sheets sind eine Alternative. Doch gilt es einige Klippen zu umschiffen.

Vor allem der inzwischen recht veraltete Netscape 4.x macht die Reinigungsaktion zu einem wackeligen Unterfangen – sofern man auf ihn Rücksicht nehmen will. Es geht aber doch. Definieren Sie für Absätze <P> sowie Tabellenspalten und -Zeilen jeweils dieselbe Formatierung.

 P { font-family :
Arial,Helvetia,sans-serif; font-size : 10pt;} 

 TD { font-family : Arial,Helvetia,sans-serif;
font-size : 10pt;} 

 TR { font-family : Arial,Helvetia,sans-serif; font-size
: 10pt;} 

Das veranlasst sowohl Internet Explorer als auch Netscape sämtlichen Text in einer serifenlosen Schriftart anzuzeigen. Und zwar in der hier definierten Größe von 10 Punkt. Sie können auch alles in eine Zeile schreiben:

      p,td,tr { font-family : Arial,Helvetia,sans-serif; font-size : 10pt;}

Zu Problemen kommt es, wenn Sie verschiedene Schriftgrößen einsetzen möchten. Denn die Formatierung size=“1″ funktioniert jetzt nur noch im Microsoft Browser. Netscape erzwingt überall 10 Punkt, egal was sonst noch im Quellcode steht. Dies läßt sich umgehen, indem Sie jedem anders zu formatieren Bereich eine eigene Styleanweisung (class) definieren.

      .klein { font-size
: 8pt; } 

Im HTML Code sieht das dann so aus.

      <p
class="klein">Kleiner Text</p> 

Das gilt auch, wenn Sie zum Beispiel Blocksatz erzwingen wollen. Denn was für Fließtext sinnvoll ist, ist es bei Überschriften nicht unbedingt. Auch hier muss mit einer zusätzlichen Definition gearbeitet werden, um einen Textbereich linksbündig oder mittig auszurichten.

Das Gute daran. Alles was in ein externes Style Sheet ausgelagert wurde, lässt sich flink ändern. Sie können mit einem Handgriff den Blocksatz für die gesamte Web-Site aufheben, die Schriftfarbe, den Zeilenabstand oder die Größe ganzer Passagen oder Teile davon ändern.

Ganz auszuschließen sind Probleme allerdings nicht. Der IE3 ist in Sachen CSS recht unterbelichtet, glücklicherweise ist er nur noch selten anzutreffen. Vom Communicator gibt es inzwischen so viele Versionen, dass Testen keinen Sinn mehr macht. Manchmal klappt es nicht, wenn mehrere Anweisungen hintereinander stehen, dann hilft nur noch probieren. Eine praktikable Lösung läßt sich aber meist finden.

Kategorien
Design HTML/CSS

Unsichtbare Links

Eine nicht eben sinnvolle Anwendung, denn für gewöhnlich wünscht man sich, dass Hyperlinks angeklickt werden. Wer es gern einmal andersherum probieren möchte oder geheime Zugänge anbieten will, könnte es mit diesem Trick versuchen.

Links verraten sich auf mehrere Weise. Durch die Farbe, die Unterstreichung, den Mauszeiger und durch einen Hinweis in der Statuszeile des Browsers. All das lässt sich abschalten, bzw. verbergen.

 <a
href="link.html" style="cursor:text; 
text-decoration : none;

color : black;" onMouseOver="status=''; return true;">
Link</a>

cursor : text zeigt einen Cursor wie normaler Text, color : black passt den Link der Textfarbe an (in diesem Falle schwarz), text-decoration : none schaltet die Unterstreichung ab und onMouseOver= unterbindet die verräterische Zielanzeige in der Statuszeile.

Versuchen Sie es einmal auf dieser Demoseite. Was man damit in der Praxis anfangen kann, steht auf einem anderen Blatt. Alte Browser zeigen einen Standardlink.

Kategorien
Design HTML/CSS

Mehr Orientierung in Datentabellen

Je größer sie ausfallen, desto schwerer fällt es dem Auge die Zeile zu halten. Da hilft nur noch der Zeigefinger. Oder ein spezielles Tabellendesign.

Berührt die Maus eine Zelle, verändert sich der Rahmen, er wird rot. Das klappt, weil wir nicht die Zelle mit einem Rahmen umgeben haben, sondern den Tabelleninhalt. Dazu bedarf es eines vergrößerten Randabstandes (cellpadding=“8″).

Screenshot
Die Maus berührt eine Tabellenzelle

Der Tabelleninhalt wird verlinkt und via CSS mit einem simplen Hover-Effekt versehen. Den Mauszeiger stellen wir auf seinen Standard-Optik zurück (cursor : default), denn der Scheinlink selbst soll dem Besucher verborgen bleiben.

 <a href="#">Tabelleninhalt</a>

Eine solche Datentabelle bedeutet mehr Aufwand, aber der könnte sich ja lohnen. Schließlich sieht’s schicker aus und der Zeigefinger darf ruhig bleiben. Nie mehr verschmierte Monitore. Hier geht’s zur Live Demo.

Der CSS Quellcode für den Dateikopf

      A:link {
 color : black;
 text-decoration: none;
 background-color
: transparent;
 border : 1px solid gray;
 padding : 4px; 
 cursor : default}
      
A:visited {
 color : black;
 text-decoration: none;
 background-color
: transparent;
 border : 1px solid gray;
 padding : 4px; 
 cursor : default}
      A:hover
{
 color: black;
 text-decoration: none;
 background-color : transparent;

border : 1px solid red; 
 padding : 4px;
 cursor : default} 

Die Methode funktioniert mit allen modernen Browsern. Ältere zeigen nur den Effekt nicht an.