Hallo Zusammen,
ich habe mir heute in mühevoller Arbeit eine neue Auktionsvorlage erstellt. Das hat soweit auch alles ganz gut geklappt, der Upload der Vorlage hat funktioniert ohne Fehler und nach der Synchronisation war die Vorlage auch wie gewünscht in der Designauswahl zu finden. Klasse, dachte ich, gleich mal die Vorlage einem Artikel zugewiesen und in der Vorschau betrachtet. Sah alles gut aus, kein Fehler zu erkennen und ich war zufrieden mit meiner Arbeit!
Also habe ich das Ganze als Auktion an Ebay übermittelt, um zu sehen, ob da auch alles passt. Naja, und dann kam es wie es kommen musste, bei Ebay sah das wieder ganz anders aus. Nein, nicht das das Template irgendwie zerschossen gewesen wäre, das sah genauso aus wie in der Vorschau, alles an der richtigen Stelle, bis auf ein paar Umlaute, die nicht richtig erkannt worden sind.
ABER:
Das Template saß nicht dort, wo es hätte sitzen müssen. Es war wie ein Overlay über der kompletten Ebay Verkaufsmaske gelegen. Im Grunde hätte kein Kunde eine Chance gehabt etwas zu bestellen, da mein Template direkt von Top begann.
Ich dachte, die Auktionsvorlagen sind in ein Iframe eingebunden, ist dem etwa nicht so?
Also irgendwie weiss ich jetzt nicht wo der Fehler liegt, hoffe jemand von euch hat einen Lösungsansatz.
Ich geb mal den CSS-Code dazu:
Vielleicht kann ja jemand etwas damit anfangen und mir helfen, würde mich riesig freuen, wenn sich das Problem dadurch lösen würde!
Gruß
Michael
ich habe mir heute in mühevoller Arbeit eine neue Auktionsvorlage erstellt. Das hat soweit auch alles ganz gut geklappt, der Upload der Vorlage hat funktioniert ohne Fehler und nach der Synchronisation war die Vorlage auch wie gewünscht in der Designauswahl zu finden. Klasse, dachte ich, gleich mal die Vorlage einem Artikel zugewiesen und in der Vorschau betrachtet. Sah alles gut aus, kein Fehler zu erkennen und ich war zufrieden mit meiner Arbeit!
Also habe ich das Ganze als Auktion an Ebay übermittelt, um zu sehen, ob da auch alles passt. Naja, und dann kam es wie es kommen musste, bei Ebay sah das wieder ganz anders aus. Nein, nicht das das Template irgendwie zerschossen gewesen wäre, das sah genauso aus wie in der Vorschau, alles an der richtigen Stelle, bis auf ein paar Umlaute, die nicht richtig erkannt worden sind.
ABER:
Das Template saß nicht dort, wo es hätte sitzen müssen. Es war wie ein Overlay über der kompletten Ebay Verkaufsmaske gelegen. Im Grunde hätte kein Kunde eine Chance gehabt etwas zu bestellen, da mein Template direkt von Top begann.
Ich dachte, die Auktionsvorlagen sind in ein Iframe eingebunden, ist dem etwa nicht so?
Also irgendwie weiss ich jetzt nicht wo der Fehler liegt, hoffe jemand von euch hat einen Lösungsansatz.
Ich geb mal den CSS-Code dazu:
Code:
body
{
margin: 0 auto;
padding: 0;
background-color: #A3A3A3;
}
.Main
{
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.PageBackgroundGlare
{
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.PageBackgroundGlareImage
{
background-image: url('gfx/Page-BgGlare.png');
background-repeat: no-repeat;
height: 441px;
width: 362px;
margin: 0;
}
html:first-child .PageBackgroundGlare
{
border: 1px solid transparent; /* Opera fix */
}
.PageBackgroundSimpleGradient
{
background-image: url('gfx/Page-BgSimpleGradient.jpg');
background-repeat: repeat-x;
height: 1px;
}
.cleared
{
float: none;
clear: both;
margin: 0;
padding: 0;
border: none;
font-size:1px;
}
/* end Page */
/* begin Box, Sheet */
.Sheet
{
overflow: hidden;
min-width:73px;
min-height:73px;
margin: 0 auto;
position: relative;
z-index: 0;
width: 900px;
}
.Sheet-body
{
position: relative;
z-index: 0;
margin: 10px;
}
.Sheet-tl
{
position: absolute;
overflow: hidden;
z-index: -1;
top: 0;
left: 0;
width: 50px;
height: 50px;
background-image: url('gfx/Sheet-s.png');
}
.Sheet-tr
{
position: absolute;
overflow: hidden;
z-index: -1;
top: 0;
right: 0;
width: 50px;
height: 50px;
}
.Sheet-tr div
{
position: absolute;
z-index: -1;
top: 0px;
left: -50px;
width: 100px;
height: 100px;
background-image: url('gfx/Sheet-s.png');
}
.Sheet-bl
{
position: absolute;
overflow: hidden;
z-index: -1;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
}
.Sheet-bl div
{
position: absolute;
z-index: -1;
top: -50px;
left: 0;
width: 100px;
height: 100px;
background-image: url('gfx/Sheet-s.png');
}
.Sheet-br
{
position: absolute;
overflow: hidden;
z-index: -1;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
}
.Sheet-br div
{
position: absolute;
z-index: -1;
top: -50px;
left: -50px;
width: 100px;
height: 100px;
background-image: url('gfx/Sheet-s.png');
}
.Sheet-tc
{
position: absolute;
overflow:hidden;
z-index: -1;
top: 0;
left: 50px;
right: 50px;
height: 50px;
}
.Sheet-tc div
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-image: url('gfx/Sheet-h.png');
}
.Sheet-bc
{
position: absolute;
overflow:hidden;
z-index: -1;
bottom: 0;
left: 50px;
right: 50px;
height: 50px;
}
.Sheet-bc div
{
position: absolute;
z-index: -1;
top: -50px;
left: 0;
width: 100%;
height: 100px;
background-image: url('gfx/Sheet-h.png');
}
.Sheet-cl
{
position: absolute;
overflow:hidden;
z-index: -1;
top: 50px;
left: 0;
width: 50px;
bottom: 50px;
}
.Sheet-cl div
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100px;
height: 100%;
background-image: url('gfx/Sheet-v.png');
}
.Sheet-cr
{
position: absolute;
overflow:hidden;
z-index: -1;
top: 50px;
right: 0;
width: 50px;
bottom: 50px;
}
.Sheet-cr div
{
position: absolute;
z-index: -1;
top: 0;
left: -50px;
width: 100px;
height: 100%;
background-image: url('gfx/Sheet-v.png');
}
.Sheet-cc
{
position: absolute;
overflow:hidden;
z-index: -2;
top: 50px;
left: 50px;
right: 50px;
bottom: 50px;
background-image: url('gfx/Sheet-c.png');
}
.Sheet
{
margin-top: -10px !important;
}
/* end Box, Sheet */
/* begin Header */
div.Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 880px;
height: 225px;
}
div.Header-jpeg
{
position: absolute;
z-index:-1;
top: 0;
left: 0;
width: 880px;
height: 225px;
background-image: url('gfx/Header.jpg');
background-repeat: no-repeat;
background-position: center center;
}
/* end Header */
/* begin Logo */
.logo
{
display : block;
position: absolute;
left: 10px;
top: 10px;
width: 860px;
}
h1.logo-name
{
display: block;
text-align: left;
}
h1.logo-name, h1.logo-name a, h1.logo-name a:link, h1.logo-name a:visited, h1.logo-name a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 26px;
font-style: normal;
font-weight: bold;
text-decoration: none;
padding:0;
margin:0;
color: #000000 !important;
}
.logo-text
{
display: block;
text-align: left;
}
.logo-text, .logo-text a
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
padding:0;
margin:0;
color: #000000 !important;
}
/* end Logo */
/* begin Menu */
/* menu structure */
.artmenu a, .artmenu a:link, .artmenu a:visited, .artmenu a:hover
{
text-align:left;
text-decoration:none;
outline:none;
letter-spacing:normal;
word-spacing:normal;
}
.artmenu, .artmenu ul
{
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
display: block;
}
.artmenu li
{
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background:none;
}
.artmenu li:hover
{
z-index: 10000;
white-space: normal;
}
.artmenu li li
{
float: none;
}
.artmenu ul
{
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background:none;
}
.artmenu li:hover>ul
{
visibility: visible;
top: 100%;
}
.artmenu li li:hover>ul
{
top: 0;
left: 100%;
}
.artmenu:after, .artmenu ul:after
{
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
.artmenu, .artmenu ul
{
min-height: 0;
}
.artmenu ul
{
background-image: url(gfx/spacer.gif);
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
.artmenu ul ul
{
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
}
/* menu structure */
.nav
{
position: relative;
margin: 0 auto;
width: 880px;
height: 29px;
z-index: 100;
}
.artmenu
{
padding: 6px 3px 0px 3px;
}
.nav .l, .nav .r, .nav .r div
{
top: 0;
position: absolute;
z-index: -1;
overflow: hidden;
height: 29px;
}
.nav .l
{
left: 0;
right: 0px;
}
.nav .r
{
right: 0;
width: 0px;
}
.nav .r div
{
width: 880px;
right: 0;
}
.nav .l, .nav .r div
{
background-position: left top;
background-repeat: no-repeat;
background-image: url('gfx/nav.png');
}
/* end Menu */
/* begin MenuItem */
.artmenu ul li
{
clear: both;
}
.artmenu a , .artmenu a span
{
height: 23px;
display: block;
}
.artmenu a
{
cursor: pointer;
text-decoration: none;
margin-right: 4px;
margin-left: 4px;
}
.artmenu a
{
background-image: url('gfx/item-left.png');
background-position: left top;
background-repeat: no-repeat;
}
.artmenu a span
{
background-image: url('gfx/item-right.png');
background-position: right top;
background-repeat: no-repeat;
}
.artmenu a span span
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #DEDEDE;
padding: 0 15px;
margin: 0 15px;
line-height: 23px;
text-align: center;
background-image: url('gfx/item-center.png');
background-position: left top;
background-repeat: repeat-x;
}
.artmenu a:hover
{
background-position: left -23px;
}
.artmenu li:hover>a
{
background-position: left -23px;
}
.artmenu li:hover a span
{
background-position: right -23px;
}
.artmenu a:hover span
{
background-position: right -23px;
}
.artmenu a:hover span span
{
color: #F0F0F0;
background-position: left -23px;
}
.artmenu li:hover a span span
{
color: #F0F0F0;
background-position: left -23px;
}
.artmenu a.active
{
background-position: left -46px;
}
.artmenu a.active span
{
background-position: right -46px;
}
.artmenu a.active span span
{
color: #000000;
background-position: left -46px;
}
/* end MenuItem */
/* begin ContentLayout */
.contentLayout
{
margin-bottom: 8px;
width: 880px;
position: relative;
}
/* end ContentLayout */
/* begin Box, Block */
.Block
{
overflow: hidden;
min-width:15px;
min-height:15px;
margin: 0 auto;
position: relative;
z-index: 0;
}
.Block-body
{
position: relative;
z-index: 0;
margin: 7px;
}
.Block-tl
{
position: absolute;
overflow: hidden;
z-index: -1;
top: 0;
left: 0;
width: 7px;
height: 7px;
background-image: url('gfx/Block-s.png');
}
.Block-tr
{
position: absolute;
overflow: hidden;
z-index: -1;
top: 0;
right: 0;
width: 7px;
height: 7px;
}
.Block-tr div
{
position: absolute;
z-index: -1;
top: 0px;
left: -7px;
width: 14px;
height: 14px;
background-image: url('gfx/Block-s.png');
}
.Block-bl
{
position: absolute;
overflow: hidden;
z-index: -1;
bottom: 0;
left: 0;
width: 7px;
height: 7px;
}
.Block-bl div
{
position: absolute;
z-index: -1;
top: -7px;
left: 0;
width: 14px;
height: 14px;
background-image: url('gfx/Block-s.png');
}
.Block-br
{
position: absolute;
overflow: hidden;
z-index: -1;
bottom: 0;
right: 0;
width: 7px;
height: 7px;
}
.Block-br div
{
position: absolute;
z-index: -1;
top: -7px;
left: -7px;
width: 14px;
height: 14px;
background-image: url('gfx/Block-s.png');
}
.Block-tc
{
position: absolute;
overflow:hidden;
z-index: -1;
top: 0;
left: 7px;
right: 7px;
height: 7px;
}
.Block-tc div
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 14px;
background-image: url('gfx/Block-h.png');
}
.Block-bc
{
position: absolute;
overflow:hidden;
z-index: -1;
bottom: 0;
left: 7px;
right: 7px;
height: 7px;
}
.Block-bc div
{
position: absolute;
z-index: -1;
top: -7px;
left: 0;
width: 100%;
height: 14px;
background-image: url('gfx/Block-h.png');
}
.Block-cl
{
position: absolute;
overflow:hidden;
z-index: -1;
top: 7px;
left: 0;
width: 7px;
bottom: 7px;
}
.Block-cl div
{
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 14px;
height: 100%;
background-image: url('gfx/Block-v.png');
}
.Block-cr
{
position: absolute;
overflow:hidden;
z-index: -1;
top: 7px;
right: 0;
width: 7px;
bottom: 7px;
}
.Block-cr div
{
position: absolute;
z-index: -1;
top: 0;
left: -7px;
width: 14px;
height: 100%;
background-image: url('gfx/Block-v.png');
}
.Block-cc
{
position: absolute;
overflow:hidden;
z-index: -2;
top: 7px;
left: 7px;
right: 7px;
bottom: 7px;
background-image: url('gfx/Block-c.png');
}
.Block
{
margin: 7px;
}
/* end Box, Block */
/* begin BlockHeader */
.BlockHeader
{
position: relative;
overflow: hidden;
height: 30px;
z-index: 0;
line-height: 30px;
padding: 0 7px;
margin-bottom: 7px;
}
.BlockHeader-text
{
white-space : nowrap;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
line-height: 30px;
}
.BlockHeader .l, .BlockHeader .r, .BlockHeader .r div
{
top: 0;
position: absolute;
z-index: -1;
overflow: hidden;
height: 30px;
}
.BlockHeader .l
{
left: 0;
right: 6px;
}
.BlockHeader .r
{
right: 0;
width: 6px;
}
.BlockHeader .r div
{
width: 880px;
right: 0;
}
.BlockHeader .l, .BlockHeader .r div
{
background-position: left top;
background-repeat: no-repeat;
background-image: url('gfx/BlockHeader.png');
}
.header-tag-icon
{
display:inline-block;
background-position:left top;
background-image: url('gfx/BlockHeaderIcon.png');
padding:0 0 0 21px;
background-repeat: no-repeat;
min-height: 14px;
margin: 0 0 0 5px;
}
/* end BlockHeader */
/* begin Box, BlockContent */
.BlockContent
{
overflow: hidden;
min-width:1px;
min-height:1px;
margin: 0 auto;
position: relative;
z-index: 0;
}
.BlockContent-body
{
position: relative;
z-index: 0;
margin: 8px;
}
.BlockContent-body
{
color:#383838;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
}
.BlockContent-body a:link
{
color: #832121;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.BlockContent-body a:visited, .BlockContent-body a.visited
{
color: #525252;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
}
.BlockContent-body a:hover, .BlockContent-body a.hover
{
color: #290A0A;
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
}
.BlockContent-body ul
{
list-style-type: none;
color: #4A4A4A;
margin:0;
padding:0;
}
.BlockContent-body li
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration: none;
}
.BlockContent-body ul li
{
padding:0px 0 0px 13px;
background-image: url('gfx/BlockContentBullets.png');
background-repeat:no-repeat;
margin:0.5em 0 0.5em 0;
line-height:1.2em;
}
/* end Box, BlockContent */
/* begin Box, Post */
.Post
{
overflow: hidden;
min-width:1px;
min-height:1px;
margin: 0 auto;
position: relative;
z-index: 0;
}
.Post-body
{
position: relative;
z-index: 0;
margin: 10px;
}
.Post
{
margin: 10px;
}
/* Start images */
a img
{
border: 0;
}
.article img, img.article
{
border-style: solid;
border-width: 1px;
border-color: #C4C4C4;
margin: 1em;
}
.metadata-icons img
{
border: none;
vertical-align: middle;
margin:2px;
}
/* Finish images */
/* Start tables */
.article table, table.article
{
border-collapse: collapse;
margin: 1px;
width:auto;
}
.article table, table.article .article tr, .article th, .article td
{
background-color:Transparent;
}
.article th, .article td
{
padding: 2px;
border: solid 1px #5C5C5C;
vertical-align: top;
text-align:left;
}
.article th
{
text-align:center;
vertical-align:middle;
padding: 7px;
}
/* Finish tables */
/* end Box, Post */
/* begin PostHeaderIcon */
.PostHeaderIcon-wrapper
{
text-decoration:none;
margin: 0.2em 0;
padding: 0;
font-weight:normal;
font-style:normal;
letter-spacing:normal;
word-spacing:normal;
font-variant:normal;
text-decoration:none;
font-variant:normal;
text-transform:none;
text-align:left;
text-indent:0;
line-height:inherit;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #661919;
}
.PostHeaderIcon-wrapper, .PostHeaderIcon-wrapper a, .PostHeaderIcon-wrapper a:link, .PostHeaderIcon-wrapper a:visited, .PostHeaderIcon-wrapper a:hover
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 22px;
font-style: normal;
font-weight: bold;
text-align: left;
color: #661919;
}
/* end PostHeaderIcon */
/* begin PostHeader */
.PostHeader a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #7A1F1F;
}
.PostHeader a:visited, .PostHeader a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #4D4D4D;
}
.PostHeader a:hover, .PostHeader a.hovered
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
text-align: left;
color: #BC2F2F;
}
/* end PostHeader */
/* begin PostContent */
/* Content Text Font & Color (Default) */
body
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #404040;
}
.PostContent
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-align: justify;
color: #404040;
}
/* Start Content link style */
/*
The right order of link pseudo-classes: Link-Visited-Hover-Focus-Active.
http://www.w3schools.com/CSS/css_pseudo_classes.asp
http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/
*/
a
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #8F2424;
}
/* Adds special style to an unvisited link. */
a:link
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #8F2424;
}
/* Adds special style to a visited link. */
a:visited, a.visited
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: underline;
color: #3B3B3B;
}
/* :hover - adds special style to an element when you mouse over it. */
a:hover, a.hover
{
font-family: Arial, Helvetica, Sans-Serif;
text-decoration: none;
color: #BC2F2F;
}
/* Finish Content link style */
/* Resert some headings default style & links default style for links in headings*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited
{
font-weight: normal;
font-style: normal;
text-decoration: none;
}Gruß
Michael