diff --git a/index.html b/index.html index bfdc00b38a39abd9fb6a0177d9d88524449b3722..747625e24cd69abab876be58df38dd604f29c9b5 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@ </tr> <tr data-befund="2"> - <td>TEST</td> + <td></td> <td>Beispiel Osnabrück</td> <td>Dominikus Böhm</td> <td>JAHR</td> diff --git a/style.css b/style.css index 58bb97f1f612494e533390d3fa7b5eb74ee0dca1..c5d9f9f937ce176fd4a9dcc462dfb0a792fd2032 100644 --- a/style.css +++ b/style.css @@ -1,89 +1,92 @@ + .ausgewaehlt { - background-color: #00eaff; /* Beispiel für Hervorhebung */ - border: 2px solid rgb(0, 234, 255); /* Beispiel für Rahmen um die Markierung */ - } - - /* Stil für die Isometrie und die Markierungen */ - .karte { - position: relative; - width: 100%; - height: auto; /* Änderung: Die Höhe automatisch anpassen */ - background-color: #f0f0f0; /* Hintergrundfarbe für die Isometrie */ - } - - .markierung { - position: absolute; - width: 10px; - height: 10px; - background-color: rgba(255, 0, 106, 0.68); /* Farbe der Markierungen */ - border: 2px solid rgba(255, 0, 106, 0.68); - border-radius: 50%; /* Runde Form für die Markierungen */ - cursor: pointer; - } - - /* Stil für die Tabelle */ - table { - border-collapse: collapse; /* Rand zwischen den Zellen entfernen */ - width: 100%; /* Volle Breite verwenden */ - border: 1px solid #ccc; /* Umrandung der Tabelle */ - } - - /* Stil für Tabellenzeilen */ - table tr { - border-bottom: 1px solid #ccc; /* Unterstrich zwischen den Zeilen */ - } - - /* Stil für Tabellenzellen */ - table th, table td { - padding: 8px; /* Abstand zwischen Inhalt und Zelle */ - text-align: left; /* Text links ausrichten */ - border-right: 1px solid #ccc; /* Trennlinien zwischen den Spalten */ - } - - /* Stil für die letzte Spalte */ - table th:last-child, table td:last-child { - border-right: none; /* Keine Trennlinie für die letzte Spalte */ - } - - .container { - display: flex; /* Flexbox verwenden */ - flex-wrap: wrap; /* Neue Zeile für überflüssige Inhalte */ - width: 100%; /* Volle Breite des Containers */ - } - - /* Stil für das Bild */ - .karte-container { - width: 100%; /* Volle Breite des Containers einstellen */ - background-color: #f0f0f0; /* Hintergrundfarbe für das Bild */ - padding: 20px; /* Innenabstand des Containers */ - box-sizing: border-box; /* Box-Modell auf border-box einstellen */ - } - - .karte-container img { - width: 100%; /* Volle Breite des Bildcontainers */ - height: auto; /* Automatische Höhe für das Bild */ + background-color: #00eaff; /* Beispiel für Hervorhebung */ + border: 2px solid rgb(0, 234, 255); /* Beispiel für Rahmen um die Markierung */ +} + +/* Stil für die Isometrie und die Markierungen */ +.isometrie { + position: relative; + width: 100%; + height: 500px; /* Passe die Höhe an deine Isometrie an */ + background-color: #f0f0f0; /* Hintergrundfarbe für die Isometrie */ +} + +.markierung { + position: absolute; + width: 10px; + height: 10px; + background-color: rgba(255, 0, 106, 0.68); /* Farbe der Markierungen */ + border:2px solid rgba(255, 0, 106, 0.68); + border-radius: 50%; /* Runde Form für die Markierungen */ + cursor: pointer; +} +/* Stil für die Tabelle */ +table { + border-collapse: collapse; /* Rand zwischen den Zellen entfernen */ + width: 100%; /* Volle Breite verwenden */ + border: 1px solid #ccc; /* Umrandung der Tabelle */ +} + +/* Stil für Tabellenzeilen */ +table tr { + border-bottom: 1px solid #ccc; /* Unterstrich zwischen den Zeilen */ +} + +/* Stil für Tabellenzellen */ +table th, table td { + padding: 8px; /* Abstand zwischen Inhalt und Zelle */ + text-align: left; /* Text links ausrichten */ + border-right: 1px solid #ccc; /* Trennlinien zwischen den Spalten */ +} + +/* Stil für die letzte Spalte */ +table th:last-child, table td:last-child { + border-right: none; /* Keine Trennlinie für die letzte Spalte */ +} + +/* Gemeinsame Stile */ +.container { + display: flex; + flex-wrap: wrap; /* Ermöglicht das Umschlagen der Elemente auf kleine Bildschirme */ + width: 100%; /* Volle Breite des Containers */ +} + +/* Stil für das Bild */ +.karte-container { + flex: 1; /* Flexbox: Das Bild nimmt den verfügbaren Platz ein */ + max-width: 50%; /* Maximale Breite des Bildcontainers */ + background-color: #f0f0f0; /* Hintergrundfarbe für das Bild */ + padding: 20px; /* Innenabstand des Containers */ + box-sizing: border-box; /* Box-Modell auf border-box einstellen */ +} + +.karte-container img { + width: 100%; /* Volle Breite des Bildcontainers */ + height: auto; /* Automatische Höhe für das Bild */ +} + +/* Stil für die Tabelle */ +.tabelle-container { + flex: 1; /* Flexbox: Die Tabelle nimmt den verfügbaren Platz ein */ + max-width: 50%; /* Maximale Breite der Tabellencontainer */ + padding: 20px; /* Innenabstand des Containers */ + box-sizing: border-box; /* Box-Modell auf border-box einstellen */ + overflow-x: auto; /* Horizontales Scrollen ermöglichen, wenn nötig */ +} + +/* Responsives Verhalten für die Schriftgröße */ +body { + font-size: 16px; /* Standard-Schriftgröße für den Text */ +} + +@media screen and (max-width: 768px) { + body { + font-size: 14px; /* Reduziere die Schriftgröße auf kleinen Bildschirmen */ } - - /* Stil für die Tabelle */ + + .karte-container, .tabelle-container { - width: 100%; /* Volle Breite des Containers einstellen */ - padding: 20px; /* Innenabstand des Containers */ - box-sizing: border-box; /* Box-Modell auf border-box einstellen */ - overflow-x: auto; /* Horizontales Scrollen ermöglichen, wenn nötig */ - } - - /* Responsives Verhalten für die Schriftgröße */ - body { - font-size: 16px; /* Standard-Schriftgröße für den Text */ + max-width: 100%; /* Volle Breite auf kleinen Bildschirmen */ } - - @media screen and (max-width: 768px) { - body { - font-size: 14px; /* Reduziere die Schriftgröße auf kleinen Bildschirmen */ - } - - .karte-container, - .tabelle-container { - width: 100%; /* Volle Breite auf kleinen Bildschirmen */ - } - } \ No newline at end of file +} \ No newline at end of file