HTML+CSS-Formatierung nur ebay-Artikelbeschreibung

Computer: Software & Programmierung HTML & CSS
21

Hallo Stefan,

also zuerst erstellst du eine entsprechende Grafik mit gewünschte Hintergrundfarbe und speicherst die in dem gleichen Ordner, wie auch die introbg.gif.
Dann erstellst du eine zusätzliche Klasse, zB. „artikel“.

Diese Klasse solltest du NACH dem Intro in CSS einfügen - damit die Klasse „intro“ mit der Angabe zur background überschrieben wird:

.artikel { background: 
url(http://keingerede2011.lima-city.de/template/artikelbg.gif) no-repeat #FFF;}

Und im HTML-Bereich:

Artikelbeschreibung

Das heißt: es bleibt alles wie gehabt, nur die Hintergrundgrafik für Artikelbeschreibung ändert sich (wird überschrieben).

Ich versuche es hier den Code zu übertragen:

 Ebay 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/mainbanner.gif) 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;
}

.artikel {
background: url(http://keingerede2011.lima-city.de/template/artikelbg.gif) no-repeat #FFF;
}

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

22

Hallo Maja,

ich habe ein entsprechende Testgrafik erstellt und hochgeladen:
http://keingerede2011.lima-city.de/template/artikelb…

Doch leider ändert das bei ebay nicht die Darstellungsweise.

Der ganze Bereich muss auch raus:

Ebay Stefan

Ebenso muss de body-Bereich umformatiert werden, weil ebay ja diesen eigentlich vorgibt. Vielleicht durch #beschreibung ???

Hier gibts auch noch einige Hilfen zu ebay und CSS, aber ich kann das nicht umsetzen:
http://terrenal.de/help/css_html.php

LG Stefan

23

Hallo Stefan,

ich habe das mal online getestet, deine Grafik WIRD dargestellt, allerdings steht sie am Anfang von DIV-Container und ist auch äußerst unpassend :smile:.
Welche Hintergrundfarbe sollte der Kasten haben?

Gruß
Maja

24

Hallo Maja,

ich schicke dir mal den Link wo ich die Vorlage her habe.
Oben links kannst du dann auch das alles downloaden und es werden die Bilder html und CSS-Datei gespeichert:
http://www.oswd.org/design/preview/id/2925

Ich möchte halt diese Webseite so formatiert haben, dass ich sie für die ebay-Artikelbeschreiung benutzen kann, ohne dass die komplette ebay-Seite verändert wird.

LG Stefan

25

Hallo,

ich habe dich gefragt welche Farbe du haben möchtest, weil ich dir das machen wollte :wink:.

Hier hast du das Bild mit einer anderen Farbe.

http://www.bilder-space.de/show_img.php?img=b409f8-1…

Speichere das Bild als artikelbg.gif dort, wo auch das Bild introbg.gif gespeichert wurde und versuche es nochmal.

Mir ist nicht klar WO du bei Ebay die CSS-Datei speichern kannst. Habe schon lange nichts mehr verkauft, aber vor einiger Zeit musste ich die CSS-Styles inline (in HTML-Tags) einfügen. Falls das jetzt doch geht, kannst du das so machen, wie ich es dir beschrieben habe. Natürlich entfernst du alles, was nicht darf (head, title etc).

Wenn das nicht klappt, melde dich nochmal. :smile:

Gruß
Maja

26

Hallo Maja,

also der Hintergrund vom dem Textfeld (introbg.gif) kann weiß bleiben so wie es ist.

Bei ebay wird die CSS Datei nicht extra gespeichert. Deswegen habe ich die CSS-Befehle oben im Quelltext eingebunden. Das kann man bei ebay so machen und ist übliche Praxis :wink: Wenn ich head body usw entferne wird die Seite noch mehr zerschossen :frowning:

Wenn du den Quelltext bei ebay in die Vorschau kopierst, siehts Du das mögliche Ergebnis. (Vorschau im HTML Modus des Verkaufsformulars). 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 (Teilauschnitt):
http://www7.pic-upload.de/05.10.11/w4dbyuhg3w66.jpg
Soll sollst nicht sein.

LG Stefan

27

Hallo Stefan,

bin etwas verwirrt, ich habe das Gefühl, dass wir einander vorbei reden :smile:.

Du hast zuerst geschrieben, dass du in dem Bereich von Artikelbeschreibung, eine andere Farbe haben möchtest (nur nicht welche).

In dem letzten Post sagst du, dass der Hintergrund weiß bleiben sollte.

Nun hast du mir ein Screenshot geschickt, nun weiß ich wie es > sein sollte :smile:…

Sag mir also welche Farbe du wo haben möchtest. Ich probiere das dann bei mir in ebay aus und sag dir Bescheid wie du das machen sollst, ok? Wir kriegen das schon hin :wink:

Viele Grüße
Maja

28

Hallo Maja,

du bist ja lieb.
Also ich möchte das der ebay-Beschreibungstext so aussieht wie mein Quelltext mit den Liks, dem grauen Hintergrund und den Textfeldern mit den runden Kanten.
Leider ist mein Quelltext mit einem Body-Bereich definiert. Das ist falsch und muss irgendwie raus, weil ebay das selbst definiert.

Also ich möchte das so haben, das sich mein Quelltext nur auf den Teil der ebay-Artikelbeschreibung auswirkt und nicht die ganze ebay-Seite ändert.
Ich möchte also gar keinen Einfluss auf die ganze ebay-Seite ausüben, sondern nur auf meinen Quelltext.

Hab ich mich halbwegs klar ausgedrückt?

LG Stefan

29

Hi,
du darfst das globale body Attribut nicht mit einem background füllen.
Das jeweilige DIV, um das es geht, erhält als Style einen background.

30

Hallo Stefan,
die Struktur Deines HTML-Dokuments stimmt nicht ganz. Dein HTML-Gerüst sollte in etwa so aussehen:

Dein Seitentitel
(Hier kommen Deine Styles rein!)

(Hier kommen Deine Inhalte rein!)

Das „body“-Tag zeichnet den sichtbaren Bereich der Seite aus und gehört zu den Standard-Tags. Dein #body-Tag (id=„body“) ist ein von Dir benanntes Tag und hat mit dem Standard-Tag nichts zu tun.

Dass Deine Artikelbeschreibung nicht allein einen anderen Hintergrund hat, liegt an der Klasse „.intro“, die Du für 3 Bereiche formatiert hast. ALLE mit ‚div class=„intro“‘ ausgezeichneten Container erhalten dieselben Styles. Wenn Du nur den Container mit der Artikelbeschreibung ändern willst, musst Du eine neue Klasse hinzufügen, die nur dort steht mit den gewünschten Styles.

Wenn mehr zu HTML wissen willst, findest Du z.B. hier eine Anleitung.

Noch eine Anmerkung: Du solltest auf die standardkonforme Verschachtelung Deiner Überschriften (H…) achten. Eine steht nicht vor einer . Zudem solltest Du Textbereiche besser mit auszeichnen. Das hat auch Auswirkungen auf die Suchmachinenoptimierung.
Beispiel:
Kleiner Text
Text 2
Das
brauchst Du nicht, da diese Blöcke jeweils von selbst umbrechen.

Englische Beschreibung:
Hierfür setzt Du einen sog. Sprungmarker oder Ankerlink.
a) English description = Markierung der Sprungstelle (muss eine ID sein)
b) English = der Link, der die Sprungstelle anspringt.

Vielleicht hilft Dir das weiter.
Gruß, Renaade