Pseudo Selektoren - before, after

    Hi, ich habe folgenden HTML Code:

    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?

    He? Setz das <a> Am anfang und schon ist alles klickbar.

    Da brauch man schon etwas mehr Info was du genau willst . Was ist in der kachel alles drinne ? Nur das Bild und der Link ? Beinhaltet die kachel noch andere sachen ? Wozu brauchst du before und after ?

    Hast du dazu noch mehr Code wie Css ? Oder ein Link zur Seite ?


    EDITalso ein Bild verlinken tut mn so dazu braues keine Css oder so

    Code
    <a href="http://google.de" class="kachel"><img src="bildlink.png"></a>

    Ich weiß zwar wie man ein Bild verlinkt, aber die Aufgabe soll mit CSS gelöst werden. Ich darf das <a> nicht an den Anfang setzen, die html soll unverändert bleiben. Ich soll dafür nur CSS verwenden mit Pseudo Selektoren und Positions. Also:

    position:relativ, position: absolute, ::before, ::after und overflow:hidden sollen verwendent werden.


    Der Link soll überall in der Box klickbar sein. Es kommt nicht auf genaue Abstände an. Es soll wie in einem Online-Shop sein. Mehr Infos gib es leider nicht.

    Da muß ich erstmal selber kucken wie das geht .Zumindest bin ich gerade überfragt. Ich denke mal das Javascript dann auch verboten ist.

    Ich probiere das mal aus weil das verwirrt mich gerade etwas.


    EDIT:

    Ich mußte erstmal denken was überhaupt gemeint wahr ,aber kein problem.

    Da ich nix posten darf muß ich versuchen das zu erklären wie ich es gemacht habe.

    1 div bekommt overflow hidden.

    2 div ist so groß wie das Bild oder andere feste größe

    3 a bekommt before

    4 a before bekommt background transparent oder none

    5 a before wird mit position verschoben "0" und bekommt die gleich größe wie das Bild

    Damit ist das Ganze Bild klickbar ohne irgendwas am html zu ändern.

    Ich hoffe die kurze erklärung reicht,weil ich kann nicht gut erklären und


    Ich würde gerne Links dazu posten,aber weiß nicht nach was ich suchen sollte .Meines wissens ist das nicht gang und gebe so ein Bild zu verlinken.Ich habe das so noch nicht gesehen oder so.


    Sind ds Hausaufgaben von der Uni? Oder woher bekommt man solche Aufgaben?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden