HTML, CSS & Co. bei eBay

Selbstverständlich gibt es bis auf ein paar spezielle eBay-tags für die mich-Seite (um die es hier nicht geht) kein extra HTML oder CSS für eBay.
Einige Besonderheiten gegenüber einer "normalen" Website gibt es trotzdem - aus drei Gründen:

• Quelltext den man bei ebay einfügt ist immer nur ein Teil einer Website - egal ob es sich um ein Angebot, eine mich-Seite oder eine Shop-Seite handelt.
  Dies gilt ebenso für die Seiten bei anderen Auktionshäusern oder wo immer HTML Quelltext in eine bestehende Seite eingefügt wird (z.B. Foren wenn dort HTML erlaubt ist).
  
  
• Speziell bei ebay Angeboten ist es darüberhinaus nicht erlaubt die Bereiche außerhalb der eigenen Artikelbeschreibung zu verändern - dies kann zur Löschung des Angebots führen - auch wenn immer wieder mal sowas zu sehen ist.
  
  
• Der Einsatz von Scripten ist teilweise verboten oder auch an Bedingungen geknüpft.
  http://pages.ebay.de/help/policies/listing-javascript.html
  http://pages.ebay.de/help/sell/skriptsprachen_hilfe.html

Aus diesen Gründen sind einige Dinge zu beachten wenn man selbst Quelltexte für eBay mit einem HTML-Editor erstellt

Der normale Aufbau einer Website - so oder ähnlich von den meisten Editoren erstellt:

Alles was durchgestrichen ist hat bei ebay nichts zu suchen - nur der Seiteninhalt und ein eventuell vorhandenes stylesheet aus dem head der Seite gehört in das Feld der Artikelbeschreibung oder das der mich-Seite.

Möglich ist außerdem - ohne den ganzen head noch der Metatag gegen die IE Imagetoolbar und witzigerweise der link zu einem favicon - falls ihr sowas auf eurer Website habt.

Auch wenn das stylesheet normalerweise in den head der Seite gehört - es kann auch (fast) problemlos dem eigentlichen Seiteninhalt vorangestellt werden.

Probleme:

Auf die ungewöhnliche Position des stylesheets reagieren verschiedene HTML-Editoren unterschiedlich - und meist lästig - bei erneuter Bearbeitung läßt nur Phase5 (und reine Texteditoren) so einen Quelltext unverändert.

• NVU und andere ergänzen bei erneuter Bearbeitung normalerweise das grade entfernte HTML-Grundgerüst wieder - es muß also jedes mal wieder gelöscht werden.
  
  
• Der HTML-Editor des Verkaufsformulars bei ebay und im Turbo Lister (und auch z.B. der AFFS HTML Designer) löschen das stylesheet beim wechsel zwischen WYSIWIG und Quellcodeansicht.
  
  Dies Problem läßt sich vermeiden indem man dem kompletten eigenen Quelltext ein <br> voranstellt oder alles in eine 100% breite Tabelle packt falls der Abstand stört.

Weiteres Problem speziell des Turbo Listers ist, daß beim Überarbeiten und Wechsel der Ansichten im stylesheet bei jedem Aufruf neue Leerzeilen eingefügt werden, die nicht nur lästig sind sondern auch die Dateigröße des Quelltextes aufblähen.

Außer durch die Verwendung einer Vorlage anstelle von Überarbeitung kann man dies am besten vermeiden wenn man das stylesheet extern auf eigenen Webspace läd und nur den link dahin im Angebot läßt:
<link rel="stylesheet" href="URL/dateiname.css" type="text/css">
Voraussetzung dafür sollte aber zuverlässiger eigener Webspace sein.

Noch immer liest man auf Webseiten "Optimiert für eine Bildschirmauflösung von ..." - was im Klartext heißt, daß die Seite bei anderen Bildschirmauflöungen normalerweise nicht gut aussieht. Entweder ist dann lästiges querscrollen nötig oder der Seiteninhalt klebt als schmaler Streifen am linken Bildschirmrand.
Dies ist ebensowenig freundlich gegenüber Besuchern wie zu verlangen einen bestimmten Browser zu benutzen oder eine spezielle Schriftgröße eingestellt zu haben.

Man kann sich natürlich auf den Standpunkt stellen "1024 Pixel Bildschirmbreite hat doch heute jeder ..." aber vielleicht wäre grade derjenige der wieder wegklickt weil er nicht querscrollen will der Kunde mit dem höchsten Gebot gewesen.

Dies gilt allgemein - bei eBay kommt noch hinzu, daß sich der eBay-Teil der Seite nicht den festgelegten Breiten eures Angebotes anpaßt. Die eBay Tabellen haben 100% Breite - und die behalten sie auch wenn das Angebot selbst breiter (oder schmaler) ist.

Das Ergebnis ist links zu sehen - der Abschnitt mit dem Angebot wird aus dem eBay Seitenrand herausgeschoben - ein nicht sehr professioneller Eindruck.

Wer nicht grade Monitore verkauft sollte besser keine festen Breiten benutzen - wenn es dennoch unbedingt sein soll, sollte der Inhalt nicht mehr als 780 Pixel breit sein - und außerdem zentriert werden um auf der eBay Seite auch bei verschiedenen Auflösungen ansprechend auszusehen. Eine feste Höhe ist nur mal für ein einzelnes Element anzuraten - aber dann muß man auch prüfen ob der Inhalt auch bei anderer Schriftgröße im Browser noch in das Element passt.

Manche Editoren muß man erst überreden zumindest den größten Teil der Werte relativ in % anzugeben.

Es kann auch passieren, daß feste Breiten unbeabsichtigt im Quelltext stehen. Der Turbo Lister kann zum Beispiel nicht selbst Tabellen erstellen - aber wenn ihr dort einen solchen Quelltext einfügt und in der Entwurfsansicht an den Rändern einer Tabelle mit der Maus zieht stehen plötzlich feste Breiten im Quelltext.

Doctype

Grundsätzlich kann man bei eBay alles was mit CSS möglich ist auch einsetzen. Mehr zu CSS zum Beispiel bei css4you.
Bei einigen Sachen hängt allerdings die Darstellung in verschiedenen Browsern auch davon ab welcher Doctype für das Dokument gewählt wurde.
Schlechte Nachricht: trotz aller Kritik daran enthalten die eBay Angebotsseiten nach wie vor keine Angabe des Doctype - ebenso wie bei Azubo oder auxion!
Bei Hood ist es <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Sollte euer Editor automatisch einen Doctype einfügen dann entfernt den wenn ihr eine realistische Vorschau haben wollt - und prüft die Vorschau am besten in mehreren Browsern wenn ihr mehr als nur die Formatierung von Schriften vorhabt.

Absolute Positionierung

Wenn ihr mit Layern arbeitet , dann werden die Elemente absolut auf dem Bildschirm positioniert. Für eine Website ist dies auch ok und ermöglicht eine relativ freie Verteilung des Inhalts im body des Dokuments.

Bei eBay verursacht ein solcher Quelltext Probleme weil die Position am body ausgerichtet ist - in dem sich ja auch die eBay Anteile der Angebotsseite befinden. Die Folge ist normalerweise, daß der obere Teil (einschließlich des "Bieten" Buttons) von eurem Quelltext überdeckt wird. :-(

Es macht wenig Sinn dann nur die oberen Abstände zu erhöhen - denn die sind gemessen in Pixeln auch abhängig von der eingestellten Schriftgröße des Besuchers.
Besser ist auf absolute Positionierung zu verzichten - oder wenn es unbedingt sein soll den gesamten Quelltext in ein relativ Positioniertes div einzuschließen, das dann den Bezugspunkt für die absoluten Positionen bildet.

Allerdings muß dies div auch eine ausreichende Höhe haben damit das Problem nicht anschließend im unteren Teil auftritt. Wenn dort nur absolut positionierte Elemente enthalten sind wird die Höhe durch sie nicht automatisch hergestellt.

Die zunächst einfache Seitenerstellung im WYSIWYG Modus kann schnell zu einer aufwändigen Testreihe werden. Für eine realistische Vorschau müßt ihr den Artikel nicht erst einstellen - ruft ein x-beliebiges Angebot bei eBay auf - laßt den Quelltext anzeigen und speichert den.
Dann kann man alles zwischen <!-- Begin Description --> und <!-- End Description --> durch den eigenen Quelltext ersetzen und das Ergebnis dann als Vorschau ansehen.

Formatierungen von Elementen

In einem "normalen" stylesheet werden die Formate für verschiedene Elemente festgelegt - z.B.:

<style type="text/css">
body {
  background: #3F3F3F;
  color: #EFEFEF;
  font-family: Lucida Sans, Verdana, sans-serif;
}
p {
 color: #E21D2C;
 font-size: 90%;
}
h2 {
  text-align: center;
  color: #00A0FF;
}
table {
  border: 3px solid #FFFFFF;
}
</style>

Mit so einem stylesheet würden aber bei eBay alle p, h2 oder table formatiert - was nicht nur verboten sondern meist auch gar nicht beabsichtigt ist.

Mit body selbstverständlich auch der gesamte body der Seite. Das ist bei eBay nicht zu sehen wenn nur der background formatiert ist, weil der eBay Teil der Seite in Tabellen liegt, die einen eigenen (weißen) Hintergrund haben der den body verdeckt. Bei anderen Auktionhäusern würde auch der ganze body sichtbar eingefärbt - eine Hintergrundfarbe/bild setzt man dort besser in ein extra div für die Beschreibung.
Dies kann man auch bei ebay machen - dann ist der Hintergrund nur im Bereich der Beschreibung und nicht wie bei body auch hinter dem eBay Bild zu sehen.

Um das Problem zu vermeiden muß man mit Klassen oder IDs arbeiten denen die Formatierung zugewiesen wird.
Eine ID kann nur einmal auf der Seite vorkommen - und bei eBay liegt der Bereich für die Artikelbeschreibung bereits in einer ID

<div id="EBdescription"> <!-- Begin Description --> hier ist der eigene Quelltext eingefügt <!-- End Description --> </div>

Wenn die Formatierungen nur für die Artikelbeschreibung gelten sollen müßte das stylesheet von oben also so aussehen:

<style type="text/css">
#EBdescription {
  background: #3F3F3F;
  color: #EFEFEF;
  font-family: Lucida Sans, Verdana, sans-serif;
}
#EBdescription p {
 color: #E21D2C;
 font-size: 90%;
}
#EBdescription h2 {
  text-align: center;
  color: #00A0FF;
}
#EBdescription table {
  border: 3px solid #FFFFFF;
}
</style>

Allerdings empfehle ich nicht wirklich diese eBay ID zu benutzen wenn es nicht um einen Notfall geht.
Falls morgen eBay den Namen ändert oder sie abschafft hättet ihr sonst viel Arbeit alles zu überarbeiten.

Besser ist eine eigene id zu verwenden - bei anderen Auktionhäusern gibt es ohnehin keine fertige. Die kann man entweder einem umgebenden div oder einer Tabelle zuweisen wenn ihr ein Tabellenlayout benutzt -der Name ist egal

<div id="artikelbeschreibung"> hier den ganzen Quelltext rein </div>

oder:

<table width="100%" id="maincontent" cellpadding="0" cellspacing="0">
<tr> <td>
hier den ganzen Quelltext rein
</td></tr></table>

Stattdessen kann man auch für den eigenen Bereich Klassen zuweisen - falls dies nicht ohnehin schon im stylesheet der Fall ist weil ihr Elemente unterschiedlich formatiert.

<style type="text/css">
p.beschreibung {
 font-family: Arial, sans-serif;
 font-size: 120%;
 color: #004080;
}
p.abwicklung {
 font-family: Arial, sans-serif;
 font-size: 90%;
 color: #000000;
}
</style>
<p class="beschreibung">Text der Artikelbeschreibung</p>
<p class="beschreibung">noch ein Absatz</p>
<p class="abwicklung">Text der Zahlungs- und Versandbedingungen</p>

Einziger Nachteil ist, daß diese Klasse dann bei jedem Vorkommen des Elements neu zugewiesen werden muß und damit der HTML Teil des Quelltextes unübersichtlicher wird.
Wenn man in der Entwurfsansicht des online-Verkaufsformulars oder des Turbo Lister arbeiten will ist das nicht ohne Wechsel zur HTML Ansicht möglich.