Tipps & Tricks

Tabellen umformatieren

(msc) Über eine Stildatei kann man Tabellen auf vielfältige Weise formatieren. Webdesigner Seamus P. H. Leahy zeigt auf seiner Website moronicbajebus.com, dass es sogar möglich ist, nur über eine CSS-Datei die tabellarische Darstellung aufzubrechen und den Tabelleninhalt als Fliesstext darzustellen. Das mag auf den ersten Blick unsinnig sein – auf den zweiten Blick könnte man aber zum Schluss kommen, dass ein Umformatieren grösserer Tabellen über eine CSS-Datei viel schneller geht als das Umbauen.

Bei dem Beispiel wurde die Originaltabelle durch die folgenden Stildeklarationen umformatiert:

table#fluss tr > th {display: none;}
table#fluss tbody tr {display: block}
table#fluss tr > * {display: block; border:none}
table#fluss tr td:first-child {font-size:large; font-weight:bold}
table#fluss tr td:first-child + td:before { content: "Hauptort: "; font-weight:bold}
table#fluss tr td:first-child + td + td:before {content: "Beitritt: "; font-weight:bold}
table#fluss {border:none}

Was passiert hier genau? Der Trick ist, mit Selektoren geschickt die einzelnen Zellen neu umzubrechen und mit der Content-Eigenschaft richtig zu beschriften. Als erstes unterdrücken wir die Anzeige des Tabellenkopfs mit display:none. Die verschiedenen Anweisungen display:block führen dazu, dass die normalerweise nebeneinander angezeigten Zellen untereinander (mit Zeilenwechsel) dargestellt werden. Ferner werden über border:none die Rahmen ausgeblendet und über Schriftgrössen und font-weight-Angaben die einzelnen Haupteinträge hervorgehoben.

Über das content-Statement schaffen wir es, die einzelnen Zeilen zu beschriften (mit «Hauptort» und «Beitritt»).

Text in die Zwischenablage übertragen

(msc) Per JavaScript kann eine Webseite mit der Zwischenablage auf dem PC des Anwenders Daten austauschen. Damit kann man dem Anwender eine Möglichkeit anbieten, Texte per Mausklick in die Zwischenablage zu kopieren. Das macht Sinn, wenn man eine Information anbietet, die der Anwender auf seinem Rechner weiterverwenden muss. Das könnte ein Registrierungscode, aber auch so etwas Banales wie eine Adresse oder eine Telefonnummer sein.

Das folgende JavaScript kopiert Text in die Zwischenablage. Das funktioniert leider nur beim Internet Explorer. Bei Firefox verhindert ein restriktiveres Sicherheitsmodell das Kopieren. Wie Sie in Firefox die Zwischenablage nutzen, erläutert dieser Beitrag: www.dynamic-tools.net/toolbox/copyToClipboard/

<script type="text/javascript">function ClipboardCopy(s){
if( window.clipboardData && clipboardData.setData )
{ clipboardData.setData("text", s); }
else
{ alert ("Das geht leider nur im Internet Explorer");}
}
</script>

Wie das Script in der HTML-Seite aufgerufen wird, hängt davon ab, woher der zu kopierende Text stammt. Folgendes Beispiel kopiert den Text aus einem Textfeld:

<textarea id="clp" cols="40"> Text für die Zwischenablage</textarea>
<p><a href=http://www.publisher.ch/dynpg/index.php# onClick="Clip­boardCopy(document.getElementById('clp').value); return(false)">Kopieren
</A></p>

Wenn Sie einen Absatz kopieren möchten, verwenden Sie diesen Aufruf:

<p id="clp">Dieser Text soll in die Zwischenablage</p>
<p><a href=http://www.publisher.ch/dynpg/index.php# onClick="Clipboard­Copy(document.getElementById('clp').firstChild.nodeValue);
return(false)">Obigen Text kopieren</A>

Der zu kopierende Text wird jeweils anhand der ID clp erkannt.

Inhalt der Zwischenablage anzeigen

(msc) Natürlich kann der Inhalt der Zwischenablage nicht nur gesetzt, sondern auch abgefragt werden. Dazu dient folgendes Script:

function ShowClipboard(){
if( window.clipboardData && clipboardData.getData )
{ Clp = clipboardData.getData("text"); }
else
{ Clp = "[Fehler: Das geht nur im Internet Explorer]";}
return Clp;
}

Aufgerufen wird es im HTML-Code wie folgt:

<input type="button" value="Zwischenablage anzeigen"alert(ShowClipboard());">

Tooltipps anzeigen

(msc) Tooltipps sind kleine Informationsfenster, die automatisch erscheinen, wenn man mit der Maus für eine gewisse Zeit auf ein Objekt zeigt. Sie erklären bei Programmen die Funktionen von Schaltflächen oder anderen Bedienelementen.

Nun kann man solche Tooltipps auch auf Webseiten einsetzen, um Informationen einzublenden, wenn der Anwender mit der Maus auf ein Element zeigt. Solche Tooltipps werden häufig über ein JavaScript dargestellt. Es ist aber auch möglich, nur mit Hilfe von CSS diese Informationen darzustellen. Dazu verwendet man folgende CSS-Deklarationen:

a:hover span {display: block !important; position: absolute; top: 5px; left: 40px; width:150px; border: 1px solid #f00; background-color: yellow; color: black; padding: 3px; font-size: .8em; z-index: 1;}
a span {display: none;}
a:hover {font-size: 100%;}
p a { position: relative; text-decoration:none}

Wir arbeiten hier mit einem Inline-Element (span), das innerhalb eines Verweises (a) gesetzt wird. Das span-Element ist normalerweise unsichtbar (display:none). Nur wenn mit der Maus darauf gezeigt und ein so genanntes Hover-Ereignis ausgelöst wird, blendet der Browser das span-Element ein: display:block !important;. Mit dem Zusatz important! stellen wir sicher, dass die Anzeigeart block die vorherige Angabe display:none aushebelt.

Nun ist es ausserdem wichtig, dass der Tooltipp an der richtigen Position erscheint – nämlich an der Stelle des Mauszeigers in einem Kästchen, das den restlichen Text überdeckt.

Das erreichen wir durch die Angaben position:absolute; und die Positionierung mittels top, left und width. Damit die absolute Positionierung von a:hover span nicht dazu führt, dass der Tooltipp immer in der linken oberen Ecke der Seite erscheint, definieren wir die Position des übergeordneten Elements p a als relativ (position: relative).

Das wars schon. Im HTML-Code definieren wir den Tooltipp dann wie folgt:

<a href="http://www.publisher.ch/dynpg/index.php#">Publisher<span>Die führende Schweizer Fachzeitschrift für elektronisches Publizieren</span></a>

Automatische Initialen

(msc) Initialen sehen edel aus, verleihen einem Text Würde und Wichtigkeit. Sie lassen sich obendrein ohne viel Aufwand automatisch erstellen. Die folgende Deklaration fügt jedem Abschnitt eine Initiale hinzu:

p:first-letter {margin-right:6px; margin-top:5px; float:left; color:white; background:khaki; border:1px solid darkkhaki; font-size:80px; line-height:60px; padding-top:2px; padding-right:5px;}

Im HTML-Code selbst müssen Sie nichts ändern; die Initiale erscheinen ohne weiteres Zutun.

Falls Sie die Initiale nur im ersten Absatz anzeigen möchten, ändern Sie die Deklaration einfach wie folgt ab. Diese CSS-Regel gibt vor, dass die Initiale nur beim ersten p angezeigt wird:

p:first-child:first-letter