diff --git a/index.html b/index.html index ed169cd6efb2cf9110abe77a9b3ed9d0281ff5ad..0ad8c2d305023f8b63a7e7c577dd05554e2085ba 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@ </tr> <tr data-befund="2"> - <td>TESTEST</td> + <td>NAME</td> <td>Beispiel Osnabrück</td> <td>Dominikus Böhm</td> <td>JAHR</td> diff --git a/style.css b/style.css index e13534f52e342e14b487648bcf10cf7139bdba38..4aa5c00331befe574fc98d38f70be1558c02d609 100644 --- a/style.css +++ b/style.css @@ -1,20 +1,25 @@ +.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: 50%; /* Breite des Bildes auf 50% des verfügbaren Platzes einstellen */ - background-color: #f0f0f0; /* Hintergrundfarbe für die Karte */ - float: left; /* Bild links ausrichten */ + width: 100%; + height: 500px; /* Passe die Höhe an deine Isometrie an */ + background-color: #f0f0f0; /* Hintergrundfarbe für die Isometrie */ } -/* Stil für die Markierungen auf der Karte */ .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: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 */ @@ -38,30 +43,18 @@ table th, table td { table th:last-child, table td:last-child { border-right: none; /* Keine Trennlinie für die letzte Spalte */ } - -/* Flexbox-Container für die Anordnung von Karte und Tabelle */ .container { display: flex; /* Flexbox verwenden */ } - -/* Stil für den Container der Karte */ .karte-container { - width: 50%; /* Breite des Containers auf 50% des verfügbaren Platzes einstellen */ - background-color: #f0f0f0; /* Hintergrundfarbe für die Karte */ - padding: 20px; /* Innenabstand des Containers */ - position: relative; /* Position relativ setzen */ -} - -/* Stil für das Bild der Karte */ -.karte-container img { - width: 100%; /* Volle Breite des Bildcontainers */ - height: auto; /* Automatische Höhe für das Bild */ + padding: 20px; + overflow: hidden; + flex: 1; + border-right: 1px solid #ccc; } -/* Stil für den Container der Tabelle */ .tabelle-container { - width: 50%; /* Breite des Containers auf 50% des verfügbaren Platzes einstellen */ - padding: 20px; /* Innenabstand des Containers */ - box-sizing: border-box; /* Box-Modell auf border-box einstellen */ - overflow-y: auto; /* Vertikales Scrollen aktivieren, wenn nötig */ + flex: 1; /* Flexbox: Aufteilung des verfügbaren Platzes */ + padding: 20px; /* Abstand um die Tabelle */ } +