Bild Ausschnitt zeigen HTML, CSS?
Hallo Miteinander, meine Frage wäre, wie ich mit Hilfe von HTML und CSS genau diesen Bildausschnitt zusammen mit dem Kreis schaffe... Kennst sich jemand evtl. in diesem Themengebiet aus? LG, Jan
2 Antworten
Öffne einfach die Entwicklerkonsole, dann siehst du, wie es gemacht wurde.
Einen Kreis macht man in CSS, indem man einem Element
border-radius: 50%;
gibt.
Natürlich will man nicht ein extra Element einfügen nur um da einen runden Rand zuhaben, deshalb könnte man z.B. das before/after Pseudo-Element verwenden:
#info::before {
content: "";
position: absolute;
left: calc(-300vh + 500px);
height: 300vh;
width: 300vh;
top: -100vh; /* (300 - 100) / 2 */
border-radius: 50%;
background-color: #F4F0EC;
z-index: -1;
}
Beispiel: https://jsfiddle.net/7ptadun4/1/
Hallo Jan,
welchen Kreis meinst du? Die Map müsstest du mit einer API einfügen. Da wären wir aber dann schon wieder im Javascript bereich. Ansonsten könntest du die Map als Bild einfügen, was zwar nicht so praktisch wäre, aber trotzdem zeigen würde, wo sich das Gebäude befindet.
Willst du, dass man dir dein Beispiel codiert? Denn du könntest, soweit ich das sehe bist du ja auf dieser Website, einfach rechtsklick machen auf untersuchen und dann kannst du mit der Maus auf die einzelnen Elemente klicken. Dann wird dir auf der rechten Seite der Code angezeigt, welcher dieses Element beschreibt. Dann musst du nur noch in der CSS Datei schauen, wo das HTML Element gestylt wird.
Ich gehe mal davon aus, dass du Grundkenntnisse in HTML und CSS hast.
Mit freundlichen Grüßen
Kai
Ok. Also als erstes der HTML Teil.
Zuerst erstelle ich den Info Kasten links oben in der Ecke. Hierzu erstelle ich einen div, in dessen ich ein div für das Icon erstelle. (Hier könnte man auch per svg ein icon extern einfügen, aber da habe ich auf die schnelle nichts gefunden). Dann erstelle ich ein p Element für den Text. Überall natürlich auch eine Id für die Bearbeitung mit CSS hinzufügen.
<!--Obere linke Kasten-->
<div id="info">
<div id="info-icon"></div>
<p>Wir bieten auch in der aktuellen Situation weiterhin alle Dienstleistungen für Sie an.</p>
</div>
Als nächstes erstelle ich einen div für den rest auf der linken Seite. Hier erstelle ich dann auch div´s in div´s um eine Struktur zu erhalten, womit man dann gut in CSS damit arbeiten kann. Die DOM Struktur sollte dir bekannt sein? svg´s tue ich extern hinzufügen. Den code dafür habe ich von einer Website kopiert, die diese icons bereitstellt. Schau es dir mal durch und frage nach, wenn du etwas nicht verstehtst.
<div id="linkeSeiteKasten">
<!--Jetz geschlossen-->
<div id="geschlossenundinfo">
<div id="geschlossen">Jetzt geschlossen</div>
<p id="info">- Heute seit 15 Uhr</p>
</div>
<!--Adresse-->
<div id="adresse">
<p>Optiker Bode in Geesthacht, Geesthachter Straße 2</p>
</div>
<!--E-mail Adresse und Telefon-->
<div id="emailUndTelefon">
<div id="email">
<!--Mit svg tue ich extern das Icon hinzufügen. Einfach nach Icons svg suchen und den Code kopieren und einfügen-->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
</svg>
<p>ino@optiker-bode.de</p>
</div>
<div id="telefon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
</svg>
<p>(04152) 2692</p>
</div>
</div>
<!--Termin vereinbaren Button-->
<button type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
<p>Termin vereinbaren</p>
</button>
</div>
Zum Schluss kommt dann noch das Bild da man ansonsten für eine Map Javascript braucht. Diese habe ich dann nicht mehr in einem div, sondern spreche es dann direkt an, da wir hier nur ein Bild haben und es somit dann einfacher geht.
<img src="Pfad/ zu deinem Image" alt="Location">
@Splatoon278, ja hab ich auch schon, finde da aber nichts richtiges irgendwie haha, ja nen Code-Beispiel wäre wirklich sehr nett... LG, Jan