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

Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Zeile 14: Zeile 14:
.logo-bild-container {
.logo-bild-container {
     display: grid;
     display: grid;
     grid-template-rows: auto 20px 1fr; /* Drei Zeilen: für Logo, Abstand, und Bild */
    grid-template-columns: auto 1fr; /* Zwei Spalten: für Logo und restlichen Platz */
     grid-template-rows: auto 1fr; /* Zwei Zeilen: für die Höhe des Logos und das Bild */
     width: 100%;
     width: 100%;
    position: relative; /* Ermöglicht die Überlagerung des Logos über das Bild */
}
}


/* Stil für das Logo */
/* Stil für das Logo */
.logo {
.logo {
     grid-row: 1 / 3; /* Logo beginnt in der ersten Zeile und erstreckt sich bis in die zweite */
    grid-column: 1 / 2; /* Logo in der ersten Spalte */
     grid-row: 1 / 2; /* Logo in der ersten Zeile */
     z-index: 2; /* Stellt sicher, dass das Logo über dem Bild liegt */
     z-index: 2; /* Stellt sicher, dass das Logo über dem Bild liegt */
     /* Stellen Sie sicher, dass das Logo-Element sich der Größe des Logos anpasst */
     /* Passen Sie die Höhe oder Breite des Logos an, um sicherzustellen, dass es nicht zu groß ist */
}
}


/* Stil für den Bild-Container */
/* Stil für den Bild-Container */
.bild {
.bild {
     grid-row: 2 / 4; /* Bild beginnt in der zweiten Zeile und erstreckt sich nach unten */
    grid-column: 1 / -1; /* Bild erstreckt sich von der ersten bis zur letzten Spalte */
     grid-row: 1 / 3; /* Bild beginnt in der ersten Zeile und erstreckt sich nach unten */
     width: 100%; /* Nimmt die volle Breite ein */
     width: 100%; /* Nimmt die volle Breite ein */
     /* Weitere Bild-Stile nach Bedarf */
     position: relative;
    top: -20px; /* Optional: Verschiebt das Bild leicht nach oben, sodass es unter dem Logo beginnt */
}
}


Zeile 36: Zeile 39:
.bild img {
.bild img {
     width: 100%; /* Bild nimmt volle Breite ein */
     width: 100%; /* Bild nimmt volle Breite ein */
     position: relative; /* Ermöglicht feine Positionierung innerhalb des Containers */
     height: auto; /* Höhe passt sich dem Seitenverhältnis des Bildes an */
    top: -20px; /* Verschiebt das Bild nach oben, unter das Logo */
     /* Weitere Bild-Stile nach Bedarf */
     /* Weitere Bild-Stile nach Bedarf */
}
}