HTML in Artikelbeschreibung , verschiebt dann im Shop die Ansicht?

[TMF]

Hallo,

HTML siehet soweit super aus nur im shop nicht ?

was kann ich machen ?

habe als Bespiel folgendes HTML:

meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style type="text/css">* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 30px;
}
header {
text-align: center;
padding: 20px 0;
margin-bottom: 30px;
border-bottom: 2px solid #3498db;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 2.2em;
}
.subtitle {
color: #7f8c8d;
font-size: 1.2em;
margin-bottom: 20px;
}
.product-info {
margin-bottom: 30px;
padding: 25px;
background: #f1f8ff;
border-radius: 8px;
border-left: 5px solid #3498db;
}
.product-info p {
margin-bottom: 15px;
font-size: 1.05em;
}
.compatibility-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 30px;
}
.compatible, .incompatible {
flex: 1;
min-width: 300px;
padding: 20px;
border-radius: 8px;
}
.compatible {
background: #f0f9f0;
border-left: 5px solid #2ecc71;
}
.incompatible {
background: #fef0f0;
border-left: 5px solid #e74c3c;
}
h3 {
margin-bottom: 15px;
color: #2c3e50;
}
ul {
padding-left: 20px;
margin-bottom: 15px;
}
li {
margin-bottom: 8px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
thead {
background-color: #3498db;
color: white;
}
th, td {
padding: 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: #f5f9ff;
}
.note {
background: #fff8e1;
padding: 15px;
border-radius: 5px;
margin: 20px 0;
border-left: 5px solid #ffc107;
}
.part-number {
background: #2c3e50;
color: white;
padding: 5px 10px;
border-radius: 4px;
font-weight: bold;
display: inline-block;
margin: 5px 0;
font-family: monospace;
}
footer {
text-align: center;
margin-top: 30px;
color: #7f8c8d;
font-size: 0.9em;
padding-top: 20px;
border-top: 1px solid #eee;
}
@media (max-width: 768px) {
.compatibility-section {
flex-direction: column;
}
th, td {
padding: 10px;
}
}
</style>
<div class="container">
<header>
<h1>10mm Tall Bar Mount Spacers</h1>

<p class="subtitle">Aluminium-Spacer zur Erh&ouml;hung der Lenkerhalterungen</p>
</header>

<div class="product-info">
<p>Diese 10 mm hohen Aluminium-Spacer k&ouml;nnen verwendet werden, um die H&ouml;he unserer Lenkerhalterungen zu erh&ouml;hen. Hergestellt aus hochwertigem Aluminium f&uuml;r optimale Stabilit&auml;t und Langlebigkeit.</p>
</div>

<div class="compatibility-section">
<div class="compatible">
<h3>✅ Kompatible Lenkerhalterungen</h3>

<ul>
<li>AF-BBM00-CA</li>
<li>KX-BBM00-CA</li>
<li>KX-BBM78-00</li>
<li>MX-BBM00-CA</li>
<li>CR-BBM78-00</li>
<li>RM-BBM07-CA</li>
<li>YZ-BBM00-CA</li>
</ul>
</div>

<div class="incompatible">
<h3>❌ Nicht kompatible Lenkerhalterungen</h3>

<ul>
<li>KT-BBM00-CA (KTM/Husqvarna/GasGas)</li>
</ul>
</div>
</div>

<div class="note">
<p><strong>Hinweis:</strong> F&uuml;r eine ordnungsgem&auml;&szlig;e Installation sind m&ouml;glicherweise zus&auml;tzliche Teile erforderlich:</p>

<ul>
<li>F&uuml;r AF-BBM00-CA &amp; AF-BBM85-CA: <span class="part-number">Bolt Kit YZ-76225-KT</span></li>
<li>F&uuml;r KX-BBM00-CA, KX-BBM78-00, RM-BBM08-CA: <span class="part-number">Post CR-BMS00-SS</span></li>
<li>F&uuml;r MX-BBM00-CA, CR-BMS78-00, YZ-BBM00-CA &amp; RM-BBM07-CA: <span class="part-number">Post CR-BMS10-SS</span></li>
</ul>
</div>

<h2>Kompatibilit&auml;ts&uuml;bersicht</h2>

<table>
<thead>
<tr>
<th>Kompatible Dreifachklemmen</th>
<th>Erforderliche Zubeh&ouml;rteile</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alle Ride Engineering YZ/YZF Dreifachklemmen</td>
<td>Post CR-BMS10-SS f&uuml;r YZ-BBM00-CA</td>
</tr>
<tr>
<td>Alle Ride Engineering KX/KXF Dreifachklemmen</td>
<td>Post CR-BMS00-SS f&uuml;r KX-BBM00-CA, KX-BBM78-00</td>
</tr>
<tr>
<td>Alle Ride Engineering CR/CRF Dreifachklemmen</td>
<td>Post CR-BMS10-SS f&uuml;r CR-BMS78-00</td>
</tr>
<tr>
<td>Alle Ride Engineering RM/RMZ Dreifachklemmen</td>
<td>Post CR-BMS00-SS f&uuml;r RM-BBM08-CA<br />
Post CR-BMS10-SS f&uuml;r RM-BBM07-CA</td>
</tr>
<tr>
<td>AF-BBM00-CA &amp; AF-BBM85-CA</td>
<td>Bolt Kit YZ-76225-KT</td>
</tr>
</tbody>
</table>

<div class="note">
<p><strong>Anwendungsbereich:</strong> Diese Spacer k&ouml;nnen mit allen Ride Engineering Lenkerhalterungen verwendet werden, au&szlig;er denen f&uuml;r KTM, Husqvarna und GasGas. Sie passen auf alle Ride Engineering YZ/YZF, KX/KXF, CR/CRF und RM/RMZ Dreifachklemmen.</p>
</div>

<footer>
<p>&copy; 2023 Ride Engineering Zubeh&ouml;r Kompatibilit&auml;ts&uuml;bersicht</p>
</footer>
</div>

 

[css-umsetzung]

Was erwartest du, wenn du ohne nachzudenken, den über weiss ich was erstellten Code einfach in deinen content prügelst, dass muss schief gehen.
Ich habe mir das gerade live angeschaut, das sieht nicht aus, als wüsstest du was du da gemacht hast.

Unter anderem überschreibt dein css zum Teil das vorhandene zum shop zugehörige, dann hast du jetzt zwei header, h1 und footer....