Vorlage:Unternehmen-Entwickler/style.css: Unterschied zwischen den Versionen

keine Bearbeitungszusammenfassung
(Test GPT4.0 Grid-System)
 
Keine Bearbeitungszusammenfassung
Zeile 11: Zeile 11:
     padding: 1.4em;}
     padding: 1.4em;}


/* Grid-Container für Logo und Bild */
/* Container für Logo und Bild mit Grid-Layout */
.infobox .logo-bild-container {
.infobox .logo-bild-container {
     display: grid;
     display: grid;
     grid-template-rows: auto 1fr; /* Auto für das Logo, 1fr für das Bild */
     width: 100%; /* Container nimmt volle Breite ein */
     position: relative; /* Für Überlappung des Logos über das Bild */
     position: relative; /* Für die absolute Positionierung des Logos */
}
}


/* Logo-Stil */
/* Stil für das Logo */
.infobox .logo {
.infobox .logo {
     grid-row: 1 / 2;
     position: absolute; /* Absolute Positionierung innerhalb des Grid-Containers */
     align-self: end; /* Positioniert das Logo am unteren Rand seiner Zelle */
     top: 0; /* Logo am oberen Rand des Containers */
    width: 100%; /* Logo nimmt volle Breite ein, passt sich aber der Höhe des Inhalts an */
     z-index: 2; /* Stellt sicher, dass das Logo über dem Bild liegt */
     z-index: 2; /* Stellt sicher, dass das Logo über dem Bild liegt */
     /* Behalten Sie die vorhandenen Logo-Stile bei */
     /* Behalten Sie weitere Stile bei, die für das Logo erforderlich sind */
}
}


/* Bild-Stil */
/* Bild-Container */
.infobox .bild {
.infobox .bild {
     grid-row: 1 / 3; /* Lässt das Bild unter dem Logo beginnen und die volle Höhe einnehmen */
     grid-row: 1; /* Bild im ersten Grid-Bereich */
     /* Bild-Stile, die sichergestellen, dass es die volle Breite einnimmt */
    width: 100%; /* Bild-Container nimmt volle Breite ein */
     /* Behalten Sie weitere Stile bei, die für den Bild-Container erforderlich sind */
}
}


.infobox .bild img {
.bild img {
     width: 100%;
     width: 100%; /* Bild nimmt volle Breite des Containers ein */
    border-radius: 6px; /* Optional, für abgerundete Ecken */
     height: auto; /* Höhe passt sich dem Seitenverhältnis des Bildes an */
     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Optional, für Schatten */
     /* Behalten Sie weitere Stile bei, die für das Bild erforderlich sind */
     /* Weitere Bild-Stile nach Bedarf */
}
}
/* Aspekt-Gruppen */


.infobox .aspect-group{
.infobox .aspect-group{