|
|||
PNG (alpha) über einem LINK - Hover Problem
Hey,
ich habe leider folgendes Problem: Eine Grafik soll in die Navigationsleiste hineinreichen. Diese ist halb transparent. Nun habe ich die Grafik über die Navigation über "z-index" angeordnet. Leider ist nun mein Link nicht mehr anklickbar. Falls jemand eine Idee hat - ich wäre echt dankbar! LG |
Sponsored Links |
|
|||
Das Problem ist, dass die dynamische Navigation (CMS im Hintergrund) keine Grafik ist sondern dynamischer Text sein soll und der Schatten über der Navigation liegt:
Daher kann ich die Grafik nicht zum Link hinzufügen, denn das Ziel würde sich ja mit der dynamischen Navigation - in Abhängigkeit von den Menüpunkten - immer ändern. LG |
|
|||
Es gibt aber keine Alternativen. Wenn dein Bild den Link überlappt, dann kann man an dieser Stelle den Link nicht anklicken.
Es gibt 2 Möglichkeiten. Die erste hat mantiz bereits erwähnt und die zweite ist, auf die Überlappung zu verzichten. |
|
|||
Ideen, wie du um das Problem vllt herum kommst:
#1 Ist es erforderlich, dass der Linktext auch vom Schatten bedeckt wird? Die Grafik (dunkelblau mit hellblauem Rand oben+unten) auslagern, sodass die Links als Hintergrund nur den vertikalen Strich haben. Nachteil: Es ist eben ein Cms, und Menus verändern sich. Demnach wird dem Schatten wahrscheinlich irgendwann wortwörtlich ein (vertikaler) Strich durch die Rechnung gemacht. #2 CMS direkt ansprechen und für das Item eine Klasse geben lassen Nachteil: Ein CMS Menu verändert sich bekanntlich... #3 JavaScript Das Bild wird sich an einer festen Position befinden. Demnach kannst du dir via JavaScript ausrechnen, welcher Link/welche Links unter dem Bild liegen werden und ihnen entsprechend mittels Js Auszeichnungen geben, was Hintergrund und vor allem Hintergrundposition anbelangt. Vllt kannst du damit etwas anfangen oder bekommst zumindest eine Anregung. Grüße, w3ksel
__________________
Webdesign/-Entwicklung bei der Hamburger Werbeagentur G8media. |
|
|||
Vorschlag #3 wäre wohl das Schlechteste. Ohne JS wäre das Menü dann u.U. unnutzbar oder zumindest wieder der eine Link.
Desweiteren sollte dir bewusst sein, dass der IE<7 (die oft noch zu genutzt werden) keine PNG-Transparenzen unterstützt und dies ebenfalls über ein Javascript lösen muss. Folglich sieht ein User ohne JS nur eine hässlich graue Fläche. Ich bin derzeit immernoch der Meinung, man sollte auf PNG-Transparenzen in der GUI grundlegend vermeiden, solang nicht gewährleistet ist, dass auch ohne PNG-Support alles so nutzbar ist, wie mit Transparenzen. Dazu gehört schon, dass kein Text verdeckt wird, wenn die Transparenzen nicht unterstütz werden, was in deinem Fall so wäre. Lieber die Grafiken stückeln und den Elementen als Hintergrund zuweisen. In deinem Fall ist das natürlich nicht möglich, wenn alles flexibel bleiben soll. Dann musst du dich um andere Alternativen umschauen, die hier wohl nur lauten kann, das Design so umzuändern, dass keine Überlappung entsteht. |
|
|||
Hi Regloh, Absicht bei #3 eventuell unpräzise formuliert:
Es gibt kein überlappendes Bild, stattdessen eine zerschnittene Grafik. Mittels JS werden die jeweiligen Elemente ermittelt, welche unter einer überlappenden Grafik liegen würden, um denen mittels JS den überlappenden Gafikabschnitt als Hintergrund zuzuweisen und so zu positionieren, dass ein nahtloser Übergang entsteht. Somit könnte das Problem mit variablen Menu-Punkten durch ein CMS etc umgangen werden, ein PNG wäre in diesem Fall ebenfalls überflüssig. Nachteil ist eben, dass der senkrechte Strich und der Linktext keinen Schatten erhällt. Aus Interesse, theviper06, wie hast du das Problem gelöst, beziehungsweise hast du vor es zu lösen?
__________________
Webdesign/-Entwicklung bei der Hamburger Werbeagentur G8media. |
|
||||
Eine Möglichkeit fällt mir gerade noch ein, aber das dürfte eine ziemliche Fummelei werden.
Ich gehe mal davon aus, dass das Menü eine ul ist, welche ungefähr so aufgebaut ist: HTML-Code:
<ul id="navi"> <li><a href="#">Menüpunkt 01</a></li> <li><a href="#">Menüpunkt 02</a></li> <!-- ... --> </ul> Müsste man mal ausprobieren, wie man die Grafik mit dem Schatten aus dem Header zwischen li und a aus der Navi bekommt. Problem dabei dann allerdings: IE<7 kann nur a hovern, falls die Navi also ein anderes Bild beim hover erhalten soll, muss hier wieder mit JS getrickst werden, wobei ich das nicht schlimm finden würde, weil außer dem hover auch ohne JS alles funktionieren sollte. Außer es ist ein Dropdown/Fly-out-Menü, dann wird's natürlich brenzliger. |
Sponsored Links |
|
|||
Das geht mit Positioning + z-Index
Der Trick: HTML-Code:
<div id="Menu"> <a></a> </div> <div id="Bild"></div> Bild auf "position: absolute" Und du deinem Anker Element einen z-Index gibst, der höher ist, als der des Bildes, so hast du einen transparenten Layer über dem Bild, ohne die Verschachtelung großartig zu ruinieren. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fertiges Drop-Down Menü ins Layout einfügen | VoB | CSS | 6 | 15.03.2011 17:14 |
ul richtig zentrieren | Muamicus | CSS | 23 | 14.12.2010 19:28 |
span hover element 0 ausrichtung obwohl link padding? | sepp88 | CSS | 2 | 24.09.2009 17:10 |
Link Hover Problem bei Bilder | Deluxxxe | CSS | 7 | 21.09.2009 20:59 |
1. Link in Hover Farbe ? | snuffi | CSS | 2 | 20.02.2004 10:34 |