S
Sebko
New member
- Beiträge
- 2
- Punkte Reaktionen
- 0
Hallo zusammen,
Bin noch HTML Neuling und teste mich da bisschen aus. Ich möchte aktuell einen texte aufklappen lassen durch das Anklicken von einem Bild. Aber nicht direkt unter dem Bild, denn zwischen Bild und Aufklapptext steht noch ein kleiner Text, der dort stehen bleiben soll. Hab es mit einem Sprungziel (a href="#clickopen" und <details> mit id="clickopen") versucht, aber der Text klappt dann nicht auf. Also ich hab einen fixen Text, der stehen bleiben soll, darunter befindet sich ein "Mehr dazu" Button, der ein Text aufklappt. Das funktioniert. Nur über dem fixen Text befindet sich ein Bild, der dann denselben Text aufklappen soll wie der "Mehr dazu" Button.
Kann mir da bitte jemand weiterhelfen?
Der Code sieht bisher so aus:
</html>
Bin noch HTML Neuling und teste mich da bisschen aus. Ich möchte aktuell einen texte aufklappen lassen durch das Anklicken von einem Bild. Aber nicht direkt unter dem Bild, denn zwischen Bild und Aufklapptext steht noch ein kleiner Text, der dort stehen bleiben soll. Hab es mit einem Sprungziel (a href="#clickopen" und <details> mit id="clickopen") versucht, aber der Text klappt dann nicht auf. Also ich hab einen fixen Text, der stehen bleiben soll, darunter befindet sich ein "Mehr dazu" Button, der ein Text aufklappt. Das funktioniert. Nur über dem fixen Text befindet sich ein Bild, der dann denselben Text aufklappen soll wie der "Mehr dazu" Button.
Kann mir da bitte jemand weiterhelfen?
Der Code sieht bisher so aus:
<!DOCTYPE html>
<html>
<div class="Hausmeisterservice"><a href="#clickopen"><img style="display: block; margin-left: auto; margin-right: auto;" src="images/Leistungen/Hausmeisterei1.png" alt="Hausmeisterservice" width="200" height="200" />
<div class="title">Hausmeisterservice</div></div></a>
<br><p style="text-align: center;"><span style="font-size: 14pt;"><strong>Reparaturen, Wartung der Haustechnik, <br />Koordination von Fremdfirmen</strong></span></p>
<details id="clickopen" style="text-align: center;"><summary id="mehr" class="more" style="text-align: center;"><strong>Mehr dazu</strong></summary>
<p style= "text-align: center;" "margin-top: 12px;" >
<ul>
<li class="listssymbol">Kleinreparaturen aller Art</li>
<li class="listssymbol">Bereitstellen und zurückstellen der Mülltonnen bei Abholung</li>
<li class="listssymbol">Reinigung der Mülltonnen bei Bedarf</li>
<li class="listssymbol">Überwachung der Heizanlagen</li>
<li class="listssymbol">Überwachung und Instandhaltung der Haustechnik</li>
<li class="listssymbol">Wartung der Haustechnik</li>
<li class="listssymbol">Ablesen von Zählerständen</li>
<li class="listssymbol">Abwicklung und Überwachung der Brennstofflieferung Öl/Pellets</li>
<li class="listssymbol">Einweisung und Koordination von Fremdfirmen</li>
</ul></p>
</details>
<style>
.Hausmeisterservice {
display: flex;
flex-direction: column;
align-items: center;
}
.Hausmeisterservice:hover {
cursor: pointer;
}
.Hausmeisterservice img {
filter: none;
width: 200px;
height: 200px;
border-radius: 50%;
border: 6px solid AliceBlue;
box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5);
margin-bottom: 1rem;
transition: filter 0.4s ease-in-out;
}
.Hausmeisterservice:hover img {
filter: sepia(100%);
}
.title {
font-weight: bold;
font-family: "Montserrat";
font-size: 25px;
color: black;
position: relative;
}
.title::after {
position: absolute;
content: "";
width: 0%;
height: 4px;
background-color: black;
left: 50%;
bottom: -10px;
transition: all 0.4s ease-in-out;
}
.Hausmeisterservice:hover .title::after {
width: 100%;
left: 0;
}
</style></html>
