mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:54 Benutzername: Passwort: Auto-Login

Thema: Div mit BG-Image "durchklickbar" machen vom 18.07.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Div mit BG-Image "durchklickbar" machen
Seite: 1, 2  Weiter
Autor Nachricht
choise
Threadersteller

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Sa 18.07.2009 00:10
Titel

Div mit BG-Image "durchklickbar" machen

Antworten mit Zitat Zum Seitenanfang

Hi Leute,

ich bins schon wieder, gleiches Projekt, neues Problem Menno!
Ich muss eine Div mit Position:absolute über einige Elemente setzten.
Diese Bekommt noch ein BG-Image gesetzt (transparentes PNG).

Nun möchte ich aber Texte, Links Elemente weiterhin anklickbar machen,
welche sich hinter diesem DIV Element befinden.

ATM schafft/macht das nur der Opera von ganz alleine, soll natürlich auch
im ie6,7,8 - ff - safari gehn.

hier mal ne ansicht wie es wunderbar im Opera geht:




hier noch der link zum online-projekt

Da dieses Div bei manchen Seiten der Webseite über manchen Elementen in der Content Div liegt, würde ich diese nur sehr sehr ungerne in den Hintergrund verbannen um somit per z-index. alles in der Vordergrund zu rücken, was klickbar sein soll.

Hat da jemand eine Idee?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Sa 18.07.2009 16:52
Titel

Antworten mit Zitat Zum Seitenanfang

Eine ähnliche Frage gab es letzten Monat schon einmal:

http://www.mediengestalter.info/forum/4/link-hinter-transparenter-png-anklickbar-machen-129054-1.html

Aber ich befürchte, dass dieser Lösungsansatz dich nicht weiter bringt. * Keine Ahnung... *


Zuletzt bearbeitet von top am Sa 18.07.2009 16:52, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 18.07.2009 17:02
Titel

Antworten mit Zitat Zum Seitenanfang

top hat geschrieben:
Aber ich befürchte, dass dieser Lösungsansatz dich nicht weiter bringt. * Keine Ahnung... *


Ja. Ich würde versuchen den Kunden davon zu überzeugen dass man den Roboter Arm doch besser weglässt muahaha
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 18.07.2009 17:48
Titel

Antworten mit Zitat Zum Seitenanfang

Witzig: beim Firefox gehts, den text durch Doppelklick zu markieren, nur das direkte ziehen geht nicht...

Ähm, mit z-index und Elementreihenfolge im html tauschen mal probieren? Könnte ja evtl. was helfen, aber das kann ich grade nicht probieren, wie die Browser hier reagieren.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
choise
Threadersteller

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Sa 18.07.2009 19:39
Titel

Antworten mit Zitat Zum Seitenanfang

ja, nur leider kann ich das mit z-index nicht regeln, da das bild wie gesagt über dem content liegen muss.
hm schade... da muss ich mir was anderes einfallen lassen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Sa 18.07.2009 20:50
Titel

Antworten mit Zitat Zum Seitenanfang

Schaumal, so würds css-technisch gehen:
http://zweitaccount.zw.ohost.de/durchklickbar/

Nur vom Code her empfiehlt sich das halt nicht
wirklich für eine SEO-Optimierer-Seite Ooops
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 18.07.2009 21:00
Titel

Antworten mit Zitat Zum Seitenanfang

Sollte auch mit position: relative; laufen, was den doppelten Linktext unnötig macht …
Doch sind dann natürlich die Links über der Grafik sichtbar.

Oder, wovon ich ausgehe, die Inhalte sind nicht dynamisch, so dass man alle Breiten der Hyperlinks kennt.
Dann kann man ein leeres span Element auf die Breite des Links anpassen und positionieren.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xml:lang="de" lang="de">
  <head>
    <title>choise</title>
   <style type="text/css">
      * {
         margin: 0;
         padding: 0;
      }
      body {
         font-family: Arial, Helvetica, sans-serif;
         font-size: 12px;
         padding: 30px;
      }
      #arm {
         position: absolute;
         left: 0;
         top: 0;
      }
      p {
         line-height: 140%;
         margin-bottom: 60px;
         width: 800px;
      }
      a span {         
         height: 15px;
         margin-left: -25px;
         position: absolute;
         width: 25px;
      }
   </style>
  </head>
  <body>
   <img src="arm.png" id="arm" />
   <p>At vero eos et accusam et justo duo dolores et ea rebum. <a href="#">Link<span></span></a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
   <p>At vero eos et accusam et justo duo dolores et ea rebum. <a href="#">Link<span></span></a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
   <p>At vero eos et accusam et justo duo dolores et ea rebum. <a href="#">Link<span></span></a> Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </body>
</html>


Was SEO technisch jetzt nicht tragisch wäre. Zur Not könnte man das natürlich auch per Javascript
einfügen und sich somit dann auch das leere span Element sparen.

Ach, einen relative Maßeinheit sollte man schon nutzen in dem Fall *zwinker*


Zuletzt bearbeitet von m am Sa 18.07.2009 21:27, insgesamt 6-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
choise
Threadersteller

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Sa 18.07.2009 21:33
Titel

Antworten mit Zitat Zum Seitenanfang

das ist alles nich so das wahre was?
dachte vielleicht jemand kenn ne .js die man einbindet und gut ist *zwinker*

werde es erstma hinter dem content positionieren. Menno!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen suche ein fall out Image Menu, mit 3 image ebenen
input type=image + image map
image map
CSS background-image mit em ?
[CSS] alt-tag für background-image?
Image in XML exportieren
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.