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

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.