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

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

Unterschiedliche Farben für Listenzeichen

Listenzeichen lassen sich auf verschiedene Weise verändern, damit haben wir uns auch des Öfteren beschäftigt. Die kleinen Kugeln (Bullets) lassen sich verändern, durch andere Zeichen ersetzen oder ganz und gar durch eigene Grafiken austauschen.

Bleibt eigentlich nur eine Anwendung. Klassische Bullets, jedoch in anderen Farben als die ausgewählten Textelemente.

Das funktioniert nicht einfach so. Denn wenn der <li>-Tag verändert wird, nehmen Listenzeichen und Text immer dieselbe Farbe an. Schade eigentlich, doch mit einer Verschachtelung lässt sich auch das machen. Die Textbestandteile der Aufzählung werden separat formatiert.

  • Element 1
  • Element 2
  • Element 3
 <ul> 
 <li style="color : red"><div
style="color : black">Element 1</div></li> 
 <li
style="color : green"><div style="color : black">Element
2</div></li> 
 <li style="color : blue"><div
style="color : black">Element 3</div></li>
 </ul>

Auf diese Weise sorgen wir für bunte Listenzeichen und einen einheitlich lesbaren Text. Das klappt auch mit Ringen:

  • Element 1
  • Element 2
  • Element 3
      <ul type="circle"> 
 <li style="color
: red;"><div style="color : black">Element 1</div></li>

 <li style="color : green"><div style="color : black">Element
2</div></li> 
 <li style="color : blue"><div
style="color : black">Element 3</div></li>
 </ul>

Drachenbrowser (Moz) und Marktbeherrscher (IE) kennen keinen Unterschied, auch die nordische Fröhlichkeit (Opera) spielt zumindest ab Version 7 mit.

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

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

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.