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

keine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 14: Zeile 14:
.logo-bild-container {
.logo-bild-container {
     display: grid;
     display: grid;
     grid-template-columns: repeat(12, 1fr); /* Erstellt ein 12-Spalten-Grid */
     grid-template-columns: repeat(12, 1fr); /* 12-Spalten-Grid für detaillierte Kontrolle */
     grid-template-rows: repeat(auto-fill, minmax(10px, auto)); /* Erstellt viele kleine Zeileneinheiten */
     grid-template-rows: repeat(20, minmax(5px, auto)); /* Viele kleine Zeileneinheiten für das Logo und Bild */
     width: 100%; /* Container nimmt volle Breite ein */
     width: 100%; /* Container nimmt volle Breite ein */
    grid-gap: 10px; /* Optional: Abstand zwischen den Zeilen und Spalten */
}
}


/* Stil für das Logo */
/* Stil für das Logo */
.logo {
.logo {
     grid-column: span 10; /* Nimmt bis zu 10 der 12 Spalten ein, um unter 85% Breite zu bleiben */
     grid-column: 1 / -1; /* Logo nimmt alle Spalten ein, aber mit max-width begrenzt */
     grid-row: 1; /* Beginnt in der ersten Zeile */
     grid-row: 1 / 6; /* Logo beginnt in der ersten Zeile und erstreckt sich über einige Zeilen */
     max-width: 85%; /* Beschränkt die Breite des Logos auf maximal 85% */
     max-width: 85%; /* Beschränkt die Breite des Logos auf maximal 85% */
     max-height: 110px; /* Beschränkt die Höhe des Logos auf maximal 110px */
     max-height: 110px; /* Beschränkt die Höhe des Logos auf maximal 110px */
Zeile 32: Zeile 31:
/* Stil für den Bild-Container */
/* Stil für den Bild-Container */
.bild {
.bild {
     grid-column: 1 / -1; /* Bild erstreckt sich von der ersten bis zur letzten Spalte */
     grid-column: 1 / -1; /* Bild erstreckt sich über alle Spalten */
     grid-row: 2; /* Bild beginnt in der zweiten Zeile, direkt unter dem Logo */
     grid-row: 5 / -1; /* Bild beginnt in einer Zeile, die sich mit dem Logo überschneidet */
     width: 100%; /* Nimmt die volle Breite ein */
     width: 100%; /* Nimmt die volle Breite ein */
}
}