Autor |
Nachricht |
choise
Threadersteller
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Sa 18.07.2009 00:10
Titel Div mit BG-Image "durchklickbar" machen |
|
|
Hi Leute,
ich bins schon wieder, gleiches Projekt, neues Problem
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?
|
|
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 18.07.2009 17:02
Titel
|
|
|
top hat geschrieben: | Aber ich befürchte, dass dieser Lösungsansatz dich nicht weiter bringt. |
Ja. Ich würde versuchen den Kunden davon zu überzeugen dass man den Roboter Arm doch besser weglässt
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 18.07.2009 17:48
Titel
|
|
|
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.
|
|
|
|
|
choise
Threadersteller
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Sa 18.07.2009 19:39
Titel
|
|
|
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.
|
|
|
|
|
zweitaccount
Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Sa 18.07.2009 21:00
Titel
|
|
|
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
Zuletzt bearbeitet von m am Sa 18.07.2009 21:27, insgesamt 6-mal bearbeitet
|
|
|
|
|
choise
Threadersteller
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Sa 18.07.2009 21:33
Titel
|
|
|
das ist alles nich so das wahre was?
dachte vielleicht jemand kenn ne .js die man einbindet und gut ist
werde es erstma hinter dem content positionieren.
|
|
|
|
|
|
|
|
Ä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
|
|