diff --git a/index.html b/index.html index 6f210e6f034c97e5e32a7daf58472654544aed78..bfdc00b38a39abd9fb6a0177d9d88524449b3722 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@ </tr> <tr data-befund="2"> - <td>NAME</td> + <td>TEST</td> <td>Beispiel Osnabrück</td> <td>Dominikus Böhm</td> <td>JAHR</td> diff --git a/style.css b/style.css index f8278ceed6a4303f6771f94d8cfff13c285c3b66..58bb97f1f612494e533390d3fa7b5eb74ee0dca1 100644 --- a/style.css +++ b/style.css @@ -1,86 +1,89 @@ .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: 500px; /* Ä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 */ -} - - -.container { - display: flex; /* Flexbox verwenden */ -} -.isometrie-container { - width: 724px; /* Anpassen an die Breite des alten Bildes */ - height: 1024px; /* Anpassen an die Höhe des alten Bildes */ - padding: 20px; - overflow: hidden; - flex: 1; - border-right: 1px solid #ccc; -} - -.tabelle-container { - flex: 1; /* Flexbox: Aufteilung des verfügbaren Platzes */ - padding: 20px; /* Abstand um die Tabelle */ -} - - - -/* 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 */ + 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 */ } - - .karte-container, + + /* 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 */ + } + + /* Stil für die Tabelle */ .tabelle-container { - width: 100%; /* Volle Breite auf kleinen Bildschirmen */ + 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 */ } -} + + @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