intuitiv7: Große CSS-Probleme / in Verbindung mit Bootstrap 5

Beitrag lesen

SELF-Forum

Große CSS-Probleme / in Verbindung mit Bootstrap 5

intuitiv7
– Informationen zu den Bewertungsregeln
Dieser Beitrag wurde gesperrt: Der Beitrag ist unkonstruktiv oder provokativ und trägt zu einer Verschlechterung der Stimmung bei.

Ich mache Webdesign und Webentwicklung seit 30 Jahren, hatte aber letztes Jahr einen Schlaganfall, und habe aktuell ein Problem, bei dem ich nicht weiter, und bin am Verzweifeln …

Die Grafik: Taegliche_Aktivitaet01.jpg wird größer dargestellt, als sie soll, die Maße sind 1080 × 2025 Pixel. Aber die breite, soll nicht überschritten werden, also nicht vergrößert werden. Ich bekomme das nicht hin, und bin am Verzweifeln, so etwas habe ich bisher nicht erlebt in 30 Jahren …

Hier der Quellcode:

Quelltext hier<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leere Seite mit Bootstrap 5</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Font Awesome -->
    <style>
        .HotSpotWrapper {
            display: block;
            position: relative;
            overflow: visible;
        }
        .HotSpotWrapper .HotSpot {
            position: absolute;
            display: block;
            overflow: visible;
        }
        .bullet {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #8c2828; /* Schriftfarbe Weiß */
			font-size: 1.6rem; /* Schriftgröße 2.0 rem */
			border-radius: 50%; /* Runde Form */
        }
        .HotSpot p {
            position: absolute; 
            top: -50px;
            left: 50%; /* Änderung der Positionierung */
            transform: translateX(-50%); /* Zentrieren des Elements horizontal */
            text-align: center;
            color: #ffffff;
            background-color: #4a6a2f;
            border-color: #fff;
            border-width: 1px;
            border-style: solid;
            width: 350px;
            padding: 5px;
            margin: auto;
            font-size: 14pt;
            border-radius: 12px;
            opacity: 0;
            transform: scale(0.0);
            z-index: 99999;
            transition: all 0.5s linear;
        }
        .HotSpot:hover p {
            opacity: 1.0;
            transform: scale(1.0);
        }
        .HotSpot a {
            text-decoration: none;
            color: #fff;
            font-size: 12pt;
            background-color: #00ff00;
            padding: 2px 6px;
            border: 1px solid #fff;
            border-radius: 12px;
        }
        .HotSpot span {
            color: #fff;
            font-size: 20pt;
            font-weight: 900;
            background-color: #4a6a2f;
        }
		 @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0; }
        }

        .blinking-icon {
            animation: blink 5s infinite; /* Dauer von 7 Sekunden */
        }
		.max-width-1080 {
			max-width: 100% !important; /* Bild wird nie breiter als der Container */
			width: auto !important; /* Automatische Breite, um das Seitenverhältnis beizubehalten */
			height: auto !important; /* Automatische Höhe, um das Seitenverhältnis beizubehalten */
			border-radius: 12px !important; /* Runde Ecken mit einem Radius von zwölf Pixeln */
			display: block !important; /* Sicherstellen, dass das Bild als Blockelement behandelt wird */
			margin: 0 auto !important; /* Zentriert das Bild horizontal im Container */
		}

    </style>
</head>
<body>
    <div class="container">
	
	<div class="HotSpotWrapper">
		<img class="max-width-1080" src="Taegliche_Aktivitaet01.jpg" alt="Image Map">
            <!-- Reithalle -->   
            <div class="HotSpot bullet" style="top: 49%; left: 45%;">
                <p><span>Reithalle<br></span><img src="https://www.zella.de/media/images/halle_5.jpg" alt="">
                    <a href="https://www.zella.de/reitbetrieb.html" title="" target="_blank">WEITER</a></p>
               <i class="fa-solid fa-circle-info blinking-icon"></i> <!-- Symbol -->
            </div>
            
            <!-- Nebengebäude -->
            <div class="HotSpot bullet" style="top: 83%; left: 2%;">
                <p><span>Nebengebäude<br></span><br>Zimmer<br>Ferienwohnung N1<br>Ferienwohnung N2<br>Ferienwohnung N3<br><br>
                    <a href="https://www.zella.de/uebernachtung.html" title="" target="_blank">WEITER</a></p>
                <i class="fa-regular fa-circle-dot"></i> <!-- Symbol -->
            </div>
        </div><!-- Hier kannst du deinen Inhalt einfügen -->
   
   </div>

    <!-- Bootstrap JavaScript (falls benötigt) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Sitze seit drei Tagen an dem Problem und komme nicht weiter …, hat jemand bitte eine Idee, was ich übersehe? - ChatGPT findet auch keine Fehler...

Beitrag melden
–
Informationen zu den Bewertungsregeln