Wie kann ich die Liste meiner Fahrzeuge von mobile.de auf meine Homepage kopieren?

Man wähle den Text aus und füge ihn in einem HTML-Editor als HTML ein (moderne Browser kopieren als HTML). Dabei werden Bilder als Links kopiert. Anschließend sollte man noch die gewünschten CSS-Formate definieren. Eine Liste der mobile.de Fahrzeugliste (hier mit einem Eintrag) sieht so aus:

	


    
    
    
    Details

    
Artikel-Titel

Gebrauchtfahrzeug

Agrarfahrzeuge, Schlepper

599 EUR

Benötigt werden also die CSS-Klassen: ul#searchResults, li.clearfix, div.preview, div.facts, h5.isItNew, div.price, und davon abhängige CSS-Formatierungen enthaltener Elemente. Zur CSS-Formatierung füge man den folgenden Bereich in einen

Bereich im HTML-Body, oder wenn das nicht möglich ist, im CSS-Template ein. Dabei sind hier jeweils zwei alternative Selektoren zur Auswahl derselben Elemente notiert um Probleme mit CMS-Systemen (z.B. Joomla 1.5 mit TinyMCE) zu begegnen die ID-Attribute in Artikeln automatisch zu entfernen.

/* for copying search result lists from mobile.de */

ul#searchResults, div.sorting + ul { /* div.sorting + ul probably does not work yet */
  font-size: 10px;
  list-style-type: none;
}

#searchResults li, li.clearfix {
  border-bottom: 1px solid #888;
  padding: 1em 0;
  margin: 0;
}

#searchResults li:hover, li.clearfix:hover {
  background: #eee;
}

#searchResults .preview, li.clearfix .preview {
  float: left;
  width: 90px;
  margin: 0 10px;
  display: inline;
  overflow: hidden;
}

#searchResults .preview img, li.clearfix .preview img {
  border: 1px solid #ccc;
}

#searchResults .facts, li.clearfix .facts {
  float: left;
  width: 475px;
  padding-right: 10px;
}

#searchResults h4, li.clearfix h4 {
  font-size: 1.25em !important;
  margin: 0 0 .2em 0 !important;
}

#searchResults h5.isItNew, li.clearfix h5.isItNew {
  margin-bottom: .2em;
  display: block;
  color: #666;
  font-size: 1em;
  font-weight: normal;
}

#searchResults .price, li.clearfix .price {
  color: #666;
  margin-top: .3em;
}

#searchResults .price a, li.clearfix .price a {
  font-size: 1.25em;
  font-weight: bold;
}

.clearfix:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}