Ebay Vorlage mit CSS und kleine Hindernisse, bin verzweifelt

!nstyledesign

Hallo Leute.

Ich bin echt am verzweifeln. Seit mehreren Wochen versuche ich nun eine brauchbare Vorlage für meine Auktionen zu gestalten. Bin Anfänger und habe schon einiges selbst rausgefrimelt aber es reicht dann doch nicht.

Ich habe mir eine Vorlage für eine Homepage gestalltet und sie wird auch richtig auf der Seite dargestellt. Nun habe ich wersucht, diese Vorlage als Vorlage für meine e-bay Auktionen zu nehmen aber es klappt einfach nicht.

So sieht es auf der Page aus und so sollte es auch bei ebay aussehen http://instyledesign.in.funpic.de/

leider sieht es bei ebay total anders aus.
http://cgi.ebay.de/ws/eBayISAPI.d…em=280250319612

Die Tabelle ist völlig links und der Hintergrund erstreckt sich über alles, über die gesamte Seite, ich will aber dass es nur als Hintergrund in der Artikelbeschreibung erscheint.

Desweiteren ist die Seite total breit...sie erstreckt sich bis ins Unendliche!

Habt Ihr irgendwelche Tipps für mich und könnt mir weiterhelfen? Bin für jede Hilfe bin sehr sehr dankbar.

Ich füge noch den Code ein mit der Hoffnung, dass es nur eine Kleinigkeit ist die leicht behoben werden kann.

Habe die CSS in die Html eingebunden, da es bei ebay glaub nicht anders geht?!?

Code

<FONT size=7>[b]Bitte nicht bieten, dies ist nur ein Test!!![/b]</FONT> 
<DIV class=style4 id=wrapper style="RIGHT: 89px; WIDTH: 1000px; HEIGHT: 1800px"> 
<DIV class=style3 id=container style="RIGHT: -1px; WIDTH: 985px; HEIGHT: 1784px"> 
<DIV class=title> 
<H1 class=style2>Willkommen bei</H1></DIV> 
<DIV class=header>[img]http://instyledesign.funpic.de/img/ZZ_C_043_035.jpg[/img]</DIV> 
<DIV class=navigation> 
<DIV class=clearer></DIV></DIV> 
<DIV class=main id=two-columns> 
<DIV class=col2> 
<DIV class=left> 
<DIV class=content>




































































































</DIV></DIV> 
<DIV class=right> 
<DIV class=content> 
<H2>Something</H2> 
<UL class=block> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']pellentesque[/url]</LI> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']sociis natoque[/url]</LI> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']semper[/url]</LI> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']convallis[/url]</LI>[/list] 
<H2>Another thing</H2> 
<UL class=block> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']consequat molestie[/url]</LI> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']sem justo[/url]</LI> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']semper[/url]</LI> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']sociis natoque[/url]</LI>[/list] 
<H2>Third and last</H2> 
<UL class=block> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']sociis natoque[/url]</LI> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']magna sed purus[/url]</LI> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']tincidunt[/url]</LI> 
<LI>[url='http://cgi5.ebay.de/ws/index.html']consequat molestie[/url]</LI>[/list] 
<H2>And some text</H2> 




Donec ligula lorem, varius eget, semper eget, aliquet quis, lectus. Vestibulum ipsum nunc, aliquet quis, blandit ac, varius a, est.</P></DIV></DIV> 
<DIV class=clearer></DIV></DIV> 
<DIV class=bottom> 
<DIV class=left> 
<H2>Previous entries</H2> 
<UL class=block> 
<LI>[url='']<SPAN>Sodales</SPAN>[i]Vestibulum ipsum nunc, aliquet quis[/i][/url]</LI> 
<LI>[url='']<SPAN>Varius eget</SPAN>[i]Donec ligula lorem, varius eget[/i][/url]</LI> 
<LI>[url='']<SPAN>Integer varius</SPAN>[i]Nam semper ornare ipsum[/i][/url]</LI> 
<LI>[url='']<SPAN>Vehicula</SPAN>[i]Cras sed purus non justo[/i][/url]</LI>[/list]</DIV> 
<DIV class=right> 
<H2>About</H2> 




Sed, luctus vitae, dolor. Nunc mauris eros, vehicula id, fermentum non, semper ac, nisl. Cras sed purus non justo lobortis rhoncus. Morbi consectetuer augue.</P> 
<H2>From the gallery</H2> 
<TABLE> 
<TBODY> 
<TR> 
<TD>[url='http://cgi5.ebay.de/Handel/3245-3616_3245_1.jpg'][img]http://cgi5.ebay.de/ws/img/thumb.gif[/img][/url]</TD> 
<TD style="WIDTH: 5px"></TD> 
<TD>[img]http://cgi5.ebay.de/ws/img/thumb.gif[/img]</TD> 
<TD style="WIDTH: 5px"></TD> 
<TD>[img]http://cgi5.ebay.de/ws/img/thumb.gif[/img]</TD></TR></TBODY></TABLE></DIV> 
<DIV class=clearer></DIV></DIV> 
<DIV class=footer> 
<DIV class=left>Copyright © 2008 [url='http://cgi5.ebay.de/ws/index.html']<SPAN class=style6>!nStyle &amp; Design</SPAN>[/url]</DIV> 
<DIV class=right>[url='http://templates.arcsin.se/']Website [/url]by <SPAN class=style6>[url='mailto:instyledesign@gmx.de']!nStyle &amp; Desig[/url]</SPAN>n </DIV> 
<DIV class=clearer></DIV></DIV></DIV></DIV></DIV><HEADER> 
<STYLE type=text/css> 
<!--{margin: 0; padding: 0;} 
body { 
background: #7C6F5C url(http://instyledesign.in.funpic.de/img/bg.jpg); 
color: #222; 
font: normal 62.5% sans-serif; 
padding: 0; 
} 
a {color: #642;} 
a:hover {color: #963;} 
big {font-size: 1.1em;} 
h1,h2,h3 {color: #442; padding: 8px 0 2px;} 
h1 {font: normal 2.4em serif,sans-serif;} 
h1 a {text-decoration: none;} 
h1 a:hover {text-decoration: underline;} 
h2 {font: normal 1.6em serif,sans-serif;} 
h3 {font: bold 1.2em serif,sans-serif;} 
blockquote { 
background: url('http://instyledesign.in.funpic.de/img/quote.gif') no-repeat; 
display: block; 
font: normal 1.1em Georgia,serif; 
padding-left: 26px 
} 
form,table {margin-bottom: 1.2em;} 
img {border: none;} 
label {display: block;} 
li {line-height: 1.5em;} 
p {padding: 2px 0 10px;} 
small,.small {font: normal 0.9em sans-serif;} 
ul {padding: 0 2em 1.2em;} 
/* structure */ 
#wrapper { 
background: #332 url(http://instyledesign.in.funpic.de/img/wrapper.gif) no-repeat left bottom; 
margin: 0 auto; 
width: 762px; 
} 
#container { 
background: #FBF9F4; 
border-top: 6px solid #332; 
font-size: 1.3em; 
line-height: 1.3em; 
margin: 0 auto; 
width: 750px; 
} 
/* header */ 
.title { 
background: #E2DED4 url(http://instyledesign.in.funpic.de/img/header-h1.jpg) repeat-x; 
border-top: 1px solid #996; 
} 
.title h1 { 
color: #441; 
font: normal 2.2em Georgia,"Trebuchet MS",sans-serif; 
padding: 10px 0 10px 18px; 
} 
.header { 
border-top: 2px solid #663; 
background: #DAD7C5 url(http://instyledesign.in.funpic.de/img/header.jpg) no-repeat left bottom; 
height: 220px; 
} 
/* navigation */ 
.navigation { 
background: #DED9D0 url(http://instyledesign.in.funpic.de/img/nav.gif) repeat-x; height: 41px; 
border-top: 1px solid #996; 
} 
.navigation a { 
background: #FFF url(http://instyledesign.in.funpic.de/img/nav.gif) repeat-x; 
border-right: 1px solid #C9C6B3; 
color: #553; 
float: left; 
font: bold 1em Tahoma,sans-serif; 
padding: 0 14px; 
line-height: 41px; 
text-align: center; 
text-decoration: none; 
} 
.navigation a:hover,.navigation a#active {background-position: left bottom; color: #331;} 
/* main */ 
.main#two-columns {background: #FFF url(http://instyledesign.in.funpic.de/img/two-columns.gif) repeat-y;} 
/* bottom */ 
.bottom { 
background: #DCDAC9 url(http://instyledesign.in.funpic.de/img/bottom.gif) no-repeat left bottom; 
border-top: 1px solid #AA8; 
color: #444; 
padding: 14px 20px; 
} 
.bottom .left,.bottom .right {width: 49%;} 
/* footer */ 
.footer { 
background: #332; 
color: #EED; 
padding: 10px; 
} 
.footer .left {width: 66%;} 
.footer .right { 
width: 33%; 
text-align: right; 
} 
.footer a { 
color: #FFF; 
text-decoration: none; 
} 
.footer a:hover { 
color: #FFF; 
text-decoration: underline; 
} 
/* gallery */ 
.gallery td { 
vertical-align: top; 
text-align: center; 
} 
.gallery em {display: block;} 
/* misc */ 
.clear,.clearer {clear: both;} 
.clearer {font-size: 0;} 
.col2 .left {width: 64%;} 
.col2 .right .content {background: #FFF;} 
.col2 .right {width: 33%;} 
.content {padding: 18px 20px;} 
.left {float: left;} 
.right {float: right;} 
.right .content {padding: 18px 12px 12px;} 
/* block list */ 
ul.block { 
border-top: 1px dashed #BCBAAC; 
margin: 4px 0; 
padding: 0; 
width: 90%; 
} 
.block li { 
border-bottom: 1px dashed #BCBAAC; 
list-style: none; 
} 
.block li a,.block li em { 
color: #553; 
display: block; 
} 
.block li em { 
font-size: 0.9em; 
font-style: normal; 
} 
.block li a { 
padding: 4px 3%; 
text-decoration: none; 
width: 94%; 
} 
.block li a span {font-weight: bold;} 
.block li a:hover { 
background: #D2D0C0; 
color: #553; 
} 
.right .block,.right .block li {border-color: #DCDACC;} 
.right .block li a:hover {background: #F2F0EA;} 
--> 
</STYLE> 
</HEADER>

Alles anzeigen

[/code]

kann mir wirklich keiner helfen??!??

pinales

Tach!

Deine Frage ist scheinbar auf den ersten Blick nicht zu beantworten. Das liegt wohl daran, dass Dein Code nicht grad als Einzeiler daherkommt. Ich selbst kenn micht mit EBAY nicht aus, weiß also nicht, an welche Vorgaben Du Deine Seite anpassen musst. Auf welche Weise hast Du denn die Seite in EBAY "eingebaut"? Hast Du dort (wo auch immer) den vollständigen Inhalt Deines HTML-Dokuments eingebunden?

Abend,

also ich bin mir sehr sicher, dass das Problem am css liegt. Kenne mich leider zu wenig aus um festzustellen was da nicht stimmt. Der CSS Teil ist am Schluss eingebunden.

Und nein ich habe nicht alles reingesetzt...nur das was zwischen body und body stand + den Teil des CSS.

pinales

Tach!

Was mir grundsätzlich im Quelltext der EBAY-Seite auffällt ist, dass EBAY ja auch selbst einen ganzen Eimer CSS-Definitionen mitbringt! Ich könnte mir gut vorstellen, dass sich einige Definitionen überschneiden und ersetzen. Ich hab nun leider nicht die Zeit, alle Klassen und IDs zu vergleichen. Daher würde ich mich an Deiner Stelle vortasten; würde die Seite zunächst ohne CSS einbinden. Mit /* */ kommentierst Du alle CSS-Definitionen aus:

Code

/*.klasse1 {
width : 123px;
}


#id2 {
width : 234px;
}*/


#id3 {
width : 567px;
}

Alles anzeigen

(In diesem Beispiel sind die ersten beiden Klassen/IDs auskommentiert und unwirksam.)

So kannst Du erstmal feststellen, ob die Einbindung grundsätzlich (wenn auch ohne Layout-Einstellungen) funktioniert. Dann würde ich Klasse für Klasse oder ID für ID wieder einbinden (aus dem Kommentarbereich entnehmen). Dadurch solltest Du gut nachvollziehen können, ob, und wenn ja, welche Definitionen kollidieren.

pinales

Zitat von !nstyledesign

<FONT size=7>Bitte nicht bieten, dies ist nur ein Test!!!</FONT>
<DIV class=style4 id=wrapper style="RIGHT: 89px; WIDTH: 1000px; HEIGHT: 1800px">
<DIV class=style3 id=container style="RIGHT: -1px; WIDTH: 985px; HEIGHT: 1784px">
<DIV class=title>
<H1 class=style2>Willkommen bei</H1></DIV>
<DIV class=header>[Blockierte Grafik: http://instyledesign.funpic.de/img/ZZ_C_043_035.jpg]</DIV>
<DIV class=navigation>
<DIV class=clearer></DIV></DIV>
<DIV class=main id=two-columns>
<DIV class=col2>
<DIV class=left>
<DIV class=content>

</DIV></DIV>
<DIV class=right>
<DIV class=content>
<H2>Something</H2>
<UL class=block>
<LI>pellentesque</LI>
<LI>sociis natoque</LI>
<LI>semper</LI>
<LI>convallis</LI>[/list]
<H2>Another thing</H2>
<UL class=block>
<LI>consequat molestie</LI>
<LI>sem justo</LI>
<LI>semper</LI>
<LI>sociis natoque</LI>[/list]
<H2>Third and last</H2>
<UL class=block>
<LI>sociis natoque</LI>
<LI>magna sed purus</LI>
<LI>tincidunt</LI>
<LI>consequat molestie</LI>[/list]
<H2>And some text</H2>

Donec ligula lorem, varius eget, semper eget, aliquet quis, lectus. Vestibulum ipsum nunc, aliquet quis, blandit ac, varius a, est.</P></DIV></DIV>
<DIV class=clearer></DIV></DIV>
<DIV class=bottom>
<DIV class=left>
<H2>Previous entries</H2>
<UL class=block>
<LI>[url='']<SPAN>Sodales</SPAN>Vestibulum ipsum nunc, aliquet quis[/url]</LI>
<LI>[url='']<SPAN>Varius eget</SPAN>Donec ligula lorem, varius eget[/url]</LI>
<LI>[url='']<SPAN>Integer varius</SPAN>Nam semper ornare ipsum[/url]</LI>
<LI>[url='']<SPAN>Vehicula</SPAN>Cras sed purus non justo[/url]</LI>[/list]</DIV>
<DIV class=right>
<H2>About</H2>

Sed, luctus vitae, dolor. Nunc mauris eros, vehicula id, fermentum non, semper ac, nisl. Cras sed purus non justo lobortis rhoncus. Morbi consectetuer augue.</P>
<H2>From the gallery</H2>
<TABLE>
<TBODY>
<TR>
<TD>[Blockierte Grafik: http://cgi5.ebay.de/ws/img/thumb.gif]</TD>
<TD style="WIDTH: 5px"></TD>
<TD>[Blockierte Grafik: http://cgi5.ebay.de/ws/img/thumb.gif]</TD>
<TD style="WIDTH: 5px"></TD>
<TD>[Blockierte Grafik: http://cgi5.ebay.de/ws/img/thumb.gif]</TD></TR></TBODY></TABLE></DIV>
<DIV class=clearer></DIV></DIV>
<DIV class=footer>
<DIV class=left>Copyright © 2008 <SPAN class=style6>!nStyle & Design</SPAN></DIV>
<DIV class=right>Website by <SPAN class=style6>[email='>> Edit by Admin :Das Posten von Email-Adressen ist hier nicht gestattet <<<gmx.de']!nStyle & Desig[/email]</SPAN>n </DIV>
<DIV class=clearer></DIV></DIV></DIV></DIV></DIV><HEADER>
<STYLE type=text/css>

</STYLE>
</HEADER>

Alles anzeigen

Ich hab mal fett gekennzeichnet, was ich für problematisch halte. Du vergibst absolute Größen, was mit der Einbettung in die Google-Seite zu Layout-Umbrüchen führen kann. Auch die Prozent-Angaben beziehen sich ja nicht auf den (noch) verfügbaren Platz, sondern auf die komplette Ausgabegröße (Bildschirm). Wenn die zu knapp bemessen sind, kann auch dies dazu führen, dass das Layout für den verfügbaren Platz zu groß ist.

Hallo Pinales,

herzlichen Dank dafür, dass du dir die Zeit genommen hast und einen Blick auf das Ganze geworfen hast. Ich werde mich wie du geschrieben hast Schritt für Schritt an das Problem herantasten. Das mit den absoluten Größen war ich nicht...ich hab doch keine Ahnung von der ganzen Materie, Schuld ist die Vorlage die ich verwendet habe

Bin mal gespannt ob ich es nun endlich schaffe das Ding zum laufen zu bringen.

Gruß

!nstyledesign

Tags