Doch wie genau funktioniert das? Und welche Tools brauche ich dafür? Genau diesen Fragen möchte ich in diesem und in kommenden Artikeln auf den Grund gehen.

Was brauche ich für meine eigene Webseite?

Um zu starten braucht es eigentlich nicht viel. Die wenigen Dinge, die man wirklich benötigt, habe ich hier mal in einer Liste näher beschrieben.

• Etwas Zeit
  Eine gute Homepage lässt sich nicht einfach in wenigen Minuten erstellen, darum sollte man sich auch die entsprechende Zeit nehmen.
• Einen Plan
  Man kann keine eigene Webseite erstellen, ohne vorher zu wissen, welches Ziel man eigentlich mit dieser Seite verfolgen will. Möchte man ein Tagebuch schreiben? Will man Informationen zu einem bestimmten Thema zusammentragen und aufbereiten? Will man sich selbst und die eigenen Projekte vorstellen? Oder möchte man eine Plattform für sich und seine Freunde schaffen? Die Möglichkeiten sind grenzenlos, aber man sollte zumindest grob das Thema der Webseite festlegen.
• Kenntnisse im Umgang mit HTML, CSS und JavaScript
  Man kann keine Homepage erstellen, ohne nicht zumindest die grundlegendsten Bausteine einer Webseite zu kennen. Mit HTML legt man die Struktur und den Inhalt einer Webseite fest. Mit CSS kann man das Aussehen der einzelnen Elemente einer Webseite kontrollieren und mit JavaScript kann man die Funktionalität der eigenen Seite erweitern. Aber erst die Kombination aus allen Zutaten ergibt eine gute Webseite.
• Eine eigene Internetadresse
  Ohne eine eigene Domain kann niemand auf die liebevoll erstellten Inhalte zugreifen. Der Domainname ist die Adresse einer Seite im Internet. Daher sollte man sich einen sprechenden Namen für die eigene Homepage ausdenken. Ob nun www.willies-kochrezepte.de oder www.webmatze.de - solange der Name noch nicht vergeben ist, kann man fast jeden Domainnamen registrieren lassen.
• Webspeicherplatz
  Damit man die erstellen HTML Seiten auch für Jeden zugänglich im Internet ablegen kann, benötigt man etwas Speicherplatz. Diesen Webspeicherplatz oder auch Webspace genannt, wird man sich meistens bei professionellen Webhostern anmieten. Die Kosten dafür sind überwiegend sehr niedrig. Es ist auch möglich, eigene Webserver zu verwenden, doch für eine kleine Homepage reicht meistens weniger aus.

Das waren auch schon die wichtigsten Zutaten für die eigene Homepage. Wie man sehen kann, braucht es nicht wirklich viel, um eine eigenen Webseite zu erstellen. Doch für jemanden, der bisher noch nie eine Homepage erstellt hat, können einige der Punkte trotzdem eine Hürde darstellen.

Schritt für Schritt zur eigenen Webseite

Gerade für diese Anfänger - und dass meine ich nicht abwertend, denn jeder hat einmal an diesem Punkt begonnen - werde ich in den nächsten Tagen und Wochen in verschiedenen Beiträgen auf die einzelnen oben angesprochenen Punkte näher eingehen. Am Ende wird dann jeder eine Schritt für Schritt Anleitung für die erste eigene Homepage zur freien Verfügung haben.

Auf folgende Punkte werde ich dabei detaillierter eingeben:

• Wie man das richtige Thema für die eigene Homepage wählt
• HTML, CSS und JavaScript - Das Grundgerüst einer Webseite beherrschen
• So findet man den passenden Domainnamen für die eigene Webseite
• Wie wähle ich den richtigen Webhoster für meine Homepage aus?
• Wie bekomme ich mehr Besucher für meine eigenen Webseite?

Ich freue mich schon darauf und hoffe, dass der Eine oder Andere von Euch mit Hilfe dieser Anleitungen seine erste eigene Homepage erstellen können wird.

• Schritt für Schritt zum eigenen Blog
• Surfino bietet Exklusiv-Paket
• Genial
• Google Gadgets auf der eigenen Homepage
• Fallstudie: Von 0 auf 100 Euro in 12 Monaten

Auf vielen Seiten werden immer noch Navigationsmenüs verwendet, welche vollständig auf JavaScript aufbauen und bei ausgeschaltetem JavaScript nicht mehr funktionieren. Solche Seiten sind dann für Nutzer mit Behinderungen meistens nicht mehr bedienbar.

Das barrierefreie CSS Menü

In diesem Beitrag möchte ich euch zeigen, dass man Menüs auch auf behindertengerechte und barrierefreie Weise erstellen kann. Ziel ist es ein Menü zu bauen, dass nur auf aktuellen Standards wie HTML und CSS beruht und keine Verwendung von JavaScript macht. So soll es möglich sein, dass Menü auch dann noch bedienen zu können, wenn der Nutzer JavaScript oder gar CSS im Browser ausgeschaltet hat.

So sieht das fertige Menü aus

Hier könnt Ihr schon einmal sehen, wie das Menü aussehen wird. (Wird im IE6 als vertikales Menü angezeigt, während es alle modernen Browser als Drop Down Menü angezeigen.)

• Start
• Informationen
  • Webseiten erstellen
    • HTML
    • CSS
    • Programmieren
      • JavaScript
      • PHP
      • Java
      • ActionScript
      • Ruby
    • Flash
  • Multimedia
    • Grafiken
    • Videos
• Suchen
  • Google
  • Yahoo
  • MSN
• Über

Dieses Beispiel hat insgesamt vier Ebenden, wobei jede einzelne Ebene auch noch unterschiedlich per CSS angepasst werden kann.

Der HTML Code

Der Aufbau dieses Menüs per HTML erfolgt über verschachtelte unsortierte Listen <ul>. Zur besseren Veranschaulichung könnt Ihr hier den HTML Code betrachten:

 
<ul class="cssmenu">
  <li><a href="http://webmatze.de/">Start</a></li>
  <li><a href="http://webmatze.de/">Informationen</a>
    <ul>
      <li><a href="http://webmatze.de/">Webseiten erstellen</a>
        <ul>
          <li><a href="http://webmatze.de/">HTML</a></li>
          <li><a href="http://webmatze.de/">CSS</a></li>
          <li><a href="http://webmatze.de/">Programmieren</a>
            <ul>
              <li><a href="http://webmatze.de/">JavaScript</a></li>
              <li><a href="http://webmatze.de/">PHP</a></li>
              <li><a href="http://webmatze.de/">Java</a></li>
              <li><a href="http://webmatze.de/">ActionScript</a></li>
              <li><a href="http://webmatze.de/">Ruby</a></li>
            </ul>
          </li>
          <li><a href="http://webmatze.de/">Flash</a></li>
        </ul>
      </li>
      <li><a href="http://webmatze.de/">Multimedia</a>
        <ul>
          <li><a href="http://webmatze.de/">Grafiken</a></li>
          <li><a href="http://webmatze.de/">Videos</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="http://webmatze.de/">Suchen</a>
    <ul>
      <li><a href="http://webmatze.de/">Google</a></li>
      <li><a href="http://webmatze.de/">Yahoo</a></li>
      <li><a href="http://webmatze.de/">MSN</a></li>
    </ul>
  </li>
  <li><a href="http://webmatze.de/">Über</a></li>
</ul>
 

Wie man sehen kann, gibt es keine besonderen Tricks. Es handelt sich einfach um ganz normalen standardkonformen HTML Code. Auch ohne CSS kann man dieses Menü bedienen und alle einzelnen Links aufrufen.

Um das Menü aber etwas ansprechender zu gestalten, wird es durch die folgenden CSS Anweisungen in die richtige Form gebracht.

Der CSS Code

Ich werde jetzt nicht ins Detail gehen, wie genau die einzelnen Anweisungen sich auf die Darstellung des Menüs auswirken. Zum besseren Verständnis habe ich ein paar Kommentare in den CSS Code mit aufgenommen. Anmerken möchte ich jedoch, dass ich den letzten Teil nur mit aufnehmen musste, weil sich der IE 6 hier etwas quer stellt und sich nur durch spezielle CSS Anweisungen dazu bringen lässt, das Menü ebenfalls richtig darzustellen. (Wer möchte, kann den IE 6 speziellen Teil natürlich weglassen.)

ul.cssmenu {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
}
ul.cssmenu ul {
  position: relative;
  display: none;
}
ul.cssmenu li {
  position: relative;
  display: inline;
  float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  font-family: arial, sans-serif;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100px;
  height: 20px;
}
ul.cssmenu li:hover > a {
  background-color: #666666;
  color: #FFFFFF;
  font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
  position: absolute;
  top: 20px;
  left: -40px;
  display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
  top: 0px;
  left: 110px;
}
ul.cssmenu li li a {
  width: 150px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
  color: #000000;
  background-color: #e4e4e4;
}
ul.cssmenu ul a {
  background-color: #d4d4d4;
}
ul.cssmenu ul ul a{
  background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
  background-color: #b4b4b4;
}
 
/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
  _text-indent: 10px;
}
ul.cssmenu ul {
  _display: inline;
  _margin-left: 0px;
  _text-indent: 20px;
}
ul.cssmenu ul ul {
  _text-indent: 30px;
}
ul.cssmenu ul ul ul {
  _text-indent: 40px;
}
ul.cssmenu li {
  _float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  _text-align: left;
  _width: 150px;
}
ul.cssmenu a:hover {
  _font-weight: bold;
  _background-color: #666666;
}

Fazit

Wie Ihr sehen könnt ist es gar nicht so schwer auch ohne JavaScript ein ansprechendes Menü zu gestalten. Das hier gezeigte Beispiel lässt sich natürlich leicht durch andere Farben oder Hintergrundgrafiken per CSS noch weiter verschönern und an die eigenen Bedürfnisse anpassen. Alle modernen Browser sollten damit zurecht kommen - selbstverständlich auch Googles neuer Chrome Browser.

• CSS Button Tricks
• Wie man wirklich ansprechende Formulare erstellt
• Wirklich einfache JavaScript Tooltips
• FireBug 0.4 – Der ultimative Web Debugger
• Ist display=”none” jetzt irrelevant?

You need the latest nightly build of WebKit to see the effects in action. But you can also watch it as a video on YouTube:

Go to the original Rotating Image Gallery to try for yourself and look at the source code to see how it was made.

I'll give you a more detailed description of those new CSS effects in an upcoming post, so check back later.

• CSS Button Tricks
• Google bindet YouTube Videos in Suchergebnisse ein
• Google Chrome – Der neue Browser
• www.rudicomeback.de
• Das Problem mit scrip.aculo.us Effect.scroll()

Wofür steht irrelevant?

Das Attribut irrelevant darf die Werte "true" oder "false" enthalten und gibt an, ob ein so ausgezeichnetes HTML Element im aktuellen Kontext noch nicht oder nicht mehr relevant ist. So gekennzeichnete Elemente werden vom Browser weder gerendert, noch angezeigt. Das heißt, man kann damit beliebige Elemente ein- und ausblenden.

Bisher konnte man diese Funktionalität nur durch das Setzen der CSS Eigenschaft display auf display: none erreichen. Damit werden die entsprechenden Elemente ebenfalls nicht gerendert und angezeigt.

Der Nachteil hier wäre allerdings, dass ein Gerät oder Browser, welcher keine Stylesheets versteht, solche Elemente dann trotzdem darstellen würde. Bei Verwendung von irrelevant würde der entsprechende Teil auch in diesem Fall nicht angezeigt werden. (Vorausgesetzt das Gerät versteht HTML5.)

irrelevant schon heute verwenden

Damit man das neue Attribut in HTML Seiten verwenden kann, müsste man darauf warten, dass die aktuellen Browser HTML 5 unterstützen. Doch bis es soweit ist, kann es noch eine Weile dauern, zumal die Spezifikation noch nicht in der finalen Version vorliegt.

Um das Warten aber ein wenig zu verkürzen, kann man die entsprechende Funktionalität in allen aktuellen Browsern auch auf anderem Weg erreichen. Dazu muss man nur zwei einfache CSS Definitionen in das HTML Dokument einbinden, und schon wird das Attribut irrelevant richtig ausgewertet.

 
<style type="text/css">
  *[irrelevant] {
    display: none;
  }
  *[irrelevant="false"] {
    display: inherit;
  }
</style>
 

(Man sollte jedoch versuchen möglichst nicht irrelevant="false" zu verwenden, sondern statt dessen das Attribut ganz entfernen, da es unter Umständen bei einigen HTML Elementen zu Problemen in der Darstellung kommen kann.)

So kann man nun beliebige Elemente ausblenden lassen:

 
<p>Laut HTML 5  können nicht relevante Elemente
 ausgeblendet werden, indem ihnen das Attribut irrelevant
 zugewiesen wird. <span irrelevant="true">HTML 5 wird noch
 nicht von allen aktuellen Browsern unterstützt.</span>
 Irrelevante Elemente sind solche, die noch nicht, oder nicht
 mehr relevant sind. Das Attribut sollte auf solche Abschnitte
 angewendet werden, die im aktuellen Kontext nicht relevant
 sind, es aber später durchaus wieder werden können.</p>
 

Wenn man dies mit einem aktuellen Browser wie Firefox 3, Safari 3 oder IE 8 betrachtet, sollte der zweite Satz nicht mehr angezeigt werden:

Elemente per DOM ein- und ausblenden

Jetzt, da wir mit irrelevant gekennzeichnete Elemente vom Browser ausblenden lassen können, fehlt nur noch der entsprechende JavaScript Code, um dies auch dynamisch per Mausklick durchführen zu können:

 
function hide(elementId) {
  var el = document.getElementById(elementId);
  el.setAttribute('irrelevant',true);
}
function show(elementId) {
  var el = document.getElementById(elementId);
  el.removeAttribute('irrelevant');
}
 

Fazit

Wie man sieht, kann man schon heute bestimmte HTML5 Features verwenden und so die eigenen Seiten für die Zukunft vorbereiten. Ob man das auch tun sollte, sei jedem selbst überlassen. Da ältere Browser möglicherweise mit den hier gezeigten Beispielen nicht zurecht kommen, ist dies nicht unter allen Umständen die beste Wahl. Aber da in den entsprechenden Browsern in dem Fall die zu versteckenden Inhalte einfach angezeigt werden würden, wäre auch kein größerer Schaden entstanden.

• CSS Formular Design – Textfelder
• Die Sprache eines Links kennzeichnen
• Wirklich einfache JavaScript Tooltips
• CSS Auswahlliste mit Checkboxen
• Unsicher Objekte unter SSL in IE

Gerade weil Formulare solch ein wichtiger Bestandteil einer Seite sind, sollte man auch beim Design eines Formulars an den Anwender denken. Klar strukturierte Formulare mit sinnvollen Bezeichnungen und Beschreibungen der einzelnen Felder helfen dem Nutzer dabei, die benötigten Daten schnell eingeben zu können. Aber auch beim HTML Code der Formulare sollte man sich an allgemein gültige Regeln halten, damit diese z.B. auch von behinderten Anwendern leicht ausgefüllt werden können.

Formulare richtig aufbauen

Um ein Formular erstellen zu können, sollte man sich zuerst alle benötigten Daten notieren und sich überlegen, wie man diese als Formularfeld darstellen kann. Namen oder Emails wird man am besten als Texteingabefeld darstellen. Für Beschreibungen oder größere Texte eignet sich die Textarea besser. Eine Auswahl, z.B. ob der Nutzer Mann oder Frau ist, lässt sich sowohl durch Radiobuttons und auch als Auswahlliste darstellen. Mit Checkboxen fragt man schließlich Daten ab, die keine Texteingabe erfordern, sondern nur ausgewählt werden müssen.

Alle verschiedenen Felder sollten möglichst durch ein Label gekennzeichnet werden. Wenn notwendig kann man dies noch durch ausführlichere Beschreibungen ergänzen, wenn sich die benötigten Daten nicht durch ein oder zwei Wörter erklären lassen.

Wenn ein Formular aus mehreren, inhaltlich nicht zusammengehörigen Abschnitten besteht, so sollte man diese durch Fieldsets logisch aufteilen und mit Legend genauer beschreiben.

Ein einfaches Beispiel - Das Kontaktformular

Zur besseren Veranschaulichung werde ich ein einfaches Kontaktformular aufbauen. Kontaktformulare kann man auf fast jeder Seite finden und sind ein wichtiges Mittel zur Kommunikation zwischen Seitenbesucher und Seitenbetreiber.

Am Ende soll unser Kontaktformular folgendermaßen aussehen:

Wie man sehen kann, ist das Formular relativ einfach gehalten, sieht aber dennoch ansprechend aus. Erreicht wird dies durch den Einsatz von gut strukturiertem HTML und einfachen CSS Definitionen.

Der HTML Code

Beim Aufbau des Formulars mit HTML habe ich darauf geachtet, dass es in allen Browsern bedienbar bleibt und auch für Behinderte mit Screenreadern keine Probleme macht. Die einzelnen Formularfelder wie einzeilige oder mehrzeilige Textfelder wurden in einer Liste untergebracht und mit <LABEL> Elementen versehen. Bei bestimmten Feldern habe ich zusätzlich noch einen längeren, beschreibenden Text hinzugefügt:

 
<form class="wmForm" action="#" method="post">
  <fieldset>
    <legend>Ihre Kontaktdaten</legend>
    <ul>
      <li>
        <label for="name"><span>*</span>Name</label>
        <input id="name" name="name" type="text" />
        <p class="wmHint">Verwenden Sie wenn möglich Vor- und Zuname.</p>
      </li>
      <li>
        <label for="email"><span>*</span>Email</label>
        <input id="email" name="email" type="text" />
        <p class="wmHint">Bitte stellen Sie sicher, dass diese Email wirklich existiert.</p>
      </li>
      <li>
        <label for="nachricht"><span>*</span>Ihre Nachricht</label>
        <textarea id="nachricht" name="nachricht"></textarea>
        <p class="wmHint"></p>
      </li>
    </ul>
  </fieldset>
  <fieldset>
    <legend>Ich möchte Folgendes gleich kostenlos mitbestellen</legend>
    <ul>
      <li>
        <label for="fruehlingskatalog">Frühlingskatalog</label>
        <input id="fruehlingskatalog" class="checkbox" name="fruehlingskatalog" type="checkbox" />
      </li>
      <li>
        <label for="sommerkatalog">Sommerkatalog</label>
        <input id="sommerkatalog" class="checkbox" name="sommerkatalog" type="checkbox" />
      </li>
      <li>
        <label for="herbstkatalog">Herbstkatalog</label>
        <input id="herbstkatalog" class="checkbox" name="herbstkatalog" type="checkbox" />
      </li>
      <li>
        <label for="winterkatalog">Winterkatalog</label>
        <input id="winterkatalog" class="checkbox" name="winterkatalog" type="checkbox" />
        <p class="wmHint"></p>
      </li>
    </ul>
  </fieldset>
  <fieldset class="wmButtons">
    <input class="wmButton" name="submit" type="button" value="Absenden" />
    <input class="wmButton" name="reset" type="reset" value="Eingaben löschen" />
  </fieldset>
</form>
 

Die dazugehörigen Style Definitionen

Damit das Formular auch ansprechend aussieht, muss es natürlich über CSS verschönert werden. Im folgenden CSS sind alle notwendigen Angaben, um die einzelnen Formularelemente auszurichten und farblich gestalten zu können.

 
.wmForm {
  background-color: #ffffff;
  padding: 10px;
}
.wmForm fieldset.wmButtons input.wmButton {
  float: right;
  width: 150px;
  background-color: #E9F7F6;
  border: 1px solid #7BB9B7;
  color: #7BB9B7;
  margin-left: 10px;
}
.wmForm fieldset legend {
  background-color: #ffffff;
  color: #7BB9B7;
  font-weight: bold;
}
.wmForm ul {
  background-color: #E9F7F6;
  border-top: 2px solid #7BB9B7;
  margin: 0px;
  padding: 0px;
  list-style: none;
}
.wmForm ul li {
  padding: 10px;
  clear: both;
}
.wmForm ul li label {
  display: inline;
  float: left;
  width: 30%;
}
.wmForm ul li label span {
  float: right;
  color: #7BB9B7;
}
.wmForm ul li input,
.wmForm ul li textarea {
  float: right;
  width: 68%;
  background-color: #F0F0F0;
}
.wmForm ul li input:focus,
.wmForm ul li textarea:focus {
  border: 1px solid #7BB9B7;
  background-color: #FFFFFF;
}
.wmForm ul li input.checkbox,
.wmForm ul li input.radio {
  float: left;
  width: 20px;
  border-width: 0px;
}
.wmForm ul li p.wmHint {
  clear: both;
  margin-left: 30%;
  width: 68%;
  text-align: left;
  font-size: 10px;
  padding: 0px 10px;
}
 

Diese Angaben können natürlich beliebig erweitert oder verändert werden, um das Aussehen des Formulars den eigenen Vorstellungen anzupassen.

Fazit

Wie man bei diesem Beispiel erkennen kann, müssen Formulare nicht grau und langweilig aussehen. Sie können sehr flexibel an das jeweilige Seitendesign angepasst werden. Der Fantasie sind hier fast keine Grenzen gesetzt, aber man sollte immer darauf achten, dass solch ein Formular leicht bedienbar bleibt. Dies ist vor allem auch dann wichtig, wenn man bedenkt das Formulare auch von Menschen mit Behinderungen ausgefüllt werden können müssen.

• CSS Button Tricks
• Hierarchische Menüs mit CSS erstellen
• CSS Formular Design – Textfelder
• Email mit PHP senden
• Wegwerfadressen oder Einmaladressen mit Google Mail

Anzahl der Spalten festlegen

Um festzulegen, mit wievielen Spalten ein Text dargestellt werden soll, braucht man nur folgende CSS Eigenschaft anzugeben: -moz-column-count. Wobei das Prefix -moz- speziell für den Firefox definiert wurde, da es sich hierbei noch nicht um einen endgültig anerkannten Standard handelt. Sollte sich dieser Standard durchsetzen, würde man das Prefix weglassen und nur noch column-count verwenden. Als Wert gibt man nun die Anzahl der Spalten an:

<P style="-moz-column-count: 2">Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird dieser Absatz einfach so wie immer mit nur einer Spalte dargestellt werden. Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird dieser Absatz einfach so wie immer mit nur einer Spalte dargestellt werden.</P>
 

Das Ergebnis würde dann so aussehen:

Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird diesr Absatz einfach so wie immer mit nur einer Spalte dargestellt werden. Dieser Text wird in zwei Spalten angezeigt, wenn man den aktuellen Firefox Browser verwendet. Sollte man einen älteren Browser verwenden, wird diesr Absatz einfach so wie immer mit nur einer Spalte dargestellt werden.

[funktioniert vorerst nur im Mozilla Firefox 1.5]

Minimale Spaltenbreite festlegen

Wenn man nun möchte, dass die Spalten nun immer mindestens 200 Pixel breit sein sollen, so kann man dies mit der Eigenschaft -moz-column-width festlegen. Die Spalten sind dann immer mindestens 200 Pixel breit. Und wenn man die Eigenschaft -moz-column-count wegläßt, dann werden automatisch immer so viele Spalten angezeigt wie für die angegebene Breite benötigt werden. Das bedeutet, das folgendes:

<P style="-moz-column-width: 100px">Dieser Text wird in einer oder mehreren
Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt. Dieser Text wird in einer oder mehreren Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt.</P>
 

dann folgendes Ergebnis bringt:

Dieser Text wird in einer oder mehreren Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt. Dieser Text wird in einer oder mehreren Spalten dargestellt, wobei die Spalten immer mindestens 100 Pixel groß sein müssen. Ist weniger Platz vorhanden wird nur eine Spalte angezeigt. Ist mehr Platz vorhanden, werden entsprechend mehr Spalten dargestellt.

[funktioniert vorerst nur im Mozilla Firefox 1.5]

Und wenn ich zusätzlich noch die Anzahl der Spalten angebe, kann ich erreichen, dass immer zwei Spalten angezeigt werden, außer wenn der zur Verfügung stehende Platz nicht außreicht um mindestens zwei Spalten mit einer Breite von je 200 Pixeln anzuzeigen.

<P style="-moz-column-width: 200px;-moz-column-count: 2">Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verf&uuml;gung stehende Platz reicht nicht aus um
die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu k&ouml;nnen. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt. Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verf&uuml;gung stehende Platz reicht nicht aus um die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu k&ouml;nnen. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt.</P>
 

Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verfügung stehende Platz reicht nicht aus um die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu können. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt. Dieser Text wird in zwei Spalten angezeigt, es sei denn der zur Verfügung stehende Platz reicht nicht aus um die Spalten mit einer Breite von mindestens 200 Pixeln darstellen zu können. Ist weniger Platz vorhanden wird nur noch eine Spalte dargestellt.

[funktioniert vorerst nur im Mozilla Firefox 1.5]

Den Abstand zwischen den Spalten festlegen

Normalerweise schließen die einzelnen Spalten immer direkt aneinander an. Dies ist aber nicht immer so gewünscht, da der Text viel besser lesbar ist, wenn sich zwischen den einzelnen Spalten ein gewisser Abstand befindet. Um diesen Abstand festzulegen, kann man die CSS3 Eigenschaft -moz-column-gap verwenden.

<P style="-moz-column-count: 3;-moz-column-gap: 50px">Dieser Text wird in zwei Spalten angezeigt,  wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 50 Pixeln angezeigt wird. Dieser Text wird in zwei Spalten angezeigt, wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 40 Pixeln angezeigt wird.</P>
 

Das Ergebnis sollte dann wie erwartet so aussehen:

Dieser Text wird in zwei Spalten angezeigt, wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 40 Pixeln angezeigt wird. Dieser Text wird in zwei Spalten angezeigt, wobei zwischen den einzelnen Spalten immer ein Abstand von mindestens 50 Pixeln angezeigt wird.

[funktioniert vorerst nur im Mozilla Firefox 1.5]

Wie zu sehen ist, lassen sich diese neuen CSS3 Eigenschaften sehr gut für das Layout von übersichtlichen Webseiten einsetzen. Es ist abzuwarten, wann dies auch von anderen Browsern außer dem Firefox 1.5 übernommen wird. Ich bin überzeugt, dass wir in der nächsten Zeit mehr Seiten sehen werden, die sich diese Features zu Nutzen machen werden.

• CSS Auswahlliste mit Checkboxen
• Firefox3 kann jetzt auch schüchtern
• Der kleine Pfeil mal anders
• Macromedia – MX 2004
• Meta-Description: Wie wichtig ist sie wirklich?

FireBug ermöglicht es, Breakpoints im JavaScript Code zu setzen, Schritt für Schritt durch die Codezeilen zu springen und lokale Variablen sowie den Stack zu betrachten.

Stack Traces bei JavaScript Fehlern

Jeder JavaScript Fehler wird mit einem Stack Trace angezeigt. So kann man genau sehen, an welcher Stelle im Code und durch welchen Aufruf ein Fehler genau aufgetreten ist.

JavaScript Fehler debuggen

Wenn ein Fehler auftritt, reicht es meistens nicht, nur den Stack Trace zu sehen. Meistens möchte man auch sehen, welche Werte bestimmte Variablen gerade hatten, als der Fehler auftrat. Mit FireBug kann man durch die Einstellung "Break On Error" den Debugger automatisch anhalten lassen, wenn ein Fehler auftritt. Man wird dann sofort zur richtigen Stelle im Code gebracht.

Logging Funktionalitäten

Über das console Objekt kann man verschiedene Nachrichten auf der Konsole ausgeben lassen, während der JavaScript Code ausgeführt wird. Dabei kann man verschiedene Stufen wählen, wie z.B. console.debug(), console.info(), console.warn() oder console.error(). Diese Meldungen werden dann auch noch in unterschiedlicher Farbdarstellung in der Konsole kenntlich gemacht.

Außerdem besitzt FireBug noch viele weitere wichtige und nützliche Funktionen. So kann man sich detailiert den Request anschauen, der bei Ajax gesendet wird. FireBug liefert auch eine sinnvolle JavaScript command line, um schnell kleine JavaScript Schnipsel ausführen zu können. Und über die verschiedensten Inspektoren können alle möglichen Aspekte von HTML, DOM, CSS und JavaScript genau betrachtet werden.

Ich finde das FireBug ein "Must Have" Tool für Webentwickler ist. Es läßt sich leicht als Erweiterung in den aktuellen Firefox 1.5 Browser integrieren.

• Google Chrome – Der neue Browser
• Hierarchische Menüs mit CSS erstellen
• Ist display=”none” jetzt irrelevant?
• Wie erstelle ich eine Webseite?
• OpenLaszlo – OpenSource Flex Alternative

Doch inzwischen sind einige Winter durchs Land gezogen und ich habe mich gefragt, ob es nicht doch eine andere, leichtere Möglichkeit geben könnte. Und siehe da, eine kurze Suche im Netz brachte mich auf den richtigen Weg!

CSS3 ist die Antwort!

In CSS3 sind einige Erweiterungen zum aktuellen Standard CSS2 vorgesehen, unter anderm auch die Möglichkeit runde Ecken darstellen zu können. Das CSS3 Modul: Border existiert momentan jedoch nur als Arbeitspapier (Working Draft) des W3C. Jedoch hat sich Mozilla einiger dieser Erweiterungen angenommen und schon als vorläufige Erweiterung (Proprietary Extensions) umgesetzt. Diese werden durch ein vorangestelltest -moz- gekennzeichnet. Bei einer dieser Erweiterungen handelt es sich um -moz-border-radius. Und eben diese benötigen für unsere runden Ecken!

-moz-border-radius - Mach mich rund

Fangen wir doch gleich an und bauen uns ein Beispiel zusammen. Zuerst die Style Definition:

 
.rundeEcken {
  text-align: center;
  border:2px solid #000000;
  -moz-border-radius: 15px;
}
 

Das Ganze weisen wir nun einer Tabelle zu:

 
<table class="rundeEcken">
  ...
</table>
 

Und als Ergebnis erhalten wir folgende Tabelle:

Allerdings nur mit Mozilla/NS6. In allen anderen Browsern erscheint die Tabelle ganz normal mit Ecken.

Ein paar Schritte weiter...

-moz-border-radius ist eine Abkürzung um jede der vier Ecken zu kontrollieren. Dazu kann man -moz-border-radius vier Werte übergeben die den Radius jeder einzelnen Ecke einstellen und zwar in folgender Reihenfolge: oben-links [top-left], oben-rechts [top-right], unten-rechts [bottom-right], unten-links [bottom-left].

 
.rundeEcken {
  text-align: center;
  border:2px solid #000000;
  -moz-border-radius: 5px 10px 15px 20px;
}
 

Wodurch sich ein interessanter Effekt erzielen läßt. Genauso gut ist es aber auch möglich nur zwei Werte zu übergeben, wodurch jeweils die linke obere und die rechte untere bzw. die rechte obere und die linke untere Ecke kontrolliert werden können. Das sieht dann folgendermaßen aus

 
.rundeEcken {
  text-align: center;
  border:2px solid #000000;
  -moz-border-radius: 30px 5px;
}
 

Jede Ecke einzeln

Möchte man jede Ecke einzeln kontrollieren kann man sich auch folgender Erweiterungen bedienen:

 
.rundeEcken {
  text-align: center;
  border:2px solid #000000;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-topright: 15px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 5px;
}
 

Als Wert kann man jeweils eine Bereich zwischen 0-30px, bzw. Prozentangaben verwenden.

Ein paar abschließende Worte

Jeder der sich nun begeistert daranmachen will und dies in sein nächstes HTML Design übernimmt, sollte jedoch immer im Hinterkopf behalten, das dies kein Standard ist (zumindest solange nicht, bis CSS3 zum Standard geworden ist) und somit auch nicht in allen Browsern zu sehen ist.

Auch sind diese runden Ecken nicht mit allen Mozilla Versionen zu sehen. Erst ab Version Mozilla 0.92 dürften sie funktionieren. Und es ist auch nicht ausgeschlossen, das sie in späteren Versionen irgendwann nicht mehr funktionieren.

Also viel Spaß beim Ausprobieren und Experimentieren.

• CSS Formular Design – Textfelder
• Mozilla Corporation – Neues Design – Neuer Browser
• CSS Button Tricks
• Sortiertbare Listen mit Javascript per Drag and Drop
• Wirklich einfache JavaScript Tooltips

Standard Button

Standardmäßig haben die Buttons ein graues langweiliges Äußeres. Je nach Betriebssystem und Browser können diese zwar etwas unterschiedlich aussehen, aber sie könnten dennoch viel individueller aussehen, wenn man nur weiß wie.

 
<input type="submit" name="Button1" value="Text" />
 

Farbiger Button

Doch wie man leicht erkennen kann, will so ein Button nicht wirklich in das Design der Seite passen. Er sticht förmlich heraus und sieht wie ein Fremdkörper aus. Warum passen wir nicht einfach die Farbe an? Okay!

 
<input type="submit" name="Button1" value="Text" class="farbig" />
 

CSS Code:

 
input.farbig {
  background-color: #9BCCCA;
}
 

Button mit einem Ikon

Jetzt passt der Button zwar farblich zur Seite, doch irgendwie ist er immer noch etwas langweilig. Wie wäre es, wenn er ein eigenes Ikon hätte, an dem jeder gleich erkennen kann, wofür der Button zuständig ist! Also schnell ein Ikon zeichnen und los gehts.

HTML Code:

 
<input type="submit" name="Button1" value="Text" class="ikon" />
 

CSS Code:

 
input.ikon {
  background-image: url(ikon.gif);
  background-color: #9BCCCA;
  background-repeat: no-repeat;
  background-position: left center
}
 

Weitere Button Kombinationen

Okay, das Ikon mag vielleicht ein Schnellschuß sein, aber Ihr müßt zugeben, so einen Button sieht man nicht alle Tage! Und das alles, ohne große Grafiken für die Button laden zu müssen (abgesehen von dem kleinen Ikon). Alles läßt sich problemlos mit CSS lösen.

Wem das noch nicht genug ist, der Button läßt sich natürlich noch ein ganzes Stück weiter verändern!

HTML Code:

 
<input type="submit" name="Button1" value="Text" class="rahmenX" />
 

CSS Code:

 
input.rahmen {
  border: thin #333333 solid;
  background-color: #9BCCCA;
  background-image: url(media/ikon.gif);
  background-repeat: no-repeat;
  background-position: left center
}
 
input.rahmen2 {
  border: thin #333333 dashed;
  background-color: #9BCCCA;
  background-image: url(media/ikon.gif);
  background-repeat: no-repeat;
  background-position: left center
}
 
input.rahmen3 {
  border: double;
  background-color: #9BCCCA;
  background-image: url(media/ikon.gif);
  background-repeat: no-repeat;
  background-position: left center ;
  border-color: #CCCCCC #333333 #333333 #CCCCCC;
  border-width: thin medium medium thin
}
 
input.rahmen4 {
  border: medium groove;
  background-color: #9BCCCA;
  background-image: url(media/ikon.gif);
  background-repeat: no-repeat;
  background-position: left center ;
  border-color: #CCCCCC #333333 #333333 #CCCCCC
}
 
input.rahmen5 {
  border: medium outset;
  background-color: #9BCCCA;
  background-image: url(media/ikon.gif);
  background-repeat: no-repeat;
  background-position: left center ;
  border-color: #CCCCCC #333333 #333333 #CCCCCC;
}
 

So, viel Spaß beim Ausprobieren. Es lassen sich noch eine Vielzahl anderer Kombinationen erstellen. Einfach ein wenig rumspielen.

• Hierarchische Menüs mit CSS erstellen
• Wie man wirklich ansprechende Formulare erstellt
• CSS Formular Design – Textfelder
• CSS 3: Rotating Image Gallery
• Update: JavaScript Button Tricks

Im Voraus ist zu sagen, dass derzeit nur wenige Browser diesen CSS-Effekt unterstützen. Allen voran der neue Opera 5.02 und Netscape 4.75. Wie der MSIE 5.5 unterstützt auch der neue Netscape 6 Browser diesen Effekt, jedoch nicht mit dem Funktionsumfang wie der MSIE.

Den Cursor auf der ganzen Seite ändern

Dafür gibt es zwei Möglichkeiten:

1. Man legt die Cursor-Art im Tag fest.

 
<body style="cursor: cusorart"...>
 

2. Der Befehl wird zwischen den Tags eingefügt.

 
<style type="text/css">
  body {
    cursor: cursorart;
  }
</style>
 

cursorart muß hierbei mit dem gewünschten Code für den Cursor ausgetauscht werden. Eine Liste der Cursor-Arten ist weiter unten zu finden.

Hat man einen der beiden Codes erfolgreich in die Seite eingebunden, wird diese jetzt fast komplett mit dem gewünschten Cursor angezeigt. Die einzige Ausnahme sind Hyperlinks.

Elemente mit eigenem Cursor

Auf die Weise kann man jedem beliebigen Element einer Webseite einen eigenen Cursor zuweisen, z.B. <p>, <h1>-<h6>, <u>, <b> usw. Ob dies für alle Tags sinnvoll ist, ist wiederum eine andere Sache.
Auch hierfür hat man zwei verschiedene Möglichkeiten zur Auswahl:

1. In das Element einbetten.

 
<b style="cursor:cursorart;">HALLO</b>
 

z.B. <b style="cursor:help;">Scully?</b> ergibt: Scully?

Diese Art von Formatierung hat den Vorteil, dass sich ausschließlich bei diesem Tag/Wort der Cursor verändert. In den anderen Bereichen der Seite wird immer noch der Standard-Cursor verwendet.

2. Zwischen die Tags

 
<style type="text/css">
  b {
    cursor: wait;
  }
</style>
 

z.B. <b>Ja Mulder!</b> ergibt: Ja Mulder!

Bei dieser Art der Formatierung ändert sich der Cursor bei jedem <b> Tag auf der gesamten Seite. Spielt man hier und da mit dem Code, kann man diesen Effekt auch auf andere HTML-Tags übertragen.

(!) Es ist aber Vorsicht geboten, wenn der Cursor z.B. einen Wartezustand signalisieren soll. Dieser könnte dazu führen, dass der Nutzer denkt die Seite würde noch laden. Das wäre sicher nicht der gewünschte Effekt(!)

Liste der verschieden Cursor-Arten

 
Es gibt noch eine andere Cursor-Art, bei der man selbst eine Grafik als Cursor bestimmen kann. Da dies nach einem Test in vier verschieden Browsern nicht funktionierte, habe ich diesen Befehl weggelassen.

• Kleine Style Tricks – große Wirkung
• Wirklich einfache JavaScript Tooltips
• Runde Tabellen mit Mozilla
• Das Problem mit scrip.aculo.us Effect.scroll()
• Einführung in PHP