This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Bilod verlinken ohne <a> Element drum herum
#1
Ich habe folgende frage in einem Forum gefunden
Code
  
  Mehr Details

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 
Zitieren
#2
Eher so, hast du vieleicht noch eine bessere Lösungsidee? Das mit der width: 399px finde ich noch nicht so optimal.

<style>

.kachel{
border:20px black solid;
position: relative;
height: auto;
width: 399px;
}


a:before{
content: '';
position: absolute;
width:400px;
height:400px;
bottom: 0px;
}

</style>

Als Lösung markieren Zitieren
#3
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 ?
Als Lösung markieren Zitieren
#4
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/ite...19FG-0.jpg
Als Lösung markieren Zitieren
#5
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 .
Als Lösung markieren Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste