20.933
Bearbeitungen
Vorlage:Unternehmen-Entwickler/style.css: Unterschied zwischen den Versionen
Vorlage:Unternehmen-Entwickler/style.css (Quelltext anzeigen)
Version vom 18. März 2024, 09:07 Uhr
, 18 Märzkeine Bearbeitungszusammenfassung
RaWen (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
RaWen (Diskussion | Beiträge) KKeine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
.infobox{ | .infobox{ | ||
background: #f8f8f8; | background: #f8f8f8; | ||
border-radius: 6px; | border-radius: 6px; /* Abgerundete Ecken */ | ||
box-sizing: border-box; | box-sizing: border-box; | ||
max-width: 330px; | max-width: 330px; | ||
| Zeile 17: | Zeile 17: | ||
.logo-bild-container { | .logo-bild-container { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat( | grid-template-columns: repeat(25, 4%); /* 25-Spalten-Grid für minutiöse Kontrolle, jede Spalte 4 % der Infobox breit */ | ||
grid-template-rows: repeat(4, auto) 1fr; /* Automatische Höhe für Logo, Grid verbleibender Platz für Bild */ | grid-template-rows: repeat(4, auto) 1fr; /* Automatische Höhe für Logo, Grid verbleibender Platz für Bild */ | ||
width: 100%; /* Container nimmt volle Breite ein */ | width: 100%; /* Container nimmt volle Breite ein */ | ||
| Zeile 30: | Zeile 30: | ||
grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */ | grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */ | ||
grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */ | grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */ | ||
display: flex; /* | display: flex; /* Logo wird im Grid angeordnet */ | ||
justify-content: center; /* Zentriert das Logo horizontal */ | justify-content: center; /* Zentriert das Logo horizontal */ | ||
align-items: center; /* Zentriert das Logo vertikal */ | align-items: center; /* Zentriert das Logo vertikal */ | ||
padding: 6px; | padding: 6px; | ||
background: #fff; /* Hintergrundfarbe */ | background: #fff; /* Hintergrundfarbe */ | ||
border-radius: 6px; /* Runde Ecken */ | border-radius: 6px; /* Runde Ecken */ | ||
| Zeile 108: | Zeile 108: | ||
align-items: center; /* Zentriert den Text vertikal */ | align-items: center; /* Zentriert den Text vertikal */ | ||
z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */ | z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */ | ||
background: #fff; | background: #fff; | ||
border-radius: 6px; /* Runde Ecken */ | border-radius: 6px; /* Runde Ecken */ | ||
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten für Hervorhebung */ | box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten für Hervorhebung */ | ||
padding: 6px; | padding: 6px; | ||
max-width: 85%; | max-width: 85%; | ||
width: max-content; | width: max-content; | ||
| Zeile 150: | Zeile 150: | ||
.infobox .leaflet-container{ | .infobox .leaflet-container{ | ||
width: 100% !important; /* | width: 100% !important; /* Überschreibt die (inline) width-Anweisung */ | ||
border-radius: 6px; | border-radius: 6px; | ||
margin: 0 auto;} | margin: 0 auto;} | ||