Kategorien
Webdesign

Tabellenzellen mit Rollbalken

Die Beispieltabelle unten links bringt es auf drei Zellen. Ungewöhnlich allein ist die Mittlere. Sie verfügt über einen eigenen Rollbalken.

Möglich wird das durch das CSS Element „overflow : auto“. Reicht der Platz nicht mehr aus, um den Inhalt komplett darzustellen, wird dieser nicht etwa abgeschnitten, sondern ein Rollbalken aus dem Fundus hervorgezaubert. Und das ganz ohne Frames oder sonstige Tricks.

Zelle
Dies ist der Seiteninhalt, toll oder? Dies ist der Seiteninhalt, toll oder? Dies ist der Seiteninhalt, toll oder? Dies ist der Seiteninhalt, toll oder?
Zelle
 <table
border="1" cellspacing="0" cellpadding="4"><tr
bgcolor="#FFFF00"><td>Zelle</td></tr>
<tr
bgcolor="#CCCCCC"><td style="width: 100px; height: 100px;">
<div
style="width: 100%; height: 100%; overflow : auto;">Inhalt</div></td></tr><tr
bgcolor="#FFFF00"><td>Zelle</td></tr></table>

Die Codierung ist etwas schwerfällig. Der Text muss in ein <div> Element eingebettet werden. Dieses erhält ebenso wie die Tabelle, in die es zu liegen kommt, eine Breite und eine Höhe von 100 %. Mehr ist nicht notwendig.

Allerdings muss man auf die umgebenden Zellen achten und gegebenenfalls auch hier eingreifen. Ältere Browser mögen diese Technik nicht und sind überfordert, sie neigen dazu, ein Durcheinander anzuzeigen.

Kategorien
Webdesign

Bunte Rollbalken als Überraschungseffekt

Trotzdem die bunten Balken nur mit Internet Explorer ab Version 5.5 funktionieren und keinem Standard entsprechen, haben sie sich schnell einen Platz im Werkzeugkasten der Designer erobert.

Wer noch eins draufsetzen will, muss in die Javascript Trickkiste greifen. In unserem Fall sorgt das Skript dafür, das die Balken sich verfärben, wenn der Mauszeiger einen davon berührt. Hier geht’s zur Online Demo im neuen Fenster.

Das Skript wird wie üblich im Dateikopf verborgen. Damit es funktioniert ist ein Aufruf im <body>-Tag notwendig. Er sollte so aussehen:

 <body onMousemove=move()>

Hier das komplette Skript. Die Farben können Sie an den passenden Stellen nach Lust und Laune verändern. Das gilt sowohl für den Ruhezustand als auch den bei Mausberührung.

      <script language="javascript">

function move()
 {
 chk = document.body.clientWidth + 2;
 if(window.event.x
> chk) //Ist Mauszeiger über Scrollbar?
 {
 var sfc = "rgb(185,0,5)";
//scrollbar-face-color
 var ssc = "rgb(185,0,5)"; //scrollbar-shadow-color

var shc = "rgb(255,255,255)"; //scrollbar-highlight-color
 var stc
= "rgb(223,223,223)"; //scrollbar-track-color
 var sac = "rgb(255,255,255)";
//scrollbar-arrow-color
       document.body.style.scrollbarFaceColor
= sfc;
 document.body.style.scrollbarShadowColor = ssc;
 document.body.style.scrollbarTrackColor
= stc;
 document.body.style.scrollbarHighlightColor = shc;
 document.body.style.scrollbarArrowColor
= sac;
 }
 else //wenn Mauszeiger nicht über Scrollbar
 {
 var
sfc = "rgb(192,192,192)"; //scrollbar-face-color
 var ssc = "rgb(128,128,128)";
//scrollbar-shadow-color
 var shc = "rgb(255,255,255)"; //scrollbar-highlight-color

var stc = "rgb(223,223,223)"; //scrollbar-track-color
 var sac =
"rgb(0,0,0)"; //scrollbar-arrow-color
       document.body.style.scrollbarFaceColor
= sfc;
 document.body.style.scrollbarShadowColor = ssc;
 document.body.style.scrollbarTrackColor
= stc;
 document.body.style.scrollbarHighlightColor = shc;
 document.body.style.scrollbarArrowColor
= sac;
 }
 }
 </script>

Die Idee dazu und das Skript lieferte uns Jens Gottfried . Er ist den den Community Mitgliedern auch als Juggler bekannt.

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

Relative Farben

Alles ist relativ, soll schon Albert Einstein gesagt haben. Da kann es ganz spannend sein, wenn die Farben einer Seite nicht explizit festgelegt sind. Sondern vom Besucher indirekt selbst gestaltet werden können.

CSS2 ermöglicht es, einige bisher unbekannte Formatierungen durchzuführen. Die „relativen“ Farben gehören dazu. Sie richten sich nach den Systemeinstellungen des Besuchers, nicht nach exakten Vorstellungen des Designers.

Eine solche Formatierung könnte so aussehen. Sie verleiht einer Seite den selben Hintergrund wie ihn der Benutzer für den Desktop verwendet.

 <body style="background
: background">

Einen besonderen praktischen Nutzen hat das zur Zeit wohl nicht. Aber der Web-Designer ist bekanntlich erfinderisch. Die Tabelle zeigt ein Live Beispiel in der linken Spalte. Gegenwärtig zu sehen mit Internet Explorer ab 5.0 (PC und MAC), Netscape 6.0 und Opera ab 5.1 – wer’s nicht glaubt, verändere seine Systemeinstellungen (Anzeige/Darstellung) und lasse diese Seite geöffnet.

Beispiel CSS Attribut Beschreibung
activeborder Aktiver Fensterrahmen
activecaption Aktive Titelleiste
appworkspace Hintergrund der Anwendung
background Desktop Hintergrund
buttonface Oberflächenfarbe Button
buttonhighlight Button Markiert
buttonshadow Schattenfarbe Button
buttontext Textfarbe Button
captiontext Textfarbe Titelleiste
graytext Gegrauter Text
highlight Markierte Elemente
highlighttext Textfarbe Markierte Elemente
inactiveborder Inaktiver Fensterrahmen
inactivecaption Inaktive Fensterleiste
inactivecaptiontext Textfarbe Inaktive Fensterleiste
infobackground Hintergrundfarbe Tooltip
infotext Textfarbe Tooltip
menu Hintergrundfarbe Menu
menutext Textfarbe Menu
scrollbar Hintergrundfarbe Rollbalken
threeddarkshadow Schatten für 3D Elemente
threedface Oberflächenfarbe 3D Elemente
threedhighlight Hervorhebung für 3D Elemente
threedlightshadow Heller Schatten 3D Elemente
threedshadow Dunkler Schatten für 3D Elemente
window Fenster-Hintergrund
windowframe Fenster-Rahmen
windowtext Textfarbe Dialogfeld

PS: Die relative Schrift gibt es auch. Sie gibt nur leider in den meisten Fällen nicht viel her. Aber probieren Sie

      <p
style="font : menu">Text</p>

um die selbe Schrift zu erhalten wie sie in den Menüs verwendet wird.