Wer hat es noch nicht erlebt, dass ein Hintergrundbild, welches mittels CSS vertikal und horizontal zentriert wurde, im IE6 exakt dargestellt
wird, jedoch die Ansichten im Firefox und anderen CSS-fähigen Browsern völlig falsch sind.

Abhilfe schaffen folgende Punkte im Stylesheet:

1. Entfernen von allen störenden Innen- und Außenabständen: * { margin:0; padding:0; }. * = Wildcard
2. Das Dokument benötigt eine vordefinierte Höhe. Somit geben wir dem HTML-Tag folgendes mit: html { height:100%; }
3. Anschliessend können wir das Bild für den Body-Bereich definieren:
body { background:url(BILDPFAD) center center  no-repeat; }
An dieser Stelle befindet sich die eigentliche Bildausrichtung. Durch die Attribute “center center” wird dem Browser eine
vertikale und horizontale Ausrichtung vorgeschrieben.
4. Nun einmal den Browserfenster “refreshen” und siehe da, der Anzeigefehler wurde behoben.

Vielen Dank an dieser Stelle an Chris Stevens dem Pixielaner, dem Autor dieses Artikels . Falls der werte Herr seine Homepage mal fertigstellen sollte, dann werdet ihr Ihn auch unter den Partnern von CSS-Roots finden.

Eine eigene 404-Seite ist ein weiterer Schritt in die Individualität einer Webseite, durch diese wird ein User der einen falschen Dateinamen eingegeben hat, einem Link der nicht mehr existiert gefolgt ist, aufgefangen. Diese Seite teilt dem User mit dass ein Fehler passiert ist und kann diesen zum Beispiel automatisch weiterleiten an die Startseite, oder kann noch mal die Suchfunktion beinhalten, damit der User die gewünschte Seite vielleicht doch findet.

Eine eigene 404-Fehlerseite ist auf jeden Fall von Vorteil, da diese nicht nur bei den Usern gern gesehen ist, sondern auch bei Google.

404-Fehlerseite kann in der .htaccess-Datei eingestellt werden, wobei es egal ist wo ihr diese auf eurem Server hinterlegt, solange ihr den korrekten Pfad auf eurem Webspace angebt.

Einmal für diejenigen, welche die .htaccess-Datei noch nicht kennen, diese regelt einige wichtige Maßnahmen auf dem Server wir den Mod-Rewrite, die Umleitung von meinedomain.de auf www.meinedomain.de und einiges mehr. Die Datei wird einfach als Datei ohne Endung abgespeichert und muss in euer Root-Verzeichnis abgelegt werden. (Wichtig ist das die Datei keine Endung hat und mit dem führenden . beginnt.)

Der Quellcode hierfür ist genauso kurz wie er einfach ist, lediglich diese Zeile in eure .htaccess-Datei schreiben und fertig.

ErrorDocument 404 /404.html

Die Robots.txt ist eine normale Textdatei die im Rootverzeichnis abgelegt wird. Der Sinn dieser Robots.txt ist es, Suchmaschinen verschiedene Datein und Verzeichnisse vorzuenthalten und nicht auslesen zu lassen. Der Vorteil liegt darin, dass man dadurch eventuell entstehenden doppelten Content vermeiden kann, sowie Datein und Verzeichnisse die Google besser nicht erfassen sollte, wie zum Beispiel einen Internen Bereich, ein privates Forum usw. Hierbei bietet die Robots.txt einige Konfigurationsmöglichkeiten die hier einmal kurz erläutert werden.

Bitte habt Verständniss dass nicht alle auf einmal gelistet werden, da ich sicher gehen möchte dass die Codes die ich euch hier biete auch wirklich funktionieren.

Zugriff auf alle enthaltenen Dateien erlauben:

# Zugriff auf alle Dateien erlauben
User-agent: *
Disallow:

Das Rautezeichen dient als Kommentierungssymbol

Zugriff auf ein Verzeichniss sperren

# Zugriff auf alle Dateien erlauben bis auf den angegebenen Ordner
User-agent: *
Disallow: /secret/

Zugriff auf einzelne Datein sperren

# Zugriff auf alle Dateien erlauben bis auf die angegebene Datei
User-agent: *
Disallow: /secret/index.html

Mehrere Dateien / Ordner sperren

# Zugriff auf alle Dateien erlauben bis auf die angegebenen Ordner und Dateien
User-agent: *
Disallow: /secret/index.html
Disallow: /secret/forum.html
Disallow: /topsecret/

Einzelne Dateitypen sperren

User-agent: *
Disallow: /*.pdf$

Fragezeichen urls sperren

User-agent: *
Disallow: /*?

Achtung dieser Befehl funktioniert nur für den Google-Bot

Nur einzelne Pfade durchsuchen lassen

Da es sehr umfangreich wird die gesamte Homepage bis auf einige Verzeichnisse auslesen zu lassen, gibt es noch den Allow-Befehl, mit dessen Hilfe ihr die Sperre für einzelne Verzeichnisse wieder aufheben könnt.

User-agent: *
Disallow: /
Allow: /fuer_alle

Achtung dieser Befehl funktioniert nur bei den Google und Yahoo)

Die komplette Internetseite aussperren

# Zugriff auf alle Dateien sperren
User-agent: *
Disallow: /

Bitte hierbei besonders auf dem / nach dem Disallow: achten.

Einzelne Robots aussperren

Desweiteren habt ihr mit den folgendem Befehl die Möglichkeit einzelne Robots von Suchmaschinen auszusperren, der Sinn dessen bleibt mir zwar verschlossen, aber der vollständigkeit halber.

User-agent: GagaRobot
Disallow: /

Eine sehr gute Liste verschiedener Robots findet ihr auf www.homepage-total.de.

Crawlinggeschwindigkeit Verändern

User-agent: *
Disallow:
Crawl-delay: 60

Diese Lösung funktioniert allerdings nur für die Bots von Yahoo und MSN, ist allerdings nicht empfehlenswert, da dies das Ausleseergebnis beeinflussen könnte.

Einige haben sich vielleicht schonmal gefragt, ob es in der Eckigen Welt der Divs nicht auch möglich ist diese abzurunden. Die Antwort darauf ist Jain, denn es ist nur für einige Browser möglich, diesen kleinen Trick anzuwenden, welcher es euch ermöglicht Divcontainer abzurunden, einer der Browser der mit bekannt ist, ist der gute alte Firefox. Um euch mal ein einfache Beisiel hierfür zu geben, kommt hier ein kleiner Code-Schnippsel:

-moz-border-radius-bottomleft:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;

Eigentlich sollte sich der Quellcode von selbst erklären aber trotzdem hier eine kleine Erläuterung. Anhand der Werte bottomleft etc. gebt ihr an welche Ecke abgerundet werden soll, so zum Beispiel bei bottomleft die untere linke Kante des Divs. Die Wert Angabe dahinter sollte euch aus Photoshop bekannt sein, welche angiebt um wieviel Pixel die Abrundung durchgeführt werden soll.

Mehr gibt es zu diesem Thema eigentlich kaum noch zu sagen, ausser dass diese Abrundung in Browsern welche dies nicht unterstützen einfach nicht angezeigt wird und der eigentlich abgerundete Div als normaler eckiger Div wieder angezeigt wird.

Wenn ihr eine Seite mit einer statischen größe habt und diese der Form halber für sehr lange Content Bereiche nicht erweitern möchtet, kommt dem einem oder anderen bestimmt der Gedanke den guten alten Frame einzusetzen.

TUT ES NICHT

Frames zu verwenden ist in der heutigen Zeit absolut unnötig, wobei die Problematik von Frames eigentich den meisten klar sein sollte, für diejenigen die sich damit noch nicht befasst haben, gibt es hier einen kleinen Artikel.

Verwendet statt dessen einen kleinen Befehl in eurem Stylesheet, dieser hat dne Namen overflow. Overflow erzeugt einen Frame ohne dass es tatsächlich ein Frame ist. Dieser künstliche Frame hat keinerlei Nachteile des alten Frames und benötigt kein Frameset, lediglich die Definierung im Stylesheet die in etwa wie folgt aussehen sollte:

width:620px;
height:650px;
overflow:auto;

Ihr müsst stets eine Höhe und eine Breite angeben, da sonst der Frame automatisch auf eine Breite und Höhe von 0 gesetzt wird und damit nicht auftaucht.

Falls ihr bei eurem Projekt eine Fehlerseite einbauen möchtet, welche fehlgeleitete Besucher zu eurer Startseite verweist gibt es einen einfachen Meta-Tag, welcher euch die automatische weiterleitung sehr bequem realisiert.

<meta http-equiv="refresh" content="5; URL=index.html">

Die Zahl nach “content=” steht für die Sekunden die gewartet werden soll, bevor der Meta-Tag die Weiterleitung einleiten soll. Nach dem “URL=” folgt dann die das Ziel eurer automatischen Weiterleitung, welches ihr entweder wie hier angegeben auf einer eurer Webseiten machen könnt, oder aber auch in dem ihr “http://www.beispiel.de” angebt, eine externe Seite mit der Weiterleitung verlinken lassen.

Was stets bei einer guten Homepageerstellung wichtig ist, ist die Umwandlung der Sonderzeichen, hiermit sind nicht nur Dinge wie ä, ö, ü oder ß gemeint, sondern sondern auch Sonderzeichen wie <, >, &, “, – und viele mehr. Denn nur durch diese Umwandlung der Sonderzeichen könnt ihr sicher sein dass euer Quellcode vernünftig ausgelesen werden kann, sei es von Validatoren oder Suchmaschinen. Versucht stets Sonderzeichen in Dateinamen oder Ordnernamen zu vermeiden da dies zu einem schlechten Ergebnis in den Suchmaschinen führen kann.

Als eine kleine Hilfestellung habe ich euch hier eine kleine Sonderzeichentabelle zusammengefasst, die die üblichen Sonderzeichen eigentlich abdecken sollte, sollten euch weitere Sonderzeichen fehlen habe ich hier noch eine gute Seite auf der Ihr viele Sonderzeichen nachlesen könnt.

Sonderzeichentabelle

Irgendwann kommt meistens der Punkt an dem Ihr in eure Website eine Möglichkeit einbauen möchtet um Resonanz durch Besucher zu bekommen, bzw. Aufträge zu erhalten.  Die Antwort hierauf ist ein Kontaktformular. Mit einem Kontaktformular könnt ihr verschiedene Funktionen erfüllen lassen, unter anderem könnt ihr Textnachrichten Empfangen den Status eines Objektes mittels einer Checkbox in eurem Kontakformular darstellen lassen oder einfach nur die Namen und Telefonnummern eurer User erhalten. In einem Kontaktformular sind eigentlich kaum Grenzen gesetzt, ausser ihr stellt diese auf.

Als erstes solltet Ihr überlegen, welche Abfragen ihr in eurem Kontaktformular einbauen möchtet, Absender, Name etc. Wichtig bei eurem Kontaktformular kann auch die Festlegung von Pflichtfeldern sein, welche der Absender ausfüllen muss.

Hier habt ihr ein kleines einfaches Kontaktformular jedoch ladet euch ZUVOR noch die pflichtfeld.js herunter.

 
  <script src="pflichtfeld.js" type="text/javascript"><!--mce:0--></script>
<div id="content" class="form">
<form id="kontaktformular" action="http://www.nettz.de/Formular-Chef/Formular-Chef.cgi" enctype="mulitpart/form-data" method="post">
<input name="empfaenger" type="hidden" value="infoX§Xcss-roots.de" />
<div>
   <label for="absender">Ihre E–mailadresse:*
</label>
max 25 Zeichen
 
<input id="absender" maxlength="25" name="absender" type="numbers" />
 
   <label for="telefon">Telefon:*
</label>
 
max 15 Zeichen
 
<input id="telefon" maxlength="15" name="telefon" type="text" />
 
   <label id="label1" style="cursor:pointer;" for="name">Name:*
</label>
 
max 15 Zeichen
 
<input id="name" class="eingabefeld" maxlength="30" name="name" type="text" /></div>
<div>
<label for="nachricht">Ihre Nachricht:*</label>
<textarea id="nachricht" cols="20" rows="5" name="nachricht"></textarea></div>
<div>
<input type="submit" value="Abschicken" /></div>
<div class="kleinkram">
*Pflichtfelder</div>
</form></div>

Und jetzt folgt noch der notwendige CSS-Bestandteil

* {margin:0; padding:0;}
* img { border:0; }
 
body
  {
  font:13px Arial, Verdana, Helvetica, sans-serif;
  color: #515050;
  }
 
/**** Formularfelder **/
form p
{
padding-bottom:5px;
}
 
form
{
margin-top:10px;
margin-left:10px;
width:400px;
padding:20px;
border: 1px solid #8c8c8c;
}
 
label
{
display:block;
cursor:pointer; /** Mauszeiger wird zur Hand **/
}
 
input#absender, textarea, #telefon, #name /* breite und Rahmen der Textfelder definieren */
{
width:400px;
border: 1px solid #8c8c8c;
margin-bottom:1em;
}
 
textarea /* Höhe des Textfeldes definieren */
{
height:7em;
}
 
.kleinkram
{
font-size:9px;
}

Nun zur Erklärung des HTML-Bestandteils, der Stylesheet sollte sich mittlerweile von selbst erklären.

<form id="kontaktformular" action="http://www.nettz.de/Formular-Chef/Formular-Chef.cgi" enctype="mulitpart/form-data" method="post">
<input name="empfaenger" type="hidden" value="infoX§Xcss-roots.de" />
</form>
 
Mit dem Operator Action, übergebt ihr dem Kontaktformular praktisch wo das dazugehörige Formmailscript liegt, falls ihr ein eigenes habt, ersetzt die Adresse durch euren Pfad. Solltet ihr keines besitzen könnt ihr dieses hier verwenden, denn Formular Chef ist ein Free-Webmailer welcher ohne Registrierung oder der gleichen funktioniert. Die Elemente nach dem enctype kommen, arbeiten mit dem pflichtfelder.js Javascript zusammen, und überprüfen ob die in der Klammer nach dem Array angegebenen Namen der Labels mit Inhalten gefüllt sind. 
 
Die einzelnen Labels stehen für die einzelnen Formularfelder, welche ihr mit den angegebenen Attributen ausfüllen solltet. Das Element maxlength="15"  veranlasst dass eine Maximale Zeichenangabe festgelegt wird die nicht überschritten werden kann.
<pre lang="html">onchange="value=value.replace(/\D/g,'');"

Dieses Element bei der Telefonnummer sorgt dafür dass in dem Bereich eures Kontaktformulares keinerlei Sonderzeichen dargestellt werden, sondern gelöscht werden.
Textarea steht für das Nachrichtenfeld in der der Absender seine Hauptnachricht hineinschreibt.
So jetzt noch das letzte Element was euch fremd erscheinen könnte,

value="infoX§Xcss-roots.de"

Das X§X soll euch ein wenig vor Spamnachrichten schützen.

So in etwa sollte es dann aussehen:

Wenn ihr mit eurem Stylesheet arbeitet solltet ihr euch stets einem bewusst sein, ein Stylesheet beurteilt Klassen, Pseudoklassen, Id´s und Attribut-Styles nach verschiedenen Gewichtungen. Diese Gewichtungen entscheiden welches Element wirksam wird. So können zum Beispiel im Body festgelegte Farben, Schriften etc. “überschrieben” werden, wenn in einer ID zum Beispiel ein abweichender Wert angegeben wird.

Kleines Beisiel:

1
2
3
4
5
6
7
8
9

body
{
background:black;
}
 
#content
{
background:white;
}

Hier gillt dann zwar für den gesamten body das der Hintergrund Schwarz sein soll, jedoch durch die abweichende Eigenschaft in der ID Content, wird die Background Rigenschaft vom Body, nur für Inhalte im Div “content” stehender Elemente mit der Eigenschaft Background white überschrieben. Also werden die Eigenschaften ersetzt.