[html & CSS] Professionelles Layout für eBay

danny06 · 21. November 2006

Hallo zusammen,

ich benötige ein professionelles Layout für meine Angebotsbeschreibungen in eBay. ich habe mir ein Template ausgesucht und individuell für umgeschrieben, so wie es mir gefällt, nun versuche ich es für eBay kompatibel zu machen und dabei hab ich Probleme:

Die Sylesheets befanden sich wie normal im <head>-Bereich des Templates, da dies ja in eBay nicht funktioniert mit dem <head>-Bereich (wären ja dann 2 :-)) habe ich sie aus den ordner geholt und einzeln unter den <head>-Bereich geschrieben. Im Editor funktioniert das wunderbar, aber in eBay nicht, da werden die Stylesheets nicht berücksichtigt.

Genau so schaut der Code aus, den ich in eBay eingefügt habe:

Code:

<link rel="stylesheet" type="text/css"
 href="styles.css">
<style type="text/css">
body
{ background: #FFFFFF url(http://www.diaetberater.com/style/back_2.png) repeat-x;
color: #3E4244;
}
blockquote
{ background-color: #F1F4F5;
color: #3E4244;
border-color: #D4DBDE;
}
#links, #links a
{ background-color: transparent;
color: #3E4244;
}
#links a:hover
{ background-color: transparent;
color: #FFFFFF;
}
#logo
{ background: #8D9299 url(http://www.diaetberater.com/style/logo_2.jpg) no-repeat;
color: #3E4244;
border-color: #FFFFFF;
}
#logo h1
{ background-color: transparent;
color: #FFFFFF;
} #content, #column1, #column2
{ background-color: #FFFFFF;
color: #3E4244;
} #column2 h1
{ background: transparent;
color: #3E4244;
border-color: #F1F4F5;
}
#menu, #addlinks, .sidebaritem
{ background: #FFFFFF url(http://www.diaetberater.com/style/box_2.png) repeat-x;
color: #3E4244;
}
#menu li a, #addlinks li a
{ background-color: transparent;
color: #3E4244;
border-color: #FFFFFF;
} #menu li a:hover, #menu li a#selected, #addlinks li a:hover
{ background-color: #8D9299; color: #FFFFFF;
border-color: #FFFFFF;
} .sidebaritem a, #column2 a
{ background-color: transparent;
color: #2780F9;
}
.sidebaritem a:hover, #column2 a:hover
{ background-color: #F1F4F5;
color: #3E4244;
}
#footer, #footer a
{ background-color: #8D9299;
color: #3E4244;
}
#footer a:hover
{ background: #8D9299;
color: #FFFFFF;
}
input, textarea
{ background-color: #FFFFFF;
color: #3E4244;
border-color: #616D7B;
}
body
{ font-family: verdana, arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .74em;
}
p
{ margin: 0px;
padding: 0px 0px 24px 0px;
line-height: 20px;
}
h1
{ margin: 0px;
font-family: verdana, tahoma, arial, sans-serif;
font-size: 176%; font-weight: normal;
}
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
text-decoration: underline;
font-weight: normal;
}
img{border: 0px;}
/* image positioning - left, right and center */
.left
{ float: left; padding: 0px 8px 0px 0px;
}
.right
{ float: right; padding: 0px 0px 0px 8px;
}
.center
{ display: block;
text-align: center;
margin: 0 auto;
}
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px; padding: 10px 20px 0px 20px;
border-top: 1px solid;
border-bottom: 1px solid;
}
/* unordered list */
ul
{ margin: 8px 0px 0px 14px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px; padding: 0px;
}
/* main container */
#main
{ width: 761px;
margin-left: auto; margin-right: auto;
}
/* links above the logo */
#links
{ padding: 9px 0px 3px 19px;
width: 742px;
text-align: right;
height: 22px;
}
#links a, #links a:hover{text-decoration: none;}
/* logo */
#logo
{ padding: 0px;
width: 759px;
height: 100px;
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
}
#logo h1
{ padding: 38px 0px 0px 19px;
font-family: verdana, arial, sans-serif;
font-size: 150%;
font-weight: normal;
letter-spacing: .3em;
}
/* main content */
#content
{ width: 761px;
height: auto;
padding: 0px;
text-align: justify;
overflow: hidden;
} /* column 1 - contains menu, news, add links and other info */
#column1
{ width: 243px;
float: left;
padding: 15px 0px 15px 14px;
}
#column1 h1{padding: 0px 0px 18px 0px;}
#menu, #addlinks
{ position: relative;
width: 216px;
float: left;
margin: 0px 0px 15px 0px;
padding: 8px 0px 0px 0px;
height: 184px;
}
#menu ul, #addlinks ul
{ margin: 0px auto; padding: 0px; list-style: none; text-align: left; width: 216px;
} #menu li, #addlinks li { margin: 0px; list-style: none; float: left; } #menu li a, #addlinks li a { float: left; height: 14px;
text-decoration: none; padding: 3px 10px 4px 12px;
width: 194px;
border-bottom: 1px solid;
} #menu h1, #addlinks h1{padding: 0px 0px 14px 12px;}
.sidebaritem
{ position: relative;
text-align: justify;
margin: 0px 0px 15px 0px;
padding: 8px 14px 11px 12px;
width: 190px;
float: left;
height: 244px;
min-height: 244px;
}
.sidebaritem[id]{height: auto;}
/* column 2 - page content */
#column2
{ text-align: justify;
padding: 0px 22px 15px 0px;
width: 482px;
float: right;
}
#column2 h1
{ padding: 0px 0px 6px 0px; margin: 24px 0px 12px 0px; border-bottom: 2px solid;
}
.sidebaritem a, #column2 a, .sidebaritem a:hover, #column2 a:hover
{ padding: 0px;
text-decoration: none;
}
/* footer */
#footer
{ float: left;
padding: 9px 0px 3px 0px;
width: 761px;
text-align: center;
height: 22px;
}
#footer a, #footer a:hover{text-decoration: none;}
/* contact page - form layout */
form{margin-top: 0px;}
div.row
{ clear: both;
width: 448px;
height: 29px;
}
div.row span.formlabel { float: left;
width: 150px;
text-align: left;
}
div.row span.forminput
{ float: right;
text-align: right;
} div.spacer
{ clear: both;
width: 80px;
height: 22px;
}
input, textarea
{ width: 259px; font-family: verdana, arial, sans-serif;
font-size: 100%;
border: 1px solid;
}
.submit
{ font-family: verdana, arial, sans-serif;
font-size: 100%; border: 1px solid;
width: 70px;
height: 22px;
cursor: pointer;
}
</style>
<div id="main">
<div id="links"><!-- **** INSERT LINKS HERE **** -->&nbsp;
</div>
<div id="logo">
<h1>template heading goes here</h1>
</div>
<div id="content">
<div id="column1">
<div id="menu"><small> </small>
<h1 style="font-weight: bold;"><small><small>Ihre
Vorteile bei uns<br>
<small style="font-weight: normal;">-keine Versandkosten
bei &nbsp; &nbsp; &nbsp;Handyvertr&auml;gen<br>
-eBay &uuml;bernehmen wir<br>
-schnelle und unkomplizierte &nbsp;Abwicklung<br>
</small></small></small></h1>
<h1 style="font-weight: bold;"><br>
</h1>
<h1 style="font-weight: bold;"><br>
</h1>
<br>
<ol>
  <li></li>
</ol>
<br>
<br>
<ol>
  <li></li>
</ol>
<br>
<h1 style="font-weight: bold;"></h1>
<h1 style="font-weight: bold;"><!-- **** INSERT NEWS ITEMS HERE **** --></h1>
</div>
<div id="addlinks">
<h1><br>
</h1>
<!-- **** INSERT ADDITIONAL LINKS HERE **** --> </div>
<div class="sidebaritem">
</div>
<div class="sidebaritem">
</div>
<div class="sidebaritem">
</div>
<div class="sidebaritem">
</div>
<div class="sidebaritem">
</div>
<div class="sidebaritem">
</div>
<div class="sidebaritem">
</div>
<div class="sidebaritem">
</div>
<div class="sidebaritem">
</div>
<div class="sidebaritem">
</div>
</div>
<div id="column2">
<h1>Beschreibung</h1>
<!-- **** INSERT PAGE CONTENT HERE **** -->
<ul>
  <li>
    <div align="left"><font color="#ff0010"
 face="Verdana" size="2">keine Grundgeb&uuml;hr</font></div>
  </li>
  <li>
    <div align="left"><font color="#ff0010"
 face="Verdana" size="2">keine Anschlusskosten</font></div>
  </li>
  <li>
    <div align="left"><font color="#ff0010"
 face="Verdana" size="2">telefonieren schon ab 0,19
&euro;&nbsp;pro Minute</font></div>
  </li>
  <li>
    <div align="left"><font color="#ff0010"
 face="Verdana" size="2">SMS-Versand schon ab 0,15
&euro;</font></div>
  </li>
  <li>
    <div align="left"><font color="#ff0010"
 face="Verdana" size="2">bis zu 100 Freiminuten*</font></div>
  </li>
  <li>
    <div align="left"><font color="#ff0010"
 face="Verdana" size="2">bis zu 126 Inklusiv-SMS*</font></div>
  </li>
  <li>
    <div align="left">
    <p align="left"><font size="2"><font
 size="2"><font color="#ff0010" face="Verdana">mit
Jamba-Option (Wallpaper, Klingelt&ouml;ne usw. im Gegenwert von bis
zu 40&euro;)</font></font></font></p>
    </div>
  </li>
</ul>
<p align="left"><font face="Verdana" size="1">*&nbsp;bei
voller Nutzung des Mindestumsatzes</font></p>
<p align="center"><font face="Verdana" size="2">Wir
versteigern hier das formsch&ouml;ne und anspruchsvolle Samsung
SGH-E900 in Verbindung mit dem g&uuml;nstigen ThePhoneHouse Tarif
"Discount Home" mit dem Netz T-D1. Sie m&uuml;ssen den
Auktionsbetrag
nicht bezahlen! Nein, Sie erhalten sogar <span
 style="font-weight: bold; color: rgb(255, 0, 0);">10&euro;</span>
von uns auf Ihr
Konto &uuml;berweisen*.</font></p>
<h1>Das Handy</h1>
<span class="Artikel"><font face="Verdana"><font
 size="2">Elegantes Design mit modernster Technologie<br>
Das SGH-E900 pr&auml;sentiert sich in einer perfekten Symbiose aus
stilvoller und eleganter Schlichtheit sowie erstklassiger Ausstattung.
Im flachen Slider-Design des SGH-E900 stecken alle Funktionen, die
anspruchsvolle Anwender zu sch&auml;tzen wissen: eine 2,0
Megapixel-Kamera, MP3-Player, MicroSD-Steckplatz, TV-Ausgang und
Bluetooth&reg; mit Stereo-Audio-Streaming f&uuml;r
anspruchsvollsten Multimediagenuss.</font><br>
<br>
<font size="2">Technische Angaben: <br>
- Ma&szlig;e: (HxBxT) 93x45x16.5 mm <br>
- Gewicht: 93 g<br>
- Standby-Zeit: (max) 300 h<br>
- Sprechzeit: (max) 3 h<br>
- Netz: Tri-band, GSM 900/1800/1900<br>
- Kamera: 2 Mpix<br>
- Bluetooth: ja</font></font></span>
<br>
<br>
<br>
<center><img
 src="http://www.diaetberater.com/images/sgh-e900.jpg"></center>
<br>
<h1>Der Tarif</h1>
<br>
<p align="center"><span class="Artikel"><font
 face="Verdana" size="2">ThePhoneHouse Discount Plus
T-D1</font></span></p>
<p align="center"><span class="Artikel"><font
 face="Verdana" size="2">Telefonieren Sie ab
superg&uuml;nstigen 19 Cent und verschicken Sie SMS ab 15 Cent.<br>
</font></span></p>
<p align="center"><span class="Artikel">
<table border="1" width="510">
  <tbody>
    <tr>
      <td width="355">
      <p class="standard"><b><font face="Verdana"
 size="2">Grundgeb&uuml;hr/Paketpreis D1 Discount Plus</font></b></p>
      </td>
      <td colspan="2" width="139">
      <p class="standard" align="center"><b><font
 face="Verdana" size="2">0,00 &euro;</font></b></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p class="standard"><b><font face="Verdana"
 size="2">Anschlusspreis</font></b></p>
      </td>
      <td colspan="2" width="139">
      <p align="center"><b><font face="Verdana"
 size="2">0,00 &euro;</font></b></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p class="standard"><font face="Verdana"><font
 size="2"><b>Monatliche Mindestnutzung</b> (gilt
f&uuml;r nationale Festnetz- und Mobilfunk-Gespr&auml;che sowie
SMS und MMS (keine Sondernummern)</font></font></p>
      </td>
      <td colspan="2" width="139">
      <p class="standard" align="center"><b><font
 face="Verdana" size="2">19,00 &euro;</font></b></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p><font face="Verdana" size="2">max.
Anzahl monatl. Inklusiv-Minuten (bei voller Nutzung des monatlichen
Mindestumsatzes)</font></p>
      </td>
      <td colspan="2" width="139">
      <p class="standard" align="center"><font
 face="Verdana" size="2">39/100 Min.</font></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p><font face="Verdana" size="2">max.
Anzahl monatlicher Inklusiv-SMS (bei voller Nutzung des monatlichen
Mindestumsatzes)</font></p>
      </td>
      <td colspan="2" width="139">
      <p align="center"><font face="Verdana"
 size="2">95/126 Min.</font></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p><font face="Verdana" size="2">Jamba-Option</font></p>
      </td>
      <td colspan="2" width="139">
      <p align="center"><b><font face="Verdana"
 size="2">1 &euro;</font></b></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p><font face="Verdana" size="2">Minutenpreis
ins nationale Festnetz </font></p>
      </td>
      <td width="68">
      <p align="center"><span
 style="background-color: rgb(255, 204, 0);"><font
 face="Verdana" size="2">0,49 &euro;</font></span></p>
      </td>
      <td width="65">
      <p align="center"><span
 style="background-color: rgb(51, 204, 255);"><font
 face="Verdana" size="2">0,19 &euro;</font></span></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p><font face="Verdana" size="2">Minutenpreis
netzintern</font></p>
      </td>
      <td width="68">
      <p align="center"><span
 style="background-color: rgb(255, 204, 0);"><font
 face="Verdana" size="2">0,49 &euro;</font></span></p>
      </td>
      <td width="65">
      <p align="center"><span
 style="background-color: rgb(51, 204, 255);"><font
 face="Verdana" size="2">0,19 &euro;</font></span></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p><font face="Verdana" size="2">Min.-Preis
in andere nationale Mobilfunknetze</font></p>
      </td>
      <td width="68">
      <p align="center"><span
 style="background-color: rgb(255, 204, 0);"><font
 face="Verdana" size="2">0,69 &euro;</font></span></p>
      </td>
      <td width="65">
      <p align="center"><span
 style="background-color: rgb(51, 204, 255);"><font
 face="Verdana" size="2">0,39 &euro;</font></span></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p><font face="Verdana" size="2">Abfrage
der Mailbox</font></p>
      </td>
      <td width="68">
      <p align="center"><span
 style="background-color: rgb(255, 204, 0);"><font
 face="Verdana" size="2">0,49 &euro;</font></span></p>
      </td>
      <td width="65">
      <p align="center"><span
 style="background-color: rgb(51, 204, 255);"><font
 face="Verdana" size="2">0,19 &euro;</font></span></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p><font face="Verdana" size="2">Taktung/1.
Einheit abweichend</font></p>
      </td>
      <td colspan="2" width="139">
      <p align="center"><font face="Verdana"
 size="2">10 Sek./60 Sek.</font></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p><font face="Verdana" size="2">SMS-Versand
in nationale Mobilfunknetze</font></p>
      </td>
      <td width="68">
      <p align="center"><span
 style="background-color: rgb(255, 204, 0);"><font
 face="Verdana" size="2">0,20 &euro;</font></span></p>
      </td>
      <td width="65">
      <p align="center"><span
 style="background-color: rgb(51, 204, 255);"><font
 face="Verdana" size="2">0,15 &euro;</font></span></p>
      </td>
    </tr>
    <tr>
      <td width="355">
      <p><font face="Verdana" size="2">MMS-Versand
in nationale Mobilfunknetze</font></p>
      </td>
      <td colspan="2" width="139">
      <p align="center"><font face="Verdana"
 size="2">0,35&euro;</font></p>
      </td>
    </tr>
  </tbody>
</table>
</span></p>
<p align="center"><font face="Verdana"><br>
</font><font face="Verdana"><span
 style="background-color: rgb(255, 204, 0);"><font size="2">Hauptzeit:
D1 Discount Plus Mo-So 6.00-20.00 Uhr</font></span><font
 size="2"> &nbsp;&nbsp;&nbsp;&nbsp;</font><span
 style="background-color: rgb(51, 204, 255);"><font
 size="2">Nebenzeit: jeweils &uuml;brige Zeit</font></span></font></p>
<p class="standard" align="center"><font
 face="Verdana" size="2">Vertragslaufzeit: 24 Monate</font></p>
<h1>Der Ablauf</h1>
<font face="Verdana" size="2">Nach gewonnener
Auktion (den Auktionsbetrag m&uuml;ssen Sie nicht bezahlen) nehmen
wir bequem Ihre Daten &uuml;ber ein Online-Formular auf. Danach
senden wir Ihnen den Vertrag zu, nach dem Ausf&uuml;llen senden Sie
uns die erforderlichen Unterlagen zur&uuml;ck und schon erhalten
Sie Ihr neues Handy.<br>
<br>
<br>
</font>
<h1>Die Voraussetzungen</h1>
<font face="Verdana" size="2">Um bei uns einen
Mobilfunkvertrag abzuschliessen, m&uuml;ssen Sie folgende
Voraussetzungen erf&uuml;llen:<br>
<br>
</font>
<ul>
  <li>Sie m&uuml;ssen 18 oder &auml;lter sein</li>
  <li>Sie m&uuml;ssen einen Wohnsitz und ein Bankkonto in
Deutschland haben</li>
  <li><font face="Verdana" size="2">Sie
d&uuml;rfen keine negative Bonit&auml;t haben (keine negativen
&nbsp; &nbsp; &nbsp; </font><br>
    <font face="Verdana" size="2">Schufaeintr&auml;ge
etc.) </font><br>
  </li>
</ul>
<p style="text-align: left;" class="standard">Bitte
beachten Sie:</p>
<p style="text-align: left;" class="standard">Sollten
Sie eine oder mehrere der oben genannten Voraussetzungen nicht
erf&uuml;llen, f&uuml;hrt dies in jedem Fall zu einer Ablehnung!</p>
<blockquote>
  <p><font color="#000000">Die angegebenen Preise
sind nur g&uuml;ltig in Verbindung mit einem Mobilfunkvertrag.
Durch den Mobilfunkvertrag entstehen weitere
verbrauchsabh&auml;ngige Kosten lt. Tarifinformationen. Lieferungen
von bestellten Mobilfunkpaketen erfolgen generell versandkostenfrei.
Alle Preise verstehen sich Brutto inklusive gesetzlich
g&uuml;ltiger Mehrwertsteuer. Bei Mobilfunkpaketen mit
Auszahlungsbetr&auml;gen (Negativ-Preise) versteht sich der
Auszahlungsbetrag Netto ohne gesetzlich g&uuml;ltige
Mehrwertsteuer. <span style="color: rgb(255, 0, 0);">Sie
erhalten also den angegebenen Auszahlungsbetrag in voller H&ouml;he
und in einer Summe ausgezahlt!</span> Die Auszahlung erfolgt ca.
am 01. des Folgemonats nach Kartenaktivierung direkt auf Ihr im
Mobilfunkantrag angegebenes Konto.</font></p>
</blockquote>
<span style="font-weight: bold;">F&uuml;r Fragen
stehen wir Ihnen selbstverst&auml;ndlich zur
Verf&uuml;gung.Bbenutzen Sie dazu einfach die eBay-Funktion
"Kontakt mit dem Verk&auml;ufer aufnehmen"</span><br
 style="font-weight: bold;">
<span style="font-weight: bold;">Wir antworten so schnell
als m&ouml;glich.</span><br>
<br>
<br>
</div>
</div>
<div id="footer"><br>
</div>
</div>

Ich bin keiner, der seine Codes hier reinstellt und sagt: "macht mal". Ich will das Problem selbst lösen, nur benötige ich dafür Hilfe, da ich noch Anfänger bin!

Danke schonmal.

Gruß Danny

sourcefreak · 21. November 2006

Vielleicht liegt es ja an:

href="styles.css">

Er sucht nach der "styles.css" die er ja auf eBay nicht finden kann und den Rest dann nicht berücksichtigt.

danny06 · 21. November 2006

Ja, da hast du recht. Ich weiß auch nicht was ich mir dabei gedacht habe! Ich habe diesen Teil entfernt, aber es funktioniert immernoch nicht. Was muss ich machen, dass es klappt? Wenn es so nicht funktioniert, muss ich ja jeden <tag> einzeln formatieren!

Suche

[html & CSS] Professionelles Layout für eBay

danny06

Cadet 4th Year

sourcefreak

Captain

danny06

Cadet 4th Year

Ähnliche Themen