Oliver Rosenkranz: Link-Text mittig über Hintergrund-Grafik

Hallo Experts,

ich arbeite gerade an einer Webseite, für die ich mehrere "Buttons" brauche, die ich frei auf der Webseite verschieben können muss.

Dabei war die Idee, mit mehreren DIV-Elementen zu arbeiten, deren einziges Element ein Link (<a>...</a>) ist.

Konkret:
.
.
.
<body>
<DIV ID="bt1" STYLE="position:absolute; visibility:hidden; left:0; top:0; width:247; height:70; z-index:11; name:'bt1';">
<A style="background-image:url(button.gif); width:247px; height:70px; color:#8E8E8E; text-align:center; vertical-align:middle; text-decoration:none;" HREF="blabla">linktext</A>
</DIV>
.
.
.
</body>

Dieser Button ist zuerst unsichtbar... später wird dann sowohl die Position und Sichtbarkeit, als auch HREF-Teil und der Text per Javascript gesetzt. Das funktioniert auch soweit.

Mein Problem:

Ich möchte mittels CSS (jetzt aber erst mal direkt im Element) angeben, dass der Linktext genau mittig zentriert (sowohl horizontal als auch vertikal) angezeigt wird. Horizontal funktioniert... vertikal aber nicht ! Das heisst, das Hintergrund-Bild taucht auf und der Text liegt ganz oben, horizontal mittig auf dem Hintergrundbild.

Anzeigebrowser ist der neueste Internet Explorer (wird nur lokal angezeigt... (IE soll nach Möglichkeit auch bleiben).

Weiss jemand Abhilfe??

Oliver Rosenkranz
o.rosenkranz@estensis.de

  1. hi,

    Dabei war die Idee, mit mehreren DIV-Elementen zu arbeiten, deren einziges Element ein Link (<a>...</a>) ist.

    Und wozu das Div?
    Positioniere doch direkt das A, und weise ihm auch die sonstigen Eigenschaften zu.

    Ich möchte mittels CSS (jetzt aber erst mal direkt im Element) angeben, dass der Linktext genau mittig zentriert (sowohl horizontal als auch vertikal) angezeigt wird. Horizontal funktioniert... vertikal aber nicht ! Das heisst, das Hintergrund-Bild taucht auf und der Text liegt ganz oben, horizontal mittig auf dem Hintergrundbild.

    FAQ(!): Wie zentriere ich Elemente mit CSS?

    Ggf. auch padding oder line-height in Betracht ziehen.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Und wozu das Div?

      Ich hab's nicht geschrieben, aber später kommen noch mehrere Elemente dazu, und die können dann eben bequem zusammen bewegt werden :-))

      FAQ(!): Wie zentriere ich Elemente mit CSS?

      Ggf. auch padding oder line-height in Betracht ziehen.

      Urghh... war mir ein bisschen zu unübersichtlich. Vor allem, weil ich nichts konkret zur Vertikal-Positionierung von inline-Elementen gefunden habe.

      Trotzdem, die Lösung ist inzwischen gefunden (siehe anderes Posting) und ich Danke Dir für Deine Hilfsbereitschaft.

      Oliver

  2. Hallo,

    ich tippe, dass dein Problem damit zu tun hat, dass dein Element <a> zunächst einmal ein Inline-Element ist.
    Eine vertikale Positionierung funktioniert nur bei Block-Elemeten bzw. Tabellenzellen. vertical-align:middle; denke ich nur bei Tabellen zellen.
    Aber deine Konstruktion würde sowieso zerfallen, wenn der Betracher die Schriftgrösse ändert.

    irgendwie in diese Richtung:
    display:block
    repeat: no-repaeat
    font-size: 1em
    padding:0.5em 0 0.3em 0

    Ich denke so in etwa könnte es laufen

    bydey

    --
    -- bydey ist die Signatur und Verabschiedung, nicht der Nick --
    -- Navigate all your PHP web projects with  PHP Project Browser--
    1. Hi,

      Aber deine Konstruktion würde sowieso zerfallen, wenn der Betracher die Schriftgrösse ändert.

      Okay... idas wäre im Alltag kein Problem, da die PCs alle gleich konfiguriert wären, aber trotzdem Danke für den Hinweis.

      irgendwie in diese Richtung:
      display:block
      repeat: no-repaeat
      font-size: 1em
      padding:0.5em 0 0.3em 0

      Ich denke so in etwa könnte es laufen

      Ja... so geht's. Vielen Dank...

      Problem gelöst. Thread closed. :-))