ChatGPT sagt:
Hier ist ein HTML- und CSS-Code, der das Layout nach dem Muster des hochgeladenen Bildes nachbildet:
HTML-Code:
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ff0000; /* Hintergrundfarbe Rot */
}
.mod_article {
display: flex;
position: relative;
width: 600px; /* Breite des Hauptcontainers */
height: 300px; /* Höhe des Hauptcontainers */
background-color: #ff0000; /* Hintergrundfarbe bleibt Rot */
}
.img {
background-color: #000000; /* Schwarzer Hintergrund */
width: 300px; /* Breite des Bildbereichs */
height: 300px; /* Höhe des Bildbereichs */
}
.ce_text {
background-color: #8b4513; /* Brauner Hintergrund */
width: 150px; /* Breite des Textbereichs */
height: 150px; /* Höhe des Textbereichs */
position: absolute;
right: 10px;
bottom: 10px;
}
HTML-Code:
<body>
<div class="mod_article">
<div class="img"></div>
<div class="ce_text"></div>
</div>
</body>
### Erklärung:
1. **Grundstruktur:**
- Die äußere `.mod_article` ist der Hauptcontainer mit rotem Hintergrund.
- `.img` repräsentiert das schwarze Rechteck.
- `.ce_text` ist das braune Rechteck, das sich in der unteren rechten Ecke befindet.
2. **Positionierung:**
- `.ce_text` ist mit `position: absolute` relativ zu `.mod_article` positioniert, um es in der rechten unteren Ecke zu platzieren.
Du kannst die Maße und Farben nach Bedarf anpassen. ????
Umschließender DIV für ce_text im template mod_article
Zitieren
Zitat von Spooky
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
