Hallo
Es ist schlechter Stil und macht Diskussionen unübersichtlich, wenn komplette Vorpostings wiederholt werden. Es sollten immer nur Sätze, Teilsätze oder Bemerkungen wiederholt werden, auf die danach konkret geantwortet wird. Also kurz und knackig.
Zitat
Wärest du vielleicht bereit das Ganze für 2 weitere templates umzuschreiben ...
Ich schaue mir die gerne an. Ob überhaupt und in welchem Zeitraum ich die dann neu erstellen kann, kann ich aber erst dann entscheiden. Ich helfe schließlich in meiner Freizeit und aus Spaß.
Zitat
Oder falls nicht, kannst du mir vielleicht eine Art Anleitung dazu geben, wie ich das dann möglicherweise selber hinbekommen könnte?
Das übersteigt die Möglichkeiten des Forums und meine Zeit. Dazu müsstest du im Endeffekt das komplette HTML5 und CSS3 lernen und zusätzlich die Ebay-Besonderheiten. Die haben ja grade in den letzten eineinhalb Jahren ihre Bestimmungen verschärft und "bestrafen" jetzt altes HTML/CSS mit Schlechterstellungen beim Ranking und bei groben Fehlverstößen gar Schließung des Kontos.
Das ist wahrscheinlich auch der Grund für deine Anpassungswünsche.
Zitat
Eigentlich bräuchte ich vermutlich nur zu wissen, wo genau im Dokument ich den Code fürs responsive eingeben müsste, wie er genau lautet, und wo er enden muss.
Ganz ohne HTML- und CSS-Kenntnisse ist das kaum zu schaffen.
Bei Ebay musst du den Quellcode für dein Angebot eingeben können. Ich mache das zum Beispiel mit der Software "TurboLister".
Der einzufügende Quellcode für meine Beispielseite ist folgender:
<br>
<!-- <link rel="stylesheet" href="pfad/dateiname.css" type="text/css"> -->
<style>
/*Grundeinstellungen*/
@media all {
.xyzz {
background-color: rgb(255, 255, 255);
box-shadow: 10px 10px 10px grey, 5px 5px 5px lightgrey inset, -5px -5px 5px lightgrey inset;
max-width: 1000px;
padding: 1rem;
border: 1px solid grey;
border-radius: 0.5rem;
margin-left: auto;
margin-right: auto;
}
.xyzz * {
min-width: 1px;
}
.xyzz h2,
.xyzz h3,
.xyzz h4 {
font-family: sans-serif;
font-size: 2rem;
letter-spacing: 0.05rem;
margin: 0.3rem 0rem;
}
.xyzz p {
font-family: serif;
font-size: 1.5rem;
letter-spacing: 0.05rem;
margin: 0.3rem 0rem;
}
.xyzz figure {
min-width: 1px;
margin: 0rem;
}
.xyzz img {
min-width: 1px;
display: block;
max-width: 100%;
border: 0;
}
.xyzz .gesperrt {
letter-spacing: 0.5rem;
}
}
@media only screen and (min-width: 0px) {
}
/*.innenrahmen*/
@media all {
.xyzz>.innenrahmen {
background-color: oldlace;
padding: 0.5rem;
border: 6px solid khaki;
}
}
@media only screen and (min-width: 0px) {
}
/*artikelheader*/
@media all {
.xyzz .artikelheader h2,
.xyzz .artikelheader p {
text-align: center;
}
.xyzz .artikelheader h2 {
letter-spacing: 0.5rem;
}
.xyzz .artikelheader p {
margin-top: 2rem;
}
}
@media only screen and (min-width: 800px) {
.xyzz .artikelheader h2 {
font-size: 3rem;
}
}
/*.artikel*/
@media all {
.xyzz .artikel {
margin-top: 1rem;
}
}
@media only screen and (min-width: 800px) {
.xyzz .artikel {
display: flex;
flex-wrap: wrap;
}
.xyzz .artikel>* {
margin-top: 2rem;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 100%;
}
}
/*.artikelbilder*/
@media all {
.xyzz .artikelbilder {
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
.xyzz .artikelbilder img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.xyzz .artikelbilder figcaption {
font-size: 1.2rem;
}
@media only screen and (min-width: 800px) {
.xyzz .artikelbilder {
flex-basis: 300px;
}
}
/*.vorteile*/
@media all {
.xyzz .vorteile p {
display: flex;
}
.xyzz .vorteile p::before {
content: url(http://www.machhtml.de/bilder/listenpunkte/stern-gelb.gif);
/*content: url(2017_09_17_drummerteo_ebay_layout_img_02.gif);*/
margin-right: 0.5rem;
}
}
@media only screen and (min-width: 800px) {
.xyzz .vorteile {
flex-basis: calc(100% - 300px - 5rem);
}
}
/*.angebot*/
@media all {
.xyzz .angebot h3 {
text-decoration: underline;
}
.xyzz .angebot p {
margin-top: 1rem;
}
}
@media only screen and (min-width: 0px) {
}
/*.zustand*/
@media all {
.xyzz .zustand p {
margin: 0.3rem 0rem;
display: flex;
}
.xyzz .zustand p::before {
content: url(http://www.machhtml.de/bilder/listenpunkte/pfeil06.gif);
/*content: url(2017_09_17_drummerteo_ebay_layout_img_03.gif);*/
margin-right: 0.5rem;
}
.xyzz .zustand p:nth-last-of-type(1)::before {
content: url(http://www.machhtml.de/bilder/listenpunkte/pfeil05.gif);
/*content: url(2017_09_17_drummerteo_ebay_layout_img_04.gif);*/
margin-right: 0.5rem;
}
}
@media only screen and (min-width: 0px) {
}
/*.versand*/
@media all {
.xyzz .versand {
background-color: moccasin;
padding: 0.5rem;
border: 4px outset sandybrown;
margin: 2rem auto;
}
.xyzz .versand p:nth-of-type(1) {
font-weight: bold;
}
.xyzz .versand p:nth-of-type(1n+2) {
margin: 0.3rem 0rem;
display: flex;
}
.xyzz .versand p:nth-of-type(1n+2)::before {
content: url(http://www.machhtml.de/bilder/listenpunkte/kugel-gruen-03.gif);
/*content: url(2017_09_17_drummerteo_ebay_layout_img_05.gif);*/
margin-right: 0.5rem;
}
}
@media only screen and (min-width: 800px) {
.xyzz .versand {
max-width: 750px;
margin-left: auto;
margin-right: auto;
}
}
/*.markenhinweis*/
@media all {
}
@media only screen and (min-width: 0px) {
}
/*.artikelfooter*/
@media all {
.xyzz .artikelfooter {
margin-top: 2rem;
}
.xyzz .artikelfooter span {
text-decoration: underline;
}
.xyzz .artikelfooter span:nth-of-type(1) {
font-weight: bold;
}
}
@media only screen and (min-width: 0px) {
}
</style>
<article class="xyzz">
<section class="innenrahmen">
<header class="artikelheader">
<h2>Tupper­ware</h2>
<p>...von Retro bis aktuell - Topware zu Toppreisen!</p>
<p class="gesperrt">Gute Ware hat auch einen guten Preis!</p>
</header>
<article class="artikel">
<figure class="artikelbilder">
<img src="http://toyland67.bplaced.net/Haushaltswaren/Tupperware/DSC04243.JPG" alt="Produktbild">
<figcaption>Weitere Fotos siehe oben links.</figcaption>
</figure>
<div class="vorteile">
<h3>Vorteile von Tupperware</h3>
<p>robust, stabil</p>
<p>hochwertiges Material</p>
<p>spül­maschinen­fest</p>
<p>lange Lebens­dauer</p>
<p>Markenqualität seit 70 Jahren</p>
</div>
<div class="angebot">
<h3>Artikel: 4 bunte Schüsseln a 450 ml</h3>
<p>Diese bunte Mischung aus 4 verschienen Servier­schüsseln ergeben eine gelungene Komposition; alle schließen perfekt </p>
<p class="fett">Alle von uns angebotenen Tupperware-Produkte wurden geprüft und sind allesamt maschinen­gereinigt!</p>
</div>
<div class="zustand">
<h3>Zustand:</h3>
<p>gut</p>
<p>mit leichten Gebrauchs­spuren</p>
<p class="rotpfeil">keine groben Mängel erkennbar</p>
</div>
<div class="versand">
<p>Sie zahlen nur 1x Versand­kosten - egal wieviel Sie kaufen!</p>
<h3>Versand- und Ver­packungs­kosten:</h3>
<p>innerhalb Deutschland DHL versichert 3,99 EUR</p>
<p>Weitere auf Anfrage</p>
</div>
<div class="markenhinweis">
<p>Der Name "Tupperware" ist rechtlich geschützt und dient lediglich dazu, um den hier beschriebenen Artikel zu identi­fizieren, da dieser Bestandteil dieses Angebots ist.</p>
</div>
</article>
<footer class="artikelfooter">
<p><span>Hinweis:</span> Gemäß § 19 UStG enthält der Rechnungs­betrag <span>keine Umsatz­steuer</span>.</p>
</footer>
</section>
</article>
Alles anzeigen
Wobei das eine eins-zu-eins-Umsetzung deiner Beispielseite ist. Um daraus eine Vorlage oder Template zu machen müsste ich alle Vorgaben wissen, die erfüllt werden müssen. Das wird meinen möglichen Zeitrahmen erfahrungsgemäß sprengen. Als Grundlage für eine Vorlage oder ein Template ist meine Seite aber durchaus geeignet, da sie auf aktuellem HTML und CSS beruht sowie alle aktuellen Ebay-Voraussetzungen erfüllt.
Zitat
Vielleicht schaffe ich das dann ja auch alleine - wäre supernett von dir, wenn du mich kurz anleiten würdest.
Ich beantworte im Rahmen des Forums gerne einzelne, konkrete Fragen. Schulungen oder Grundlagenwissen kann (und will) ich aber nicht ersetzen. Dafür gibt es genügend Bücher, Videotrainings, VHS-Kurse oder kostenpflichtige Angebote.
Gruss
MrMurphy
