+- Javascript-forum (https://javascript-forum.de)
+-- Forum: Entwicklung (https://javascript-forum.de/forumdisplay.php?fid=4)
+--- Forum: Javascript (https://javascript-forum.de/forumdisplay.php?fid=6)
+--- Thema: Bilod verlinken ohne <a> Element drum herum (/showthread.php?tid=494)
Bilod verlinken ohne <a> Element drum herum - admin - 18.04.2022
Ich habe folgende frage in einem Forum gefunden
Code
<div class ="kachel">
<img src="image.png" />
<a href="link.html">Mehr Details</a>
<div>
Nun möchte ich das ganze so mit CSS verändern, dass die Kachel als Link klickbar ist. Dabei möchte ich nur CSS und Pseudo Selektoren benutzen. Also ::before, ::after und overflow: hidden. Die html soll dabei nicht verändert werden. Geht das?
Meine Antwort von BASTI1012
Meinst du das so
RE: Bilod verlinken ohne <a> Element drum herum - admin - 18.04.2022
Eher so, hast du vieleicht noch eine bessere Lösungsidee? Das mit der width: 399px finde ich noch nicht so optimal.
<html>
<head>
<style>
.kachel{
border:20px black solid;
position: relative;
height: auto;
width: 399px;
}
a:before{
content: '';
position: absolute;
width:400px;
height:400px;
bottom: 0px;
}
</style>
</head>
<body>
<div class="kachel">
<img src="image.png" />
<a href="beitrag.html">Mehr Details</a>
</div>
</body>
</html>
RE: Bilod verlinken ohne <a> Element drum herum - admin - 18.04.2022
wie meinst du das den genau? wie kommst du den auf 399px ? Schreib da doch eine kleinere Zahl rein .Wie sieht das Originalbild den aus? Ist das 399 pixel lang oder wie ? Die größe ist ja eigentlich egal,du mußt dann den before Bereich halt so groß wie das Bid machen dann sollte die größe eigentlich egal sein. Hast du mal ein Link zum Originalbild ? Oder zu einen Bild was ungefähr die gleiche größe hat ?
Wo soll den die Schrift "Mehr Details" stehen ? Unter dem Bild oder mitten drinne ?
RE: Bilod verlinken ohne <a> Element drum herum - admin - 18.04.2022
Naja, ich dachte es gäbe noch eine andere Lösung, weil du ja von overflow:hidden; gesprochen hast. Das Problem ist, dass sobald ich die Kachel 400px groß mache, sich die link box nach rechts daneben verschiebt.
Das Bild ist reinfach nur 400px gro?. so wie das hier: https://www.artgalerie-bildershop.de/item/images/1081392/400x700/327-00119FG-0.jpg
RE: Bilod verlinken ohne <a> Element drum herum - admin - 18.04.2022
Das overflow hidden ist ja dafür da das der Überschuss ausgeblendet wird. Wenn man aber feste Größen verteilt sollte es auch ohne overflow gehen.
Man muss bei festen Größen halt alle anderen Größen in diesen fall ja auch anpassen.
Ich habe erstmal dein Bild so gemacht wie du es haben wolltest. Denke mal dass ich das so richtig verstanden habe.
Pfalz ich es falsch verstanden habe, meld dich .