Andreas: Link Hintergrundbild in der Größe einer Zelle

Hallo,

Ich habe mir ein Menü erstellt mit Links in Zellen. Und wenn ich jetzt mit der Maus über einen Link fahre soll da ein Hintergrundbild in der Größe der Zelle angezeigt werden:

a.MenueCtl:hover {background-image:url('Bilder/Schaltfläche.jpg'); background-repeat:no-repeat; cursor:hand; display:block;}
a.MenueCtl {text-decoration: none; cursor:hand; color:black; display:block}

oder auch allein nur a {display:block}

Das Bild wird mit display:block in der Breite der Zelle angezeigt, aber nicht in der Höhe. Das Bild wird nur so hoch angezeigt wie der Text. Und da gibts kein padding oder margin in den Zellen. Die Zeilenhöhe ist 55px und der Text wird standardmäßig in der Zeilenmitte angezeigt.

Um es villeicht gleich noch mit anzufügen wäre es auch anschaulicher wenn der Text über der Grafik mit einem Randabstand rechts angezeigt werden würde.

Bitte um Hilfe!

Gruß Andreas

  1. Das Bild wird mit display:block in der Breite der Zelle angezeigt, aber nicht in der Höhe. Das Bild wird nur so hoch angezeigt wie der Text. Und da gibts kein padding oder margin in den Zellen. Die Zeilenhöhe ist 55px und der Text wird standardmäßig in der Zeilenmitte angezeigt.

    Der Hintergrund ist nur hinter dem Text, weil Du das Hintergrund dem LINK (a.MenueCtl:hover) zugeordnet hast. Wenn die Links jeweils in einer Tabellenzelle sind, musst Du den Hover-Effekt der Tabellenzelle zuordnen und nicht dem Link-Tag.

    Wenn Du allerdings gleich die Link-Tags als Zellen verwendest, um keine Tabelle bemühen zu müssen, dann gib einfach den Zellen noch eine Höhe und Breite. Durch die Anwendung von display:block; werden die Link-Tags sowieso schon untereinandern angezeigt.

    Grüße, SEBER-RIDER

    1. Ich danke Dir

      Nur an einer anderen Stelle der Seite funktioniert das einwandfrei mit display:blick und es wird nur Farbe angezeigt. Und ich hatte es bereits ausprobiert die Höhe anzugeben in CSS und dann wird der Text jedoch an oberster Stelle angezeigt. Mit vertical-align: middle wollte es auch nicht.

      Sagt display:block nicht das gesamtet Umgebung mit einbezogen werden soll? Und ich benötige die Zellen um wie in einem Register, den Inhalt im Bezug auf die dadurch geöffnete Seite darstellen zu können. Und so dachtte ich das ich den Link mit style="... auf a.MenueCtl zu verweisen.

      Gruß Andreas

      1. Hi,

        Und ich hatte es bereits ausprobiert die Höhe anzugeben in CSS und dann wird der Text jedoch an oberster Stelle angezeigt. Mit vertical-align: middle wollte es auch nicht.

        logisch, wenn Du versucht haben solltest, diese Eigenschaft einem blocklevel Element zuzuweisen.
        Sofern es sich um eine einzeilige Ausgabe handelt, kann Dir line-height helfen.

        Sagt display:block nicht das gesamtet Umgebung mit einbezogen werden soll?

        Die gesamte zur Verfügung stehende Breite - nicht Höhe.

        freundliche Grüße
        Ingo

        1. Hallo

          Es handelt sich hierbei um zweizeilige Einträge. Und wie bekomme ich denn jetzt die Zelle im Gesamten gefüllt? Dann gebe ich height und width in CSS MenueCtl an?

          Danke!
          Und ich werd hier wohl noch einen Rückschlag erleben.

          1. Hi,

            Wenn etwas die Groesse eines Elternelements haben soll, helfen oft eine Breite und Hoehe von 100%. Bei bekannten Massen gehen natuerlich auch Angaben in Pixeln.

            1. Hi,

              Wenn etwas die Groesse eines Elternelements haben soll, helfen oft eine Breite und Hoehe von 100%. Bei bekannten Massen gehen natuerlich auch Angaben in Pixeln.

              Hallo und OK das man auch die Größe angeben kann. Doch steht der Text dann am oberen Rand. Ich brauche Ihn in der Mitte.

              Gruß Andreas

              1. Hi,

                Hallo und OK das man auch die Größe angeben kann. Doch steht der Text dann am oberen Rand. Ich brauche Ihn in der Mitte.

                Vertikale Zentrierung ist zwar kein ganz triviales, aber auch absolut kein neues Thema.

                Statt uns also staendig mitzuteilen, was du "brauchst", koenntest du vielleicht mal anfangen zu Suchen.

                MfG ChrisB