Archiv der Kategorie: Web-Design

Update zu ‚Bildbeschreibung über Bild anzeigen‘

Der Code im Artikel Bildbeschreibung über Bild anzeigen hat noch zwei Probleme bei älteren Versionen des Internet Explorers:

Internet Explorer 7:

Beim Internet Explorer 7 kann es passieren, dass der Block mit dem Text neben oder verschoben auf dem Bild angezeigt wird. Dadurch wird der Textblock teilweise durch nachfolgende Elemente verdeckt. Durch die explizite Positionsangabe und dem Wechsel von der Variante des Versteckens mittels display-Style zum visibility-Style konnte ich diese Probleme beheben:

div.switch div.mouse
{
  width: 130px;
  height: 100px;
  display: block;
  visibility: hidden;
  position: absolute;
  text-align: center;
  padding: 10px;
  background-image: url(halfwhite.gif);
  left: 0px;
}
div.switch:hover div.mouse
{
  visibility: visible;
}

Internet Explorer 6:

Hier ist das Problem schwerwiegender. Der Internet Explorer 6 unterstützt keine Unterselektoren nach einem Pseudo-Element. Somit funktioniert das entscheidende Style Sheet nicht. Als Workaround zeige ich den Text im Internet Explorer 6 als ToolTip an. Der JavaScript-Code und die Styles können der aktualiserten Datei entnommen werden.

HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif

Bildbeschreibung über Bild anzeigen

Mit einem einfachen Aufbau kann ein netter Mouse-Over Effekt erzeugt werden. Dabei werden zwei Elemente definiert, die dann die gleiche Grösse erhalten und das zweite Element vorerst nicht sichtbar ist.

Der HTML-Code:

<div class="switch">
  <div class="nomouse"><img src="head.jpg" alt="Head"/></div>
  <div class="mouse">It's a head.</div>
</div>

Das CSS:

div.switch div
{
  display: block;
  float: left;
}
div.switch
{
  position: relative;
}
div.switch div
{
  width: 150px;
  height: 120px;
}
div.switch div.mouse
{
  width: 130px;
  height: 100px;
  display: none;
  position: absolute;
  text-align: center;
  padding: 10px;
  background-image: url(halfwhite.gif);
}

Und das alles entscheidende Style Sheet:

div.switch:hover div.mouse
{
  display: block;
}

Dadurch wird der Block mit dem Text sichtbar gemacht. Zur besseren Sichtbarkeit wird ein halbtransparentes/halbweisses Hintergrundbild verwendet.

Die Dateien können hier heruntergeladen werden:
HTML File switchingblock.html
Grafik head.jpg
Grafik halfwhite.gif

Verschwundener Text im Internet Explorer

Ein Fehler, der bei mir schon öfters aufgetreten ist:

Der Internet Explorer (Version 6.0) stellt den Inhalt nicht dar, wenn die CSS-Eigenschaft

clear

verwendet wird und der umschliessende Block eine Hintergrundfarbe oder ein Hintergrundbild enthält. Auf den Hintergrund zu verzichten ist keine Alternative, aber der Holly Hack schon:

Beim umgebenden Block einfach die Höhe mit

height: 1%;

angeben, und ein Bug frisst den anderen…

Gute Position bei Google und Co.

Wenn neue Webseiten aufgeschaltet werden stellt sich immer wieder die Frage:

Wieso werde ich bei Google nicht gefunden?

Die Antwort darauf ist relativ einfach, die Lösung dagegen mit Aufwand verbunden.

Google bewertet die verschiedenen Seiten, die der googlebot findet. Wie diese Bewertung genau ausieht ist ein Geschäftsgeheimnis von Google. Es basiert aber hauptsächlich auf dem Inhalt und der auf die Seite weisenden Links. Dabei werden Links, die von Seiten kommen, die ein ähnliches Thema behandeln, stärker gewichtet als Links, die von Seiten kommen, die keinen direkten Bezug haben. Zudem wird auch beachtet, wie die verlinkende Seite selber bewertet ist. Andere Suchmaschinen benutzen meist ähnliche Bewertungsalgorithmen.

Daraus habe ich die CCC-Regel abgeleitet:

Content – Connections – Check

Content:

Ohne Inhalt läuft nichts. Der Inhalt ist der Teil, der den Besucher interessiert und deshalb auch vom Such-Roboter bevorzugt beachtet wird. Dabei sollte der Inhalt auch aktuell sein und regelmässig aktualisert und erneuert werden.

Connections:

Verknüpfungen auf die Seite zeigen der Suchmaschine, dass der Inhalt für das Thema relevant ist und deshalb auch den Suchmaschinen-Benutzern angezeigt werden soll. Dabei besteht natürlich ein Henne-Ei Problem. Wenn niemand meine Seite kennt, setzt auch niemand einen Link auf meine Seite. Abhelfen können zum Teil Kontakte, die man mit Leuten mit gleichen interessen hat. Wenn diese auf ihren Wenseiten auf die Inhalte der eignen Webseite verweisen und man selber auf die Inhalte der anderen verweist ist beiden geholfen. Linklisten auf einer Seite sind dabei aber weniger wirkungsvoll als Verknüpfungen innerhalb eines Fliesstextes, welcher von dem von der eigenen Seite behandelte Thema handelt.

Check:

Nur durch regelmässiges Überprüfen kann der Erfolg der Anstrengungen überprüft werden. Dabei sollte einerseits die Position der Seite bei den jeweiligen Suchmaschinen für die relevanten Suchbegriffe überprüft werden. Dabei kann man auch Tools einsetzten, die einem diese aufwändige Arbeit abnehmen. Andererseits sollte auch überprüft werden, mit welchen Suchbegriffen man gefunden wird. Denn möglicherweise suchen die Besucher gar nicht mit den Begriffen, die man selber vermutet.

Gute Suchmaschinen-Plazierungen können nicht einmal erreicht und dann behalten werden, mann muss für Sie regelmässig arbeiten. Dass heisst, immer für neuen Inhalt besorgt sein, versuchen neue Links auf die eingene Seite verweisen zu lassen und regelmässig den Erfolg überprüfen.