Erläuterungen zur Quelltext-Änderung
    in der Tabellen-Ausgangs-Vorlage

  • die roten Texte zeigen Änderungsmöglichkeiten
  • die farbigen Kommentare <!--  --> sind zum besseren verständnis, sie werden in der Auktionsseite nicht sichtbar
  • da ich hier css verwendet habe, wird Dir sicher bei Veränderungen diese Seite eine sehr gute Nachschlag-Hilfe sein: css4you
  • beachte bitte nochmals:
    wenn Du am Quelltext arbeitest, musst Du höchste Genauigkeit walten lassen !!! Schon ein winziges falsches Zeichen oder ein Abstand zuviel oder zu wenig kann alles verschieben oder die Darstellung ganz verhindern! Mach Dir deswegen immer erst eine Sicherheitskopie vom Original bevor du etwas veränderst!

<!-- HINTERGRUND: Code Anfang
(Hier kannst Du das Hintergrundbild ändern - verlinke bitte das Hintergrundbild von Deinem eigenen webspace! ) -->

<style type="text/css">
body { background:url('BILDADRESSE') fixed;}
</style>

<!-- ===== HINTERGRUND: Code Ende ======= -->


<!-- ÜBERSCHRIFT: Code Anfang
(Hier änderst Du die Überschrift=h1, italic=kursiv, bold=fett, 2.2em=Größe, Palatino Linotype=Schriftart, color=Farbe, center=zentriert, padding=Abstand der Überschrift nach allen Seiten-hier könnte man auch den einzelnen Seiten unterschiedliche Abstände geben) -->

<h1 style="font: italic bold 2.2em Palatino Linotype;
color: #A30097;
text-align: center;
padding: 30px;">

Artikelbeschreibung

</h1>

<!-- ====== ÜBERSCHRIFT: Code Ende ==== -->


<!-- TABELLE 1: Code Anfang
(Hier ist die erste Tabelle definiert zentriert=center, Breite=90%, Rahmen=1px) -->

<table align="center" width="90%" border="1">
<tr>


<!-- ===== Bild 1 links: Code Anfang
(diese linke Tabellenzelle ist 45% breit (width), zentriert, Innenabstand (padding) vom Rahmen zum Bild: oben+unten je 30px, links+rechts je 10px, für das Bild wird die Bildadresse (URL) angegeben sowie Breite+evtl. zusätzlich die Höhe=height, das beschleunigt die Ladezeit und ein Alternativtext nützt, wenn das Bild mal ausfällt) ==== -->

<td style="width: 45%; text-align: center; padding: 30px 10px;">
<img src="BILDADRESSE" width="Bildbreite" alt="alternativtext für Bild"></td>

<!-- ===== Bild1 links: Code Ende ==== -->


<!-- == rechter Text zu Bild 1: Code Anfang
(die rechte Tabellenzelle neben dem Bild ist ebenso 45% breit, zusammen mit der linken also die 90% der Gesamt-tabelle, Schriftdefinition (font): kursiv (italic), fett (bold), Größe (1.2em), Schriftart (Arial...) (bei dieser verkürzten Schreibweise ist die Reihenfolge wichtig, sonst wird es nicht ausgeführt)Schriftfarbe (color), Abstand Text zu Rahmen (padding) rundum 30px) == -->

<td style="width: 45%; font: italic bold 1.2em Arial Unicode MS; color: #636363; padding: 30px;">


<!-- hier folgt die Definition der Überschrift der Beschreibung -->

<p style="font: bold 1.5em Palatino Linotype; color: #636363; padding: 30px 0 10px 50px;">Beispieltext</p>

<!--
Die Beschreibung ist als Aufzählungsliste (ul) definiert, unterteilt in einzelne Punkte (li), welche man jeweils noch zusätzlich in der Gestaltung verändern könnte -->

<ul>
<li>Text Text Text:</li>
<li>Text Text Text</li>
<li>Text Text Text</li>
<li>Text Text Text</li>
<li>Text Text Text</li>
<li>Text Text Text</li>
</ul>

</td>

<!-- == rechter Text zu Bild 1: Code Ende == -->

</tr>
</table>

<!-- ====== TABELLE 1: Code Ende ====== -->

<br>

<!-- ====== TABELLE 2: Code Anfang (wie Tabelle 1) ====== -->

<table align="center" width="90%" border="1" >
<tr>


<!-- ===== Bild 2 links: Code Anfang (wie Bild 1) ==== -->

<td style="width: 45%; text-align: center; padding: 30px 10px;">
<img src="BILDADRESSE" width="Bildbreite" alt="alternativtext für Bild"></td>">
</td>

<!-- ==== Bild 2 links: Code Ende ==== -->


<!-- == rechter Text zu Bild2: Code Anfang
(wie Text 1, aber hier nicht mehr detailiert formuliert) == -->

<td style="width: 45%; font: italic bold 1.5em Arial Unicode MS; color: #636363; padding: 60px;">

Text Text Text
Text Text Text

</td>

<!-- == rechter Text zu Bild2: Code Ende == -->

</tr>
</table>

<!-- ====== TABELLE 2: Code Ende ====== -->

<br>

<!-- ====== TABELLE 3: Code Anfang (wie Tabelle 1+2) ====== -->

<table align="center" width="90%" border="1">
<tr>


<!-- ===== Bild 3 links: Code Anfang (wie Bild 1+2) ==== -->

<td style="width: 45%; text-align: center; padding: 30px 10px;">
<img src="BILDADRESSE" width="Bildbreite" alt="alternativtext für Bild">
</td>

<!-- ==== Bild 3 links: Code Ende ==== -->


<!-- == rechter Text zu Bild 3: Code Anfang
(wie Text 1, aber hier nicht mehr detailiert formuliert) == -->

<td style="width: 45%; font: italic bold 1.5em Arial Unicode MS; color: #636363; padding: 60px;">

Text Text Text
Text Text Text

</td>

<!-- == rechter Text zu Bild 3: Code Ende == -->

</tr>
</table>

<!-- ====== TABELLE 3: Code Ende ====== -->


<!-- ====== TEXT unter den Tabellen
(Erklärung zur Schriftformatierung siehe oben, zusätzlich wurden die beiden Hervorhebungen nicht mit css sondern mit html-tags farblich verändert (font color), daher die Schreibweise etwas anders (ohne Bindestrich) ====== -->

<p style="font: bold 1.3em Arial Unicode MS; color: #636363; padding: 60px;">
<font color="#A30097">Versandkosten:</font>
<br>Maxibrief 2,20 EUR trägt Käufer
<br>bei besonderen Versandwünschen bitte <a href="mailto:deine_mail-adresse@xyz">email</a>-Kontakt
<br>
<br><font color="#A30097">Privatverkauf</font> - daher keine Rücknahme oder Gewährleistung
</p>

<!-- =========== TEXT Ende =========== -->

Grafik: Auge