zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden PNG (alpha) über einem LINK - Hover Problem

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.06.2009, 04:11
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2009
Beiträge: 6
theviper06 befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.06.2009, 07:34
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

Zitat:
Zitat von theviper06 Beitrag anzeigen
Leider ist nun mein Link nicht mehr anklickbar.
Klar.

Je nachdem, wie das grafisch aufgebaut ist könnte man die Grafik zerstückeln und einen Teil dem Link als Hintergrund mitgeben.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 17.06.2009, 13:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.05.2009
Beiträge: 6
theviper06 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 17.06.2009, 13:11
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 17.06.2009, 13:37
Benutzer
neuer user
 
Registriert seit: 15.07.2007
Beiträge: 38
Weksel befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 17.06.2009, 14:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 14.03.2007
Ort: Bad Schmiedeberg
Beiträge: 1.395
regloh wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 17.06.2009, 15:02
Benutzer
neuer user
 
Registriert seit: 15.07.2007
Beiträge: 38
Weksel befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 17.06.2009, 15:10
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Zitat:
Zitat von Weksel Beitrag anzeigen
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?
Und wenn JavaScript nicht aktiv ist, wird nichts gezählt, das entsprechende Element bekommt keine neue ID und das Logo ist unvollständig, ne. Unzeireichende Lösung meiner Meinung nach. Der einzige (für mich praktikable Weg) ich wie der von regloh. Auf die Überlappung verzichten.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #9 (permalink)  
Alt 17.06.2009, 15:17
Benutzerbild von mantiz
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.02.2007
Beiträge: 2.843
mantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz seinmantiz kann auf vieles stolz sein
Standard

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>
Wenn man nun die Grafik für den Menüpunkt nicht a, sondern li als Hintergrund gibt, dann könnte man diese vom Header überlappen lassen, anschließend könnte man dann a über diese Überlappung schieben (position:relative, z-index: X), den Text nach links rausschieben, a selbst erhält aber keinen Hintergrund und ist somit transparent.

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 17.06.2009, 17:04
Neuer Benutzer
neuer user
 
Registriert seit: 05.06.2009
Beiträge: 27
cheza befindet sich auf einem aufstrebenden Ast
Standard

Das geht mit Positioning + z-Index
Der Trick:

HTML-Code:
<div id="Menu"> 
     <a></a>
</div>
<div id="Bild"></div>
Anker auf "position: relative"
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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:40 Uhr.