Hintergrundbild nicht anklickbar

  • Hallo meine Lieben,

    ich wurde gebeten, auf dieser Seite:
    http://www.flairforce.com/index.php

    Das Logo oben "Flair Force - Cocktailshows & Catering" anklickbar zu machen. Es handelt sich dabei aber um ein CSS-Hintergrundbild eines Divs. Ein solches Hintergrundbild kann man - glaube ich - nicht anklickbar machen.

    Hat jemand eine Idee, wie ich das Logo trotzdem anklickbar machen kann, ohne die Seite komplett umzubauen?

    Danke und viele Grüße,
    hijacker

  • Du nimmst dein Hintergrund raus, machst dort ein <img> tag und setzt das Bild dort rein - sollte keine große Umstellung sein. Von dem was ich gesehen hab, ist der Schriftzug eine eigenständige Grafik.

    Packst also den Schriftzug in <a href="..."><img src="..." alt="..." width="..." height="..." /></a>.

    Deine 2te Möglichkeit: komplett durchsichtige .gif oder .png Grafik genauso wie oben beschrieben einbinden, dann bleibt der Hintergrund zwar so wie es ist, allerdings hast du eine anklickbare Grafik (die keiner sehen kann) davor. Ist keine schöne Lösung, aber müsste so auch gehen ;)

  • Alternativ kann ein Link natürlich auch einen Div-Container umschließen, dem (via CSS) wiederum ein Hintergrundbild zugewiesen wurde.

    Code
    <a href="*" ...><div id="mithintergrundbild"></div></a>


    Code
    #mithintergrundbild{
        (ggf.) position: absolut (?)
        background:url(hntergrundbild.jpg) no-repeat left top;
        width: ...
        height: ...
    }

    Viele Grüße!
    PINALES

    Rechtschreibung für alle!

  • Alternativ kann ein Link natürlich auch einen Div-Container umschließen, ...


    Nein, kann er nicht. In Links sind nur Inline-Elemente erlaubt. Mit Blockelementen funktioniert es auch nur in einigen Browsern. Es ist aber in keinem Fall standardkonform. Acht nicht in der Variante Transitional.

    mfg Friedel

  • Man kann dem <a> tag auch eine id/class verpassen und es als blockelement definieren (display: block; ) - dann hast du es auch ohne ein div. Wie Friedel schon schrieb, ist es mit einem <div> nicht valide.

  • oder oder oder...
    es gbt wie immer viele wege die nach rom führen aber nur wenige sind valide :)
    du könntest des ganze mit nem span inerhalb des a-tags lösen und beidem, dem span wie dem a nen display:block verpassen.

    ich würde aber auch zur variante mit dem img tendieren :)