Hallo Zusammen,
würde gerne im Template "mod_article" einen weiteren Continer um das DIV "ce_text" einfügen, um noch mehr Gestaltungsmöglichkeiten zu haben.
Wie kann ich das lösen?
Danke Euch für Eure Hilfe!
Eine gute Zeit
LG aus Dülmen
Ralf Peters
Druckbare Version
Hallo Zusammen,
würde gerne im Template "mod_article" einen weiteren Continer um das DIV "ce_text" einfügen, um noch mehr Gestaltungsmöglichkeiten zu haben.
Wie kann ich das lösen?
Danke Euch für Eure Hilfe!
Eine gute Zeit
LG aus Dülmen
Ralf Peters
Im mod_article Template kannst du das nicht machen - das umschließt ja alle Inhaltselemente. Die Anpassung kannst du über das ce_text Template machen.
Danke für deine schnelle Antwort.Zitat:
Zitat von Spooky
Lg
Habe das hier gefunden. Ist das nicht im Template umgesetzt?Anhang 27531
Mag ja sein, aber wenn Du in Deinem Artikel mehrere Elemente hast, dann wird das zusätzliche div aus mod_article um alle Inhaltselemente gelegt. Es kommt also immer drauf an was man genau erreichen will und welches Markup man dazu benötigt.
Heutzutage kann man sehr viel auch schon ohne zusätzliche divs erreichen, z.B. Grid und Subgrid oder Grid und benannte Linien oder Grid und Template Areas.
Danke Dir!!Zitat:
Zitat von mlweb
Würde gerne dieses Layout umsetzen??!!Anhang 27533
Danke für Deine Hilfe!!
Lg Ralf
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. ????
Zitat:
Zitat von lucina
Werde ich nachher mal probieren. Danke Dir!!
LG Ralf
position relative auf den Artikel. Position absolute auf das Bild.
Top -100px, left 100px - Dem Bild eine Width und fertig:
https://www.mediaevent.de/css/positi...tiv-float.html
https://www.w3schools.com/css/css_positioning.asp
Aufpassen mit overflows, potenziell mit einem Padding oder Margin bisschen Puffer geben.
Je nach Stacking-Context auch mit z-index arbeiten