HTML+CSS-Formatierung nur ebay-Artikelbeschreibung

Computer: Software & Programmierung HTML & CSS
#1

Guten Tag,

wie kann ich die Hintergrundfarbe bei einer Ebay-Artikelbeschreibung nur auf dem Bereich der Beschreibung beschränken? Denn leider wird bei mir auch der Bereich darunter eingefärbt und auch die Schriften geändert.

Ich weiß, dass ich nicht wie man das darstellt, wenn man oben auf den Link „English“ klickt, dass dann zum unteren Teile der Seite gesprungen wird, wo dann der Text: „English description“ steht?

Gerne freue ich mich über weitere Optimierungsvorschläge. Bin leider nur blutiger Anfänger.

1000 DANK Stefan!

body { margin: 0px 0px 0px 0px; background: #303030 url(http://keingerede2011.lima-city.de/template/bg.gif) repeat-x; }
#container { margin: 0 auto; background: #FFFFFF url(http://keingerede2011.lima-city.de/template/ctbg.gif) no-repeat; width: 750px; margin-top: 40px; }
#topheader { height: 89px; border-bottom: 1px solid #777777; color: #ff6600; width: 750px; }
#theader { font-family: Impact, Sans-serif; font-size: 36px; color: #303030; background: url(http://keingerede2011.lima-city.de/template/logo.gif) no-repeat 0; margin-left: 18px; margin-top: -5px; margin-bottom: -5px; padding-left: 35px; width: 697px; }
#theadert { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #ff6600; padding-left: 73px; }
#mainbanner {
width: 560px;
height: 88px;
border-bottom: 1px solid #303030;
background: url(http://keingerede2011.lima-city.de/template/mainbann…) no-repeat;
padding-top: 50px;
padding-left: 190px;
font-family: Rockwell Extra Bold;
font-size: 26px;
color: #FFF;
}
#nav { border-top: 5px solid #303030; width: 750px; }
#nav ul { margin: 0 0 0 0; }
#nav li { list-style-type: none; display: inline; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
#nav li a { text-decoration: none; color: white; background:#303030 url(http://keingerede2011.lima-city.de/template/navbg.gif) no-repeat; width: 100px; height: 17px; padding-top: 5px; display: block; float: left; text-align:center; }
#body { float: none; clear:both; width: 750px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; }
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing: -0.8px;
font-size: 24px;
color: #303030;
margin: 0 0 0 0;
padding-left: 24px;
padding-top: 16px;
padding-bottom: 12px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #ff6600;
margin: 0 0 0 43px;
padding-top: 0px;
}
#footer {
width: 750px;
margin: 0 auto;
background:url(http://keingerede2011.lima-city.de/template/footer.gif) no-repeat;
height: 19px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
padding-top: 5px;
}
#p404 {
margin: 0 auto;
padding-top: 20px;
width: 400px;
height: 200px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.intro {
margin-top: 5px;
padding-left: 37px;
padding-right: 30px;
width: 683px;
padding-top: 12px;
height: 153px;
background: url(http://keingerede2011.lima-city.de/template/introbg.gif) no-repeat #FFF;
color: #000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
line-height: 13px;
}
div.content { width: 740px; padding: 5px;}
hr { margin-left: 50px; height: 0px; border-top: 2px dashed #FF6600;}
#blogleft { width: 740px; padding: 5px; float: left;}
#guestleft { width: 740px; float: left;}
span.blogged { width: 100%; height: 20px; border-top: 1px solid #222222; background-color: #e4e4e4; display: block; margin-top: 5px;}
.post {width: 650px; margin: 0 auto; padding-top: 5px; padding-bottom: 10px;}
#body a { color: #ff6600; text-decoration: none; }
label { margin-left: 50px; width: 150px; height: 20px; display: block; float: left; }
b { color: #ff6600;}
strong {color: #000000;}
span.blogged1 { width: 64.5%; height: 20px; border-top: 1px solid #222222; background-color: #e4e4e4; display: block; margin-top: 5px;}
#security {width: 400px;}

Sie bieten auf…

Text

Artikelbeschreibung

Kleiner Text
Text 2

English description

Versandbedingungen

#2

Servus,

so weit ich gilt für die Artikelbeschreibung CSS technisch die ID „d“. Es sollte also genügen, in das CSS etwas in dieser Art einzufügen:

#d {
background-color: #CBBB00; /* oder jeder andere Farbcode */
}

Zum Thema Links - müsste so aussehen:

oben:

Englischer Text

und unten (oberhalb der Stelle wo der englische Text steht):

English Description

#3

Hallo den Beschreibungsboxen liegt die Grafik: http://keingerede2011.lima-city.de/template/introbg.gif
zugrunde. Da in der Grafik der Hintergrund weiß ist, wird man dort mit CSS nicht weiterkommen. Ich empfehle nur die Ränder als Grafiken zu benutzen. Dazu: http://aktuell.de.selfhtml.org/artikel/css/runde_ecken/

Was interne Verlinkungen (sog. Anker angeht) empfehle ich das Kapitel: Anker definieren und Verweise zu Ankern unter: http://de.selfhtml.org/navigation/suche/index.htm?Su…

Grundsätzlich ist die Arbeit mit Div-Containern und CSS schon sehr gut gelöst, leider nicht nicht optimal. In diesem Fall würde man der Klasse: .intro das Attribut: „background-color“ geben. Da aber die Grafik darüber liegt, hat es keinen Effekt.

Da es sich um Quelltext handelt, der bei Ebay eingefügt wird ist die Doctype Information irrelevant.

Beste Grüße
Christian

#4

Hi,
sorry - aber ich habe keine Zeit mich gerade hiermit zu beschäftigen, auch habe ich noch keine Templates für Ebay Shops gebaut.
Was dir evt. helfen kann:
Du solltest die classe oder ID der Artikelbeschreibung herausfinden, diese kannst du dann per css stylen.

Damit der Browser auf die richtige Position springt werden Anchor benutzt.
wie du diese schreibst findest du z.b bei www.selfhtml.org

viel glück.

#5

Hallo Christian,

vielen Dank für deine super Tipps. Ich stelle mich glaub ich immer noch zu dämlich an. h2 h3 etc sollte man wohl auch nicht nehmen, weil ebay selbst die verwendet.

Wärst du so nett, mir meinen Quellcode korrekt zu formatieren? Ich weiß, dass ist bestimmt ne Menge Arbeit. Ich würde mich aber riesig darüber freuen!

Liebe Grüße
Stefan

#6

Hallo Wizard,

vielen Dank für deine super Tipps. Ich stelle mich glaub ich immer noch zu dämlich an. h2 h3 etc sollte man wohl auch nicht nehmen, weil ebay selbst die verwendet.

Wärst du so nett, mir meinen Quellcode korrekt zu formatieren? Ich weiß, dass ist bestimmt ne Menge Arbeit. Ich würde mich aber riesig darüber freuen!

Liebe Grüße
Stefan

#7

Hallo Stefan,
hab dir das mal so angepasst, wie ich denke dass du es brauchst.

-> http://www.xup.in/dl,90178777/ebay.html/

Grüße,
Simon

#8

Hallo Simon,

leider wird die Seite wegen Malware geblockt. Könntest du mir vielleicht den Quellcode hier schreiben?

1000 DANK! Stefan

#9

Hi Stefan,

ich würde Dir da gerne unter die Arme greifen, werde es jedoch aktuell nicht schaffen, da mein Zeitfenster doch momentan etwas beschränkt ist.

Aber vlt. findet sich jmd der es umsetzt? Ansonsten lass einfach die Grafiken für die Detail-Felder weg, das sollte den Aufwand verringern.

Beste Grüße
Christian.

#10

das funktioniert leider nicht, weil dann der ganze code umsformatiert angezeigt wird.

geht das hier: http://pastebin.com/qraw7jVv

?

#11

Ich seh grad, den Link hat er direkt übernommen und nicht den Code gezeigt, hier nochmal:

Englischer Text

Den Quellcode kann ich so aus dem Stehgreif leider nicht formatieren, da ich die endgültige Wirkung auf der Ebay-Anzeige nicht direkt testen kann. Ich bin mir momentan auch nicht sicher, was Ebay an eigenem Markup und CSS erlaubt und was nicht.

Wo hast du das Markup eigentlich her? Ich nehme an, irgendwo rauskopiert? Ohne es direkt in der Anzeige zu testen wäre ich mir nicht sicher wie es konkret aussieht.

Was ich annehme: du willst nur die Hintergrundfarbe des DIV mit der ID „body“ ändern. In deinem Quelltext gibt es die Anweisung:

#body { float: none; clear:both; width: 750px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; }

Ergänze diese Anweisung um das background-color Attribut, so daß es folgendermaßen aussieht:

#body { float: none; clear:both; width: 750px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; background-color: #CCCCCC }

Statt #CCCCCC muss natürlich dein gewünschter Farbcode eingesetzt werden (ich nehme an #303030, da das bereits in der body Anweisung (die sich auf die gesamte Seite und nicht nur auf die gleichnamige ID bezieht!) auftaucht und du meintest daß zu viel eingefärbt wird.

#12

Arrgh,

und schon wieder hat er den HTML code geschluckt.

Letzter Versuch:

Englischer Text

#13

Hallo Simon,

ja der Link geht. Doch leider hat die Änderung nicht der gewünschten Erfolg gebracht. :frowning:(

LG Stefan

#14

Hallo Wizard,

wenn du den Quelltext bei ebay in die Vorschau kopierst, siehts Du das mögliche Ergebnis. Man braucht dazu keinen Artikel einstellen. Der dunkel-graue Hintergrundtext überschreibt die komplette ebay-Seite und färbt dann auch die Namen und Felder um. Ich denke das liegt am body-Befehl und h2 h3 etc…

Die Definition der Hitergrundfarbe darf sich somit nur auf den eigentlichen Beschreibungstext auswirken und nicht auf die ganze ebay-Seite.

Anbei ein Screenshot wie die komplette ebay Seite eigefärbt wird:
www.7.pic-upload.de/04.10.11/iea4kkturyx.jpg
Soll sollst nicht sein.

Auf dieser Seite werden einige Befehle beschrieben, die man bei ebay verwenden kann. Allerdings kann ich das nicht umsetzen :frowning:
terrenal.de/help/css_html.php

Die Vorlage habe ich kopiert. Diese wurde als frei benutzbare Website angeboten.

Ich habe hier mal ein Beispielquelltext wie es richtig aussieht von der Formatierung. Ich kann das mit meinem Wissenstand allerdings leider nicht auf meinen Quelltext übertragen:

<!–
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
#beschreibung {
background-color: #000000;
}
.Stil1 {
font-size: large;
color: #FF6633;
}
.Stil2 {
font-size: 48px;
color: #FF6633;
font-weight: bold;
}
.Stil3 {
font-size: 14px;
color: #CCCCCC;
}
.Stil4 {font-size: 18px; }
.Stil5 {
font-size: 16px;
color: #CCCCCC;
}
.Stil7 {font-size: 24px; }
.Stil8 {font-size: 24px; color: #FF6633; }
.Stil9 {color: #CCCCCC}
.Stil10 {font-size: 18px; color: #CCCCCC; }
.Stil11 {font-size: 16px}
.Stil12 {font-weight: bold; font-size: 16;}
–>

 
Test Artikel XYZ
nettes Ding
 

 

Kurze Beschreibung
xyz gutes Teil, bla bla ba
 
Technische Daten

  • xxxxxx

  • fdfdfdfdf

  • vfgfgfgfg

  • fggfgfgf

 

Zustand
funktionsfähig
 
 
Optisch
guter
 
Zubehör
nix

 
 

 

PS: Du kannst mir auch gerne ne email schreiben:
[email protected]

LG Stefan

#15

Hi,

der Quelltext den du in deinem letzten Beitrag gepostet hast führt bei mir zu folgendem Ergebnis:

Sollte also passen. Der wirksame Style ist hier definiert:

#beschreibung {
background-color: #000000;
}

Wenn du diesen Wert änderst kannst du die Hintergrundfarbe anpassen. Allerdings habe ich noch die Kommentartags entfernt. Prinzipiell kannst du es also so machen:

(Im HTML Modus des Verkaufsformulars)

/* hier steht der ganze CSS Kram */

/*hier kommt der ganze HTML Kram */

CSS funktioniert über Klassen und/oder IDs die du einzelnen Elementen zuweist. Ein DIV z.B. ist eine Art Container für weitere Elemente, du kannst also so etwas definieren:

Dein lustiger Inhalt

und im oberen Bereich zwischen den Style Tags per

#bla {
background-color: #CBBB00;
}

Diesem Div mit eben jener ID eine goldene Hintergrundfarbe zuweisen. Die ID sollte auf der Seite eindeutig sein. Für mehrere Elemente die den selben Style erhalten sollen arbeitet man mit CSS Klassen. Das sieht dann so aus:

Lustiger Inhalt

und wird so gestylt:

.meine-klasse {
background-color: #CBBB00;
}

Damit sollte es dir eigentlich möglich sein, das zu erreichen was du willst. Zur Not musst du dich ein wenig einlesen, aber die wirklich hohe CSS Schule brauchst du ja gar nicht sondern nur ein paar Grundlagen zum Thema Farbe, etc.

Hoffe, das hilft.

#16

Hallo,

na dann gönne Dir doch für Deine Artikelbeschreibung einfach ein div und formatiere es per (wenn z.B. rot gewünscht ist. Die Sache mit dem englischen Text lässt sich einfach per Anchor-Link realisieren. Wie das geht beschreibt selfhtml sehr ausführlich.

Viel Spaß noch bei ebay und lasse die rechtlichen Texte nochmal durch einen Anwalt checken!

Viele Grüße
Allyfied

#17

Hallo Stefan,
auch html-, body-, head- und title-Tag fehlten.

Du hast für den Bereich Hintergrund (class „intro“) eine Grafik mit grauen Rahmen, die musst du eben einfärben, wenn du sie weiterhin einsetzen möchtest.
Wenn du nur die Artikelbeschreibung farbig unterlegen möchtest, dann solltest du dafür eine Grafik, sowie extra Klasse oder ID festlegen.

Um irgendwo hin zu „springen“, musstest du einen Anker setzen:

English description

und bei dem Menüpunkt englisch:

als href="#englisch">englisch
(Lässt sich hier nicht als Code aufschreiben :frowning:

Hoffe, das hilft dir?

Gruß
Maja

#18

Hallo Maja,

ja genau ich möchte nur die Artikelbeschreibung farbig unterlegen. (Dann solltest du dafür eine Grafik, sowie extra Klasse oder ID festlegen.)
–> Könntest du für mich vielleicht den Quellcode entsprechend ändern?

1000 Dank!
Stefan

#19

Hallo allyfied,

dank dir für deine Tipps. Was genau meinst du mit rechtliche Texte vom Anwaltprüfen lassen?
Ich weiß das ich auf ebay nicht extern verlinken darf. Das habe ich auch nicht vor. Wo siehst du konkret Probleme?

Leider bin ich mit der Umsetzung überfordert die komplette Artikelbeschreibung mit einem div zu formatieren. Wärst du so nett und würdest meinen Quelltext ändern?

Ich würde mich sehr freuen!

1000 Dank!
Stefan

#20

Guten Morgen,

ja genau, diese Beschreibung funktioniert super und es wird auch nur die Artikelbeschreibung verändert und nicht die komplette ebay-Seite:
http://img703.imageshack.us/img703/8581/ebayh.jpg

Doch leider kann ich das nicht auf meinen Quelltext übertragen :frowning: Ich bin mit der Umsetzung überfordert. Wärst du so nett und würdest meinen Quelltext ändern?

Ich würde mich sehr freuen!

1000 Dank!
Stefan