Große CSS-Probleme / in Verbindung mit Bootstrap 5
intuitiv7
Große CSS-Probleme / in Verbindung mit Bootstrap 5
intuitiv7
Rolf B
Gunnar Bittersmann
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...
-
Hallo intuitiv7,
Sitze seit drei Tagen an dem Problem und komme nicht weiter
sicherlich bist Du in den 3 Tagen so weit gekommen, die Seite online zu stellen? Bitte gib uns einen Link, keine Codewüste.
Und selbst wenn ich es mir kopieren täte - das Taegliche_Aktivitaet01.jpg fehlt.
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.
Welche Breite soll nicht überschritten werden? Dein gezeigtes CSS setzt die Bildbreite auf max-width: 100% und dann width/height auf auto, angeblich um das Seitenverhältnis zu wahren. Das ist schonmal merkwürdig, ein Bild behält eigentlich sein Seitenverhältnis, solange Du nur width ODER height angibst.
Da muss schon deutlich mehr Info kommen.
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Dein gezeigtes CSS setzt die Bildbreite auf max-width: 100% und dann width/height auf auto, angeblich um das Seitenverhältnis zu wahren. Das ist schonmal merkwürdig, ein Bild behält eigentlich sein Seitenverhältnis, solange Du nur width ODER height angibst.
Nein, nicht, wenn man’s richtig macht und
widthundheightim Markup angibt, damit der Browser das Seitenverhältnis des Bilds kennt, bevor es geladen ist, und entsprechend Platz freihält, um später nicht nochmal alles anders machen zu müssen.Siehe Beispiel: die Breite des Bilds kommt vom Stylesheet, die Höhe wird vom Markup übernommen, das Bild wird verzerrt, die Räder sind nicht mehr kreisrund.
Wenn man
(min-)widthsetzt, sollte manheight: autosetzen und andersrum, damit ein Bild sein Seitenverhältnis beibehält.Kwakoni Yiquan
--
Ad astra per aspera-
@@Gunnar Bittersmann
Siehe Beispiel
Warum
Dampf‌­lok? Damit keine fl-Ligatur gesetzt wird, was bei zusammengesetzten Wörtern über Wortteilgrenzen hinweg auch nicht sein soll.ZWNJ verhindert die Ligatur; SHY sorgt dafür, dass an der Stelle ein Zeilenumbruch stattfinden kann.
Man könnte auch Ligaturen mit
font-variant-ligatures: noneausschalten, das betrifft dann aber alle, nicht nur die Stelle, wo keine Ligatur gesetzt werden soll.Kwakoni Yiquan
--
Ad astra per aspera
-
-
Die Seite ist 100 % offline … erst, wenn diese hundertprozentig fertig ist, stellt diese online. Habe einen eigenen Server offline, auf meinem Computer.
-
-
Moin,
Sitze seit drei Tagen an dem Problem und komme nicht weiter …,
Das ist aber kein Grund die gleiche Frage in mehreren Foren zu stellen - das mindeste wäre den jeweils anderen Thread zu verlinken damit sich nicht in einem Forum die Antwortenden Sachen beantworten die längst im anderen Forum gelöst wurden.
Gruß
Tobias-
Dieser Beitrag wurde gesperrt: Der Beitrag ist unkonstruktiv oder provokativ und trägt zu einer Verschlechterung der Stimmung bei.
Moin,
Sitze seit drei Tagen an dem Problem und komme nicht weiter …,
Das ist aber kein Grund die gleiche Frage in mehreren Foren zu stellen - das mindeste wäre den jeweils anderen Thread zu verlinken damit sich nicht in einem Forum die Antwortenden Sachen beantworten die längst im anderen Forum gelöst wurden.
Gruß
TobiasGenau auf solche Antworten solcher Deppen wie dir kann verzichten!
-
@@intuitiv7
Genau auf solche Antworten solcher Deppen wie dir kann verzichten!
Du kannst auf Antworten aller verzichten. Ich mach den Thread zu.
Kwakoni Yiquan
--
Ad astra per aspera
-
-