Christopher Wiegel » CSS

Suchmaschinenfreundliche Grafikheadlines

Christopher — Mon, 30 Mar 2009 09:32:00 +0000

Im Sinne der Suchmaschinenoptimierung stelle ich hier eine Möglichkeit vor wie man Grafikheadlines suchmaschinenfreundlich einbinden kann.

Wenn Headlines wegen einer besonderen Schriftart oder Formatierung als Grafik eingebunden werden sollen, geht die eigentliche Textinformation für die Suchmaschine verloren. Eine Möglichkeit ist natürlich das Alt-Tag. Meiner Meinung nach ist die folgende Variante allerdings für Suchmaschinen besser geeignet.

Im HTML wird die entsprechende Überschrift wie eine “ganz normale” Textüberschrift eingebunden:
...

`Beispielüberschrift`

Die Suchmaschine sieht also nur eine “ganz normale” Headline mit Text. Damit die Überschrift jetzt im Browser mit der gewünschten Grafik dargestellt wird, werden im CSS folgende Anweisungen festgelegt:
.beispiel h1 { height:0px; padding-top:30px; background:url(../images/headline.gif) top left no-repeat; overflow:hidden; }

Bei diesem Beispiel ist die Grafikheadline 30 Pixel hoch. Der Headline-Text im HTML wird durch die Anweisungen im CSS versteckt und die Hintergrundgrafik wird angezeigt.

Um diese Methode auf mehreren Seiten einer Homepage anwenden zu können gibt man dem Body-Tag jeder Seite am besten jeweils eine entsprechende Body-Class. In diesem Beispiel wurde die Body-Class “Beispiel” verwendet.

Double-float margin Bug im IE6

Christopher — Thu, 26 Mar 2009 22:29:40 +0000

An diesem Bug im Internet Explorer 6 und älter ist vermutlich jeder Webentwickler in seinen Anfängen mit CSS schon einmal halb verzweifelt!

Zum testen der Seiten verwenden die meisten Entwickler wegen der guten CSS-Unterstüzung den Firefox. Hat man eine Seite fertiggestellt und prüft diese dann in den anderen gängigen Browsern kommt nicht selten die bösen Überraschung. Layout zerschossen! Was den Internet Explorer 6 und die Versionen davor angeht tritt hier oft der “double-float margin Bug” auf.

Hier ein Beispiel unter welchen Bedingungen der Bug auftritt:

HTML:
...

CSS:

#beispielbox {

width:100px;

height:100px;

float:left;

margin-left:25px;

}

Wenn man auf ein Element welches zum Beispiel mit einem float:left; versehen ist zusätzlich ein margin:left; anwendet tritt der Bug auf. Der eingesetzte Wert für den Abstand nach links (hier 25 Pixel) wird vom Internet Explorer verdoppelt. Um Float und Margin in “eine Richtung” im IE6 trotzdem verwenden zu können gibt man dem gefloateten Element einfach ein display:inline; um den Bug zu beheben.

Neue Website für den SV Brackel

Christopher — Sun, 08 Feb 2009 07:48:44 +0000

Kürzlich wurde die neue Internetseite für den Schützenverein Brackel und Umgegend e.V. fertiggestellt.

Für die Seite wurde ein komplett neues Design erstellt und zunächst als XHTML-Template umgesetzt. Um dem SV Brackel die Pflege der neuen Website zu ermöglichen wurde das Redaxo-CMS eingesetzt.

Website des Schützenverein Brackel und Umgegend e.V.

Die wesentlichen Funktionen der Seite sind: die Newsfunktion und das Online-Game auf der Startseite, der Newsletterservice, das Gästebuch und die Fotogalerien.

Neben vielen Informationen rund um den Schützenverein Brackel und Umgegend e.V. gibt es auf der Seite jede Menge Fotos von Veranstaltungen und immer die neusten Meldungen und Termine.

Link zur Website des SV Brackel

Website für FeWo in Kühlungsborn

Christopher — Wed, 10 Dec 2008 07:26:36 +0000

Die erste Version der Website für die Ferienwohnung in Kühlungsborn ging schon im März 2007 online.

Im laufe der Zeit wurden immer wieder Veränderungen und Aktualisierungen an der Seite vorgenommen. Mittlerweile ist die valide XHTML Seite mit dem Redaxo CMS aufgebaut und ist in Suchmaschinen gut platziert.

Website der Ferienwohnung in Kühlungsborn

Im Zuge der kontinuierlich laufenden Suchmaschinenoptimierung wurde nun der Linkpartner Bereich unter “Empfehlungen” überarbeitet und ein Bereich mit Infos zu Urlaubsaktivitäten und Ausflugszielen unter “Urlaub” neu angelegt.

Neben Fotos aus der Ferienwohnung und von Kühlungsborn finden Sie auf der Seite alle Informationen die Sie für einen Ostseeurlaub in einer kleinen Ferienwohnung in unmittelbarer Strandnähe brauchen.

Link zur Website der Ferienwohnung in Kühlungsborn

Neue Homepage für den lifepoint-JuGo

Christopher — Fri, 05 Sep 2008 13:04:25 +0000

Die neue Internetseite für den lifepoint-Jugendgottesdienst ist fertig und online!

Die Inhalte der alten Seite wurden komplett in die neue Struktur integriert und durch einige neue Bereiche ergänzt. Das individuell für den lifepoint-Jugendgottesdienst erstellte Design wurde in einm XHTML-Template umgesetzt und in das Redaxo-CMS integriert. Durch das Content-Management-System können Inhalte der neuen Website ganz einfach durch das lifepoint-Team geändert werden.

lifepoint-Jugendgottesdienst Website

Eine der neuen Fuktionen der Seite ist zum Beispiel der Routenplaner zum lifepoint nach Gödenstorf. Mit einem Klick auf den Pin in der Karte unter dem Punkt “Anfahrt” öffnet sich das Eingabefeld für die eigene Adresse. Nach Eingabe der Adresse und einem weiteren Klick auf “Abschicken!”, wird per Google Maps die Anfahrtsbeschreibung ausgegeben.

Neben dem Routenplaner gibt es auf der Seite die nächsten Termine viele Infos zum lifepoint und regelmäßig neue Fotos und Videos zu sehen.

Link zur lifepoint-Jugendgottesdienst Website

Website für den Faslamsclub Brackel

Christopher — Sat, 11 Nov 2006 09:05:35 +0000

Die bestehende Internetseite des Faslamsclub Brackel wurde optisch neu gestaltet und inhaltlich fast komplett von der Vorgängerversion übernommen.

Aufgabe war es, die Faslamsente bei der Neugestaltung deutlich in den Vordergrund zu rücken und schon auf der Startseite eine Möglichkeit zu schaffen, um kurze Kommentare abzugeben. Umgesetzt wurde das Design zunächst in einem XHTML-Template mit externer CSS Datei. Auf den Einsatz eines CMS-Systems, wurde zunächst aufgrund der seltenen Änderungen auf der Seite, verzichtet.

Website des Faslamsclub Brackel

Insgesamt bietet die neue Internetseite des Falslamsclubs jede Menge Informationen rund um das Faslamsfest. Neben Faslamseltern und Ordensträgern der letzten Jahre gibt es immer reichlich Fotos der einzelnen Veranstaltungen.

Link zur Faslamsclub Brackel Website