CSS nachträglich in fertige templates - Wie funktioniert sowas?

Drummerteo

Hallo und guten Abend,

ich bin ein absoluter Neuling und kenne mich mit html und Web-Programmierung gar nicht aus. Vor geraumer Zeit habe ich mir mal mit dem Programm KomPozer in tagelanger Arbeit ein ebay-template gebastelt und es dann mit der software MachHtml überarbeitet bzw. erweitert.

Was das Design des templates angeht, bin ich soweit damit zufrieden, das Problem ist nur, dass es nicht responsive ist; und das hätte ich sehr gerne umgesetzt, weiß aber nicht wie das geht bzw. was ich wo im Quellcode verändern muss.

Ich wäre somit sehr dankbar, wenn mir vielleicht mal jemand an dieser Stelle helfen könnte, das Problem zu lösen. Aus diesem Grunde habe ich somit einmal weiter unten den Quellcode eines meiner Nicht-Responsiven Templates aufgelistet.

Es wäre super nett, wenn mir jemand helfen könnte, aus diesem "starren template" ein dynamisches (responsives) template zu schaffen.

Ich danke im Voraus...

freundlicher Gruß
Drummerteo

Quell-Code

HTML

<font rwr="1" size="4" style="font-family:Arial"><font rwr="1" size="4" style="font-family:Arial"><font rwr="1" size="4" style="font-family:Arial">
<font rwr="1" style="font-family: Arial;" size="4"><font rwr="1" style="font-family: Arial;" size="4"><font rwr="1" style="font-family: Arial;" size="4">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title></title>
<br>
<font rwr="1" style="font-family: Arial;" size="4"><font rwr="1" style="font-family: Arial;" size="4">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Tupperware</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<style type="text/css"><!-- #mhv { font-size:1.0em; line-height:normal; }#mhv * { font-size:inherit; line-height:inherit; word-wrap:break-word; }@media (max-width:320px) { #mhv * { word-break:break-all; } }@media (max-width:900px) { .mh-flashgax { display:none; } }--></style>
<br>
<!-- Tabelle Anfang --><!-- Erstellt mit MachHTML - Copyright (C) MachHTML - www.machhtml.de - Alle Rechte vorbehalten. -->
<div style="text-align: center;">
<table style="background-color: rgb(255, 255, 255); margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="position: relative;"><span style="text-align: center; position: absolute; top: 100px; left: -2000px; z-index: -99; color: rgb(239, 239, 239);">machhtml</span>
<table style="margin: 0px auto;" border="0">
<tbody>
<tr>
<td style="padding: 0px;">
<div style="margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); background-image: url(http://www.machthtml.de/deko/d-3dverlauf/d-3dverlauf02r.jpg); background-repeat: repeat-y; background-position: right bottom;">
<div style="margin: 0px; padding: 0px; background-image: url(http://www.machthtml.de/deko/d-3dverlauf/d-3dverlauf02u.jpg); background-repeat: repeat-x; background-position: right bottom;">
<div style="margin: 0px; padding: 0px; background-image: url(http://www.machthtml.de/deko/d-3dverlauf/d-3dverlauf02l.jpg); background-repeat: repeat-y; background-position: left bottom;">
<div style="margin: 0px; padding: 0px; background-image: url(http://www.machthtml.de/deko/d-3dverlauf/d-3dverlauf02o.jpg); background-repeat: repeat-x; background-position: left top;">
<div style="margin: 0px; padding: 0px; background-image: url(http://www.machthtml.de/deko/d-3dverlauf/d-3dverlauf02ro.jpg); background-repeat: no-repeat; background-position: right top;">
<div style="margin: 0px; padding: 0px; background-image: url(http://www.machthtml.de/deko/d-3dverlauf/d-3dverlauf02lo.jpg); background-repeat: no-repeat; background-position: left top;">
<div style="margin: 0px; padding: 0px; background-image: url(http://www.machthtml.de/deko/d-3dverlauf/d-3dverlauf02ru.jpg); background-repeat: no-repeat; background-position: right bottom;">
<div style="margin: 0px; padding: 0px; background-image: url(http://www.machthtml.de/deko/d-3dverlauf/d-3dverlauf02lu.jpg); background-repeat: no-repeat; background-position: left bottom;">
<div style="padding: 20px 30px 0px 20px; text-align: center;">
<table id="mhv" style="border: 6px solid khaki; margin: 0px auto; text-align: center; background-color: oldlace;" border="0">
<tbody>
<tr>
<td style="padding: 10px;">
<div id="mhrdiv0" class="mhrdiv" style="margin: 0px; padding: 0px;">
<table id="mhr" class="mhr" style="background-color: transparent; width: auto; margin-left: auto; margin-right: auto; margin-top: 20px;">
<tbody>
<tr>
<td class="mhsp" style="padding: 0px; height: auto; vertical-align: top;">
<table style="padding: 0px; border-collapse: collapse;">
<tbody>
<tr style="">
<td style="padding: 0px; vertical-align: top;">
<p style="margin: 0px auto; padding: 2px; max-width: 750px; font-family: Verdana; font-size: 1.8em; line-height: normal; font-weight: bold; font-style: normal; color: rgb(223, 0, 0); background-color: transparent; text-align: center;">T
u p p e r w a r e</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="mhrdiv6" class="mhrdiv" style="margin: 0px; padding: 0px;">
<table id="mhr" class="mhr" style="background-color: transparent; width: auto; margin-left: auto; margin-right: auto; margin-top: 2px;">
<tbody>
<tr>
<td class="mhsp" style="padding: 0px; height: auto; vertical-align: top;">
<table style="padding: 0px; border-collapse: collapse;">
<tbody>
<tr style="">
<td style="padding: 0px; vertical-align: top;">
<p style="margin: 0px auto; padding: 2px; max-width: 750px; font-family: Courier New; font-size: 1em; line-height: normal; font-weight: normal; font-style: normal; color: rgb(223, 0, 0); background-color: transparent; text-align: center;">...von
Retro bis aktuell - Topware zu Toppreisen!</p>
<p style="margin: 0px auto; padding: 2px; max-width: 750px; font-family: Courier New; font-size: 1em; line-height: normal; font-weight: normal; font-style: normal; color: rgb(223, 0, 0); background-color: transparent; text-align: center;"><br>
</p>
<p style="margin: 0px auto; padding: 2px; max-width: 750px; font-family: Courier New; font-size: 1em; line-height: normal; font-weight: normal; font-style: normal; color: rgb(223, 0, 0); background-color: transparent; text-align: center;"><br>
</p>
<p style="margin: 0px auto; padding: 2px; max-width: 750px; font-family: Courier New; font-size: 1em; line-height: normal; font-weight: normal; font-style: normal; color: rgb(223, 0, 0); background-color: transparent; text-align: center;"><span style="color: rgb(204, 158, 14; font-family: Arial; font-size: 20px;">G
u t e &nbsp; W a r e &nbsp; h a t &nbsp; a u c h &nbsp; e i n e n
&nbsp; g u t e n &nbsp; P r e i s !</span></p>
<p style="margin: 0px auto; padding: 2px; max-width: 750px; font-family: Courier New; font-size: 1em; line-height: normal; font-weight: normal; font-style: normal; color: rgb(223, 0, 0); background-color: transparent; text-align: center;"><br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="mhrdiv1" class="mhrdiv" style="margin: 0px; padding: 0px;">
<table id="mhr" class="mhr" style="background-color: transparent; width: auto; margin-left: auto; margin-right: auto; margin-top: 70px;">
<tbody>
<tr>
<td class="mhsp" style="padding: 0px; height: auto; vertical-align: top;">
<table style="padding: 0px; border-collapse: collapse;">
<tbody>
<tr style="">
<td style="padding: 0px; vertical-align: top; text-align: center;"><img alt="" src="http://toyland67.bplaced.net/Haushaltswaren/Tupperware/DSC04243.JPG" style="width: 300px; max-width: 300px; height: 225px; margin-left: auto; margin-right: auto;"></td>
</tr>
<tr style="">
<td style="padding: 0px; vertical-align: top;">
<p style="margin: 30px auto 0px; padding: 2px; max-width: 500px; font-family: Courier New; font-size: 0.8em; line-height: normal; font-weight: normal; font-style: normal; color: rgb(223, 0, 0); background-color: transparent; text-align: center;">weitere
Fotos siehe oben links!</p>
</td>
</tr>
</tbody>
</table>
</td>
<td class="mhsp" style="padding: 0px; height: auto; vertical-align: top;">
<table style="padding: 0px; border-collapse: collapse;">
<tbody>
<tr style="">
<td style="padding: 0px; vertical-align: top; text-align: left;">
<p style="padding: 2px; max-width: 300px; font-family: Times New Roman; font-size: 1em; line-height: normal; font-weight: bold; font-style: normal; color: rgb(223, 0, 0); background-color: transparent; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; text-align: left;">&nbsp;Vorteile
von Tupperware<br>
</p>
</td>
</tr>
<tr style="">
<td style="padding: 0px; vertical-align: top; text-align: left;">
<table style="max-width: 300px; font-family: Times New Roman; font-size: 1em; line-height: normal; color: rgb(0, 64, 255); background-color: transparent; text-align: left; margin-left: 10px; margin-top: 0px;" border="0">
<tbody>
<tr>
<td style="width: 25px; padding-right: 5px; vertical-align: top; text-align: right; background-image: url(http://www.machhtml.de/bilder/listenpunkte/stern-gelb.gif); background-repeat: no-repeat; background-position: right 2px;">
<br>
</td>
<td style="padding-left: 5px; text-align: left; vertical-align: top; font-weight: normal; font-style: normal;">robust,
stabil<br>
</td>
</tr>
<tr>
<td style="width: 25px; padding-right: 5px; vertical-align: top; text-align: right; background-image: url(http://www.machhtml.de/bilder/listenpunkte/stern-gelb.gif); background-repeat: no-repeat; background-position: right 2px;">
<br>
</td>
<td style="padding-left: 5px; text-align: left; vertical-align: top; font-weight: normal; font-style: normal;">hochwertiges
Material</td>
</tr>
<tr>
<td style="width: 25px; padding-right: 5px; vertical-align: top; text-align: right; background-image: url(http://www.machhtml.de/bilder/listenpunkte/stern-gelb.gif); background-repeat: no-repeat; background-position: right 2px;">
<br>
</td>
<td style="padding-left: 5px; text-align: left; vertical-align: top; font-weight: normal; font-style: normal;">spülmaschinenfest</td>
</tr>
<tr>
<td style="width: 25px; padding-right: 5px; vertical-align: top; text-align: right; background-image: url(http://www.machhtml.de/bilder/listenpunkte/stern-gelb.gif); background-repeat: no-repeat; background-position: right 2px;">
<br>
</td>
<td style="padding-left: 5px; text-align: left; vertical-align: top; font-weight: normal; font-style: normal;">lange
Lebensdauer</td>
</tr>
<tr>
<td style="width: 25px; padding-right: 5px; vertical-align: top; text-align: right; background-image: url(http://www.machhtml.de/bilder/listenpunkte/stern-gelb.gif); background-repeat: no-repeat; background-position: right 2px;">
<br>
</td>
<td style="padding-left: 5px; text-align: left; vertical-align: top; font-weight: normal; font-style: normal;">Markenqualität
seit 70 Jahren</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="mhrdiv2" class="mhrdiv" style="margin: 0px; padding: 0px;">
<table id="mhr" class="mhr" style="background-color: transparent; width: auto; margin-left: auto; margin-right: auto; margin-top: 60px;">
<tbody>
<tr>
<td class="mhsp" style="padding: 0px; height: auto; vertical-align: top;">
<table style="padding: 0px; border-collapse: collapse;">
<tbody>
<tr style="color: rgb(204, 0, 0);">
<td style="padding: 0px; vertical-align: top;">
<p style="margin: 0px auto; padding: 2px; text-align: left; max-width: 650px; line-height: normal; font-style: normal; background-color: transparent; text-decoration: underline;"><big><font style="" face="Verdana" size="5"><big><b style="">Artikel:&nbsp; 4
bunte Schüsseln a 450 ml<br>
</b></big></font></big></p>
<p style="margin: 0px auto; padding: 2px; text-align: left; max-width: 650px; font-family: &quot;Times New Roman&quot;; line-height: normal; font-weight: normal; font-style: normal; background-color: transparent;"><font size="4"><br>
</font></p>
</td>
</tr>
<tr style="color: rgb(204, 0, 0);">
<td style="padding: 0px; vertical-align: top;">
<p style="margin: 0px auto; padding: 2px; text-align: left; max-width: 650px; font-family: &quot;Times New Roman&quot;; line-height: normal; font-weight: normal; font-style: normal; background-color: transparent;"><font size="3">Diese bunte Mischung aus 4 verschienen Servierschüsseln
ergeben eine gelungene Komposition; alle schließen perfekt<br>
</font></p>
<p style="margin: 0px auto; padding: 2px; text-align: left; max-width: 650px; font-family: &quot;Times New Roman&quot;; line-height: normal; font-weight: normal; font-style: normal; background-color: transparent;"><br>
</p>
<p style="margin: 0px auto; padding: 2px; text-align: left; max-width: 650px; font-family: &quot;Times New Roman&quot;; line-height: normal; font-weight: normal; font-style: normal; background-color: transparent;"><font size="3"><span style="font-weight: bold; text-decoration: underline;"><br>
</span></font></p>
<p style="margin: 0px auto; padding: 2px; text-align: left; max-width: 650px; font-family: &quot;Times New Roman&quot;; line-height: normal; font-weight: normal; font-style: normal; background-color: transparent;"><font size="3"><span style="font-weight: bold;">Alle von uns angebotenen
Tupperware-Produkte wurden geprüft und sind allesamt
maschinen-gereinigt!</span><br>
</font></p>
<p style="margin: 0px auto; padding: 2px; max-width: 650px; font-family: Times New Roman; font-size: 1.2em; line-height: normal; font-weight: normal; font-style: normal; background-color: transparent; text-align: center;"><br>
</p>
<p style="margin: 0px auto; padding: 2px; max-width: 650px; font-family: Times New Roman; font-size: 1.2em; line-height: normal; font-weight: normal; font-style: normal; background-color: transparent; text-align: center;"><br>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="mhrdiv3" class="mhrdiv" style="margin: 0px; padding: 0px;">
<table id="mhr" class="mhr" style="background-color: transparent; width: auto; margin-left: auto; margin-right: auto; margin-top: 10px;">
<tbody>
<tr>
<td class="mhsp" style="padding: 0px; height: auto; vertical-align: top;">
<table style="padding: 0px; border-collapse: collapse; width: 643px; height: 116px;">
<tbody>
<tr style="color: rgb(51, 51, 255);">
<td style="padding: 0px; vertical-align: top;">
<p style="margin: 0px auto; padding: 2px; text-align: left; max-width: 650px; font-family: &quot;Times New Roman&quot;; font-size: 1.2em; line-height: normal; font-weight: bold; font-style: normal; background-color: transparent;">&nbsp;
<u>Zustand:</u></p>
</td>
</tr>
<tr style="">
<td style="padding: 0px; vertical-align: top;">
<table style="margin: 0px auto; max-width: 650px; font-family: Times New Roman; font-size: 1em; line-height: normal; color: rgb(15, 15, 15); background-color: transparent; text-align: left; width: 651px; height: 56px;" border="0">
<tbody>
<tr>
<td style="text-align: center; width: 25px; padding-right: 5px; vertical-align: top; background-image: url(http://www.machhtml.de/bilder/listenpunkte/pfeil06.gif); background-repeat: no-repeat; background-position: right 2px;">
<br>
</td>
<td style="text-align: left; padding-left: 5px; vertical-align: top; font-weight: normal; font-style: normal;"><span style="color: rgb(51, 51, 255);"><span style="font-weight: bold;"></span>gut</span>
<br>
</td>
</tr>
<tr>
<td style="width: 25px; padding-right: 5px; vertical-align: top; text-align: right; background-image: url(http://www.machhtml.de/bilder/listenpunkte/pfeil06.gif); background-repeat: no-repeat; background-position: right 2px;">
<br>
</td>
<td style="padding-left: 5px; text-align: left; vertical-align: top; font-weight: bold; font-style: normal;"><span style="color: rgb(51, 51, 255); font-weight: normal;">mit leichten
Gebrauchsspuren</span><br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="">
<td style="padding: 0px; vertical-align: top;">
<table style="margin: 0px auto; max-width: 650px; font-family: Times New Roman; font-size: 1em; line-height: normal; color: rgb(15, 15, 15); background-color: transparent; text-align: left; width: 655px; height: 30px;" border="0">
<tbody>
<tr>
<td style="width: 25px; padding-right: 5px; vertical-align: top; text-align: right; background-image: url(http://www.machhtml.de/bilder/listenpunkte/pfeil05.gif); background-repeat: no-repeat; background-position: right 2px;">
<br>
</td>
<td style="padding-left: 5px; text-align: left; vertical-align: top; font-weight: normal; font-style: normal;"><span style="color: rgb(51, 51, 255);">keine groben Mängel erkennbar<br>
</span><br>
<br>
<br>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="mhrdiv4" class="mhrdiv" style="margin: 0px; padding: 0px;">
<table id="mhr" class="mhr" style="border: 4px outset sandybrown; background-color: moccasin; width: auto; margin-left: auto; margin-right: auto; margin-top: 10px;">
<tbody>
<tr>
<td class="mhsp" style="padding: 0px; height: auto; vertical-align: top;">
<table style="padding: 0px; border-collapse: collapse;">
<tbody>
<tr style="">
<td style="padding: 0px; vertical-align: top;">
<p style="margin: 0px auto; padding: 2px; max-width: 400px; font-family: Times New Roman; font-size: 1em; line-height: normal; font-weight: bold; font-style: normal; color: rgb(0, 0, 0); background-color: transparent; text-align: left;"><span style="color: rgb(51, 51, 255); font-family: Arial; font-size: 20px;">Sie
zahlen nur 1x Versandkosten - egal wieviel Sie kaufen!</span></p>
<p style="margin: 0px auto; padding: 2px; max-width: 400px; font-family: Times New Roman; font-size: 1em; line-height: normal; font-weight: bold; font-style: normal; color: rgb(0, 0, 0); background-color: transparent; text-align: left;"><br>
</p>
<p style="margin: 0px auto; padding: 2px; max-width: 400px; font-family: Times New Roman; font-size: 1em; line-height: normal; font-weight: bold; font-style: normal; color: rgb(0, 0, 0); background-color: transparent; text-align: left;">Versand-
und Verpackungskosten:</p>
</td>
</tr>
<tr style="">
<td style="padding: 0px; vertical-align: top;">
<table style="margin: 0px auto; max-width: 400px; font-family: Times New Roman; font-size: 1em; line-height: normal; color: rgb(15, 15, 15); background-color: transparent; text-align: left;" border="0">
<tbody>
<tr>
<td style="width: 25px; padding-right: 5px; vertical-align: top; text-align: right; background-image: url(http://www.machhtml.de/bilder/listenpunkte/kugel-gruen-03.gif); background-repeat: no-repeat; background-position: right 2px;">
<br>
</td>
<td style="padding-left: 5px; text-align: left; vertical-align: top; font-weight: normal; font-style: normal;">innerhalb
Deutschland DHL versichert 3,99 EUR</td>
</tr>
<tr>
<td style="width: 25px; padding-right: 5px; vertical-align: top; text-align: right; background-image: url(http://www.machhtml.de/bilder/listenpunkte/kugel-gruen-03.gif); background-repeat: no-repeat; background-position: right 2px;">
<br>
</td>
<td style="padding-left: 5px; text-align: left; vertical-align: top; font-weight: normal; font-style: normal;">Weitere
auf Anfrage</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="mhrdiv5" class="mhrdiv" style="margin: 0px; padding: 0px;">
<table id="mhr" class="mhr" style="background-color: transparent; width: auto; margin-left: auto; margin-right: auto; margin-top: 10px;">
<tbody>
<tr>
<td class="mhsp" style="padding: 0px; height: auto; vertical-align: top;">
<table style="padding: 0px; border-collapse: collapse;">
<tbody>
<tr style="">
<td style="padding: 0px; vertical-align: top;">
<p style="margin: 5px auto; padding: 2px; max-width: 650px; font-family: &quot;Times New Roman&quot;; line-height: normal; font-style: normal; background-color: transparent; text-align: center;"><font size="1"><br>
</font></p>
<p style="margin: 5px auto; padding: 2px; max-width: 650px; font-family: &quot;Times New Roman&quot;; line-height: normal; font-style: normal; background-color: transparent; text-align: center;"><font size="1">Der Name "Tupperware" ist rechtlich geschützt und dient
lediglich dazu, um den hier beschriebenen Artikel zu identifizieren, da
dieser Bestandteil dieses Angebots ist.</font>
</p>
<p style="margin: 5px auto; padding: 2px; max-width: 650px; font-family: Times New Roman; font-size: 1em; line-height: normal; font-weight: bold; font-style: normal; color: rgb(223, 0, 0); background-color: transparent; text-align: center;"><span style="color: rgb(0, 102, 0);"><br>
</span></p>
<p style="margin: 5px auto; padding: 2px; text-align: left; max-width: 650px; font-family: &quot;Times New Roman&quot;; font-size: 1em; line-height: normal; font-style: normal; color: rgb(223, 0, 0); background-color: transparent;"><span style="color: rgb(0, 102, 0);"><b><u>Hinweis:</u> </b>Die
Mehrwertsteuer
(Umsatzsteuer) wird in meinen Rechnungen <span style="text-decoration: underline;">nicht</span> ausgewiesen, da
Kleinunternehmer im Sinne des Paragraphen 19!</span><br>
</p>
<p style="margin: 5px auto; padding: 2px; text-align: left; max-width: 650px; font-family: &quot;Times New Roman&quot;; font-size: 1em; line-height: normal; font-style: normal; color: rgb(223, 0, 0); background-color: transparent;"><span style="color: rgb(0, 102, 0);"><br>
</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div style="margin: 0px; padding: 0px; height: 35px; text-align: right; position: relative;"><a href="http://www.machhtml.de/ebay-vorlagen-kostenlos.html" target="_blank" title="Verkaufsvorlagen kostenlos" style="width: 75px; height: 20px; position: absolute; top: 0px; right: 25px; text-decoration: none;">
</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Tabelle Ende -->
</font></font></font></font></font></font></font></font>

Alles anzeigen

MrMurphy

Hallo

Ich habe mal eine responsive Beispielseite für ein Ebayangebot erstellt. Du kannst ja mal schauen und ausprobieren ob sie deinen Vorstellungen nahekommt.

Die bunte Schrift finde ich fürchterlich, deshalb habe ich sie weggelassen. Sie kann natürlich noch hinzugefügt werden.

Bilder (in dem Beispiel die Tupperbehälter) sollten so bearbeitet werden, dass sie nur so breit sind wie sie maximal angezeigt werden.

Die Schmuckgrafiken im Text sollten durch Icon-Fonts oder ähnliche Möglichkeiten ersetzt werden. Der einfachheit halber habe ich sie aber belassen.

Das CSS kann auch auf einen eigenen Webspace ausgelagert werden.

http://boratb.bplaced.net/index79.html

Gruss

MrMurphy

Drummerteo

Zitat von MrMurphy

Hallo

Ich habe mal eine responsive Beispielseite für ein Ebayangebot erstellt. Du kannst ja mal schauen und ausprobieren ob sie deinen Vorstellungen nahekommt.

Die bunte Schrift finde ich fürchterlich, deshalb habe ich sie weggelassen. Sie kann natürlich noch hinzugefügt werden.

Bilder (in dem Beispiel die Tupperbehälter) sollten so bearbeitet werden, dass sie nur so breit sind wie sie maximal angezeigt werden.

Die Schmuckgrafiken im Text sollten durch Icon-Fonts oder ähnliche Möglichkeiten ersetzt werden. Der einfachheit halber habe ich sie aber belassen.

Das CSS kann auch auf einen eigenen Webspace ausgelagert werden.

http://boratb.bplaced.net/index79.html

Gruss

MrMurphy

Alles anzeigen

Hallo Mr Murphy,

Ich danke dir recht herzlichst für deine Hilfe. Das war sicherlich eine Menge an Arbeit und Zeitaufwand für dich, das alles so zu gestalten, wie du es getan hast - absolut klasse und lieb von Dir.

Wärest du vielleicht bereit das Ganze für 2 weitere templates umzuschreiben bzw. umzuprogrammieren, wenn ich dir die Quell-codes hier nochmal posten würde? Oder falls nicht, kannst du mir vielleicht eine Art Anleitung dazu geben, wie ich das dann möglicherweise selber hinbekommen könnte?

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.

Vielleicht schaffe ich das dann ja auch alleine - wäre supernett von dir, wenn du mich kurz anleiten würdest.

freundlicher Gruß
Drummerteo

MrMurphy

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:

Code

<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&shy;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&shy;maschinen&shy;fest</p>
                  <p>lange Lebens&shy;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&shy;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&shy;gereinigt!</p>
               </div>
               <div class="zustand">
                  <h3>Zustand:</h3>
                  <p>gut</p>
                  <p>mit leichten Gebrauchs&shy;spuren</p>
                  <p class="rotpfeil">keine groben Mängel erkennbar</p>
               </div>
               <div class="versand">
                  <p>Sie zahlen nur 1x Versand&shy;kosten - egal wieviel Sie kaufen!</p>
                  <h3>Versand- und Ver&shy;packungs&shy;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&shy;fizieren, da dieser Bestandteil dieses Angebots ist.</p>
               </div>
            </article>
            <footer class="artikelfooter">
               <p><span>Hinweis:</span> Gemäß § 19 UStG enthält der Rechnungs&shy;betrag <span>keine Umsatz&shy;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

CSS nachträglich in fertige templates - Wie funktioniert sowas?

Tags

Benutzer online in diesem Thema