Java Nokia APM Video Webcam OpenOffice T23 Druck MMS KDE LyX Gericom IBM Bash Thinkpad Bibus X11 Netzwerk Musik MP3 Windows PDE Eclipse Grafik PHP Backup Telefonie Debian PDF Linux

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

May 8th, 2008 by matthias

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:

  1.  
  2. <ul id="searchResults">
  3.         <li class="clearfix">
  4. <div class="preview">
  5.     <!– preview image –>
  6.     <a rel="nofollow" href="[...]"><img src="[...]" alt="Fahrzeugbild" /></a>
  7.     <!– link "Details" –>
  8.     <a href="[...]">Details</a></div>
  9. <div class="facts">
  10.     <!– article title –>
  11. <h4><a rel="nofollow" href="[...]">Artikel-Titel</a></h4>
  12. <!– "Neufahrzeug" or "Gebrauchtfahrzeug" –>
  13. <h5 class="isItNew">Gebrauchtfahrzeug</h5>
  14. <!– categories –>
  15. <div>Agrarfahrzeuge, Schlepper</div>
  16. <!– price –>
  17. <div class="price"><a rel="nofollow" href="[...]">599 EUR</a></div>
  18. </div></li>
  19. </ul>
  20.  

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.

  1. /* for copying search result lists from mobile.de */
  2.  
  3. ul#searchResults, div.sorting + ul { /* div.sorting + ul probably does not work yet */
  4.   font-size: 10px;
  5.   list-style-type: none;
  6. }
  7.  
  8. #searchResults li, li.clearfix {
  9.   border-bottom: 1px solid #888;
  10.   padding: 1em 0;
  11.   margin: 0;
  12. }
  13.  
  14. #searchResults li:hover, li.clearfix:hover {
  15.   background: #eee;
  16. }
  17.  
  18. #searchResults .preview, li.clearfix .preview {
  19.   float: left;
  20.   width: 90px;
  21.   margin: 0 10px;
  22.   display: inline;
  23.   overflow: hidden;
  24. }
  25.  
  26. #searchResults .preview img, li.clearfix .preview img {
  27.   border: 1px solid #ccc;
  28. }
  29.  
  30. #searchResults .facts, li.clearfix .facts {
  31.   float: left;
  32.   width: 475px;
  33.   padding-right: 10px;
  34. }
  35.  
  36. #searchResults h4, li.clearfix h4 {
  37.   font-size: 1.25em !important;
  38.   margin: 0 0 .2em 0 !important;
  39. }
  40.  
  41. #searchResults h5.isItNew, li.clearfix h5.isItNew {
  42.   margin-bottom: .2em;
  43.   display: block;
  44.   color: #666;
  45.   font-size: 1em;
  46.   font-weight: normal;
  47. }
  48.  
  49. #searchResults .price, li.clearfix .price {
  50.   color: #666;
  51.   margin-top: .3em;
  52. }
  53.  
  54. #searchResults .price a, li.clearfix .price a {
  55.   font-size: 1.25em;
  56.   font-weight: bold;
  57. }
  58.  
  59. .clearfix:after {
  60.   content:".";
  61.   display:block;
  62.   height:0;
  63.   clear:both;
  64.   visibility:hidden;
  65. }

Posted in mobile.de | No Comments »