• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

intuitiv7

intuitiv7

Neues Mitglied
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:

HTML: 
<!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/[email protected]/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/[email protected]/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 …
 
Werbung:
CSS: 
max-width: 1080px !important; /* Bild wird nie breiter als der Container */
width: 100% !important;
So würde ich es machen, funktionert das?
 
Werbung:
@intuitiv7 Ohne Bootstrap und mit Popover ließe sich das sehr gut machen aber wenn ich dir das zeige, laufe ich Gefahr, dass
  1. Du es ablehnst weil Du an Bootstrap hängst
  2. Du auf Hover bestehst
  3. Du auf Selfhtml eine Lösung findest und nicht mehr interessiert bist
 
Werbung:
Ich programmiere nicht eine ganze Seite neu, nur ein kleiner Teil nicht geht.
Zum Vergrößern anklicken....
Ich sehe da noch mehr, das im Argen liegt:
  • Das Bild mit der Reithalle ist nicht zentriert und rechts abgeschnitten, wenn das Browserfenster nicht sehr breit ist.
  • Der Button, der es öffnet, ist kaum zu erkennen.
  • Das Popup über das Nebengebäude ist unten abgeschnitten wenn das Browserfenster nicht hoch genug ist.
  • Der Button, der es öffnet, wandert je nach Breite des Browserfensters aus dem Bild heraus.
  • Auf einem Touch-Gerät sind die Popups nicht sichtbar, da durch Hover geöffnet.
 
Interessant, dass Du überhaupt was gefunden hast - das gezeigte HTML schien mir zuerst wie ein Snippet, das das Problem nicht zeigt. Aber das war wohl ein Irrtum. Das Bild Taegliche_Aktivitaeten01.jpg fehlt auch. Ich hatte es durch einen 1080x2025 Placeholder ersetzt, aber dann wird das Ganze nicht nur zu breit, sondern auch irrsinnig hoch. Wer soll da die nötigen Kilometer scrollen, um die Bullets zu finden?! Bzw. man braucht einen sehr schmalen Viewport - aber dann kommen die von Dir genannten Probleme mit dem Reithallenbild. Ich nehme an, die beiden Bullets sollen auf dem richtigen Bild an einer bestimmten Stelle liegen. Bei breiten Viewports (min-width: 1200px) geht das dann auch schief, weil der Hotspot-Wrapper nicht breitenlimitiert ist.

Aber die breite, soll nicht überschritten werden
Zum Vergrößern anklicken....

Ein "zu breit" lässt sich am Placeholder jedenfalls nicht erkennen - und mir ist auch gar nicht klar, was "zu breit" meint. Das Bild selbst jedenfalls nicht, das lässt Bootstrap mit seinen Mediabreaks schön von Breite zu Breite hüpfen - ich habe den gegebenen Code in ein Fiddle kopiert und ein bisschen damit gespielt.

Ein schmaler Hotspot-Wrapper (< 1080px) verkleinert das Bild, ist er breiter, bleibt das Bild auf 1080px limitiert und die Bullets wandern aus den Bild hinaus. Ob eine max-width Angabe am Hotspot-Wrapper das Problem löst? Keine Ahnung, dazu müsste das Problem erstmal richtig spezifiziert und das erwartete Verhalten dokumentiert werden.

Auf die RICHTIGEN Probleme wie Unbedienbarkeit (die Bullets sind nicht fokussierbar) und wildes Scrollbar-Gehüpfe sind wir dann gar nicht mehr eingegangen, sondern haben seinen Thread zugemacht, weil er anfing, auf den Crossposting-Hinweis hin rumzupöbeln und die Nachfrage nach einer Konkretisierung und einer Onlineversion damit quittierte, dass er die offline halten will.

Rolf B
 
Nach wie vor komme ich nicht weiter, und bin deshalb bereit mein geliebtes Bootstrap vollständig rausschmeißen. Ich möchte eine Gesundheitsapp dokumentieren, deshalb möchte ich am liebsten mit Image Maps arbeiten.

Ich habe nur die Option, mit JPG zu arbeiten, da ich Bildschirmfotos von APP verwende. SVG bekomme ich nicht umgewandelt wie gewünscht. Aber ich benötige eine Möglichkeit Bereiche mit CSS hervorzuheben, damit der Besucher der Seite erkennen kann, wo er klicken muss …
 
Werbung:
bin deshalb bereit mein geliebtes Bootstrap vollständig rausschmeißen.
Zum Vergrößern anklicken....
Das brauchst Du gar nicht, es ist bloß so, dassBootstrap mit einer Inflation von Mediaqueries bei deinem div.container mit der Breite macht was es will. Als erste Maßnahme einfach nur die Klasse "container" dort heraus werfen, dann wird gleich alles leichter.

Bedeuten die Aussagen in dem zweiten Abschnitt, dass der Code in deinem ersten Posting nur eine Demo ist und das Bild mit der Reithalle nur ein Beispiel? Und dass es in der endgültigen Version viel mehr Punkte gibt, wo man klicken kann? Für solch eine Aufgabe (keine polygonförmigen Bereiche) ist die Lösung, die Du mit CSS begonnen hast, vollkommen ausreichend.
 
So stellt sich schon mal die Breite so ein, dass die natürliche Größe nicht überschritten wird:
Code: 
<!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/[email protected]/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>
        body {
            text-align: center;
        }

        .wrapper {
            /* Die Breite soll entspr. Inhalt eingestellt werden: */
            display: inline-block;
        }

        .wrapper>img.background {
            width: 100%;
            max-width: 1024px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <img class="background" src="images/0a.jpg" alt="Image Map">
    </div>

    <!-- Bootstrap JavaScript (falls benötigt) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
(Mein Testbild hat eine Breite von 1024px, daher keine 1080 wie bei dir.)
 
Zuletzt bearbeitet:
... und mit animiertem Popover. Die Zentrierung habe ich auf Flex umgestellt, damit auch vertikal zentriert wird, denn das Popover wird in Bezug auf das Browserfenster zentriert. Außerdem braucht man dann keine absolute Breite anzugeben.
Code: 
<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Map mit Popover</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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>
        html,
        body {
            min-height: 100vh;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .wrapper {
            /* Ausgehend von seiner natürlichen Größe (auto), die durch
            das Bild darin bestimmt ist,  soll der Container
            nicht wachsen (0) aber schrumpfen (1): */
            flex-basis: auto;
            flex-grow: 0;
            flex-shrink: 1;
            position: relative;
        }

        .wrapper>img.background {
            /* Das Bild soll den Container vollständig ausfüllen: */
            width: 100%;
        }

        button.HotSpot {
            position: absolute;
            vertical-align: top;
            background-color: transparent;
            border: none;
        }

        [popover] {
            display: block;
            transform: scale(0);
            transition: transform 0.5s;
        }

        [popover]:popover-open {
            transform: scale(1);
        }

        #HotSpot1 {
            font-size: 2.5em;
            top: 83%;
            left: 2%;
        }

        #popover-1 p {
            margin: 0;
            padding: 1em;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <img class="background" src="images/0a.jpg" alt="Image Map">
        <!-- Der Button, durch den das Popover geöffnet wird -->
        <button id="HotSpot1" class="HotSpot bullet" popovertarget="popover-1">
            <i class="fa-regular fa-circle-dot"></i> <!-- Symbol -->
        </button>
    </div>
    <div id="popover-1" popover="auto">
        <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>
    </div>

    <!-- Bootstrap JavaScript (falls benötigt) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
 
Zuletzt bearbeitet:
  • Sad
Reaktionen: msi
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben