Autor |
Nachricht |
FRIIIEEK
Threadersteller
Dabei seit: 27.08.2006
Ort: Düsseldorf
Alter: 39
Geschlecht:
|
Verfasst So 27.08.2006 12:17
Titel IE und der z-index mit background-image |
|
|
jaaa genau, ich bin Neuling hier... und sofort fordere ich etwas von der Community!
Entschuldigt dafür... ich werd mich revanchieren!
und natürlich habe ich sofort eine komplizierte Frage, die mir seit etwa einer halben Woche auf der Milz liegt.
Ich bastele derzeit an einer kleinen Seite für eine kleinere künstlerische Veranstaltung. Zu sehen hier:Closeyes
Jedenfalls hatte ich vor, die Navigation rechts mit "animierten" background-images zu machen. Als Beispiel zu sehen hier.
Jetzt soll aber, sobald man mit der Maus drüberfährt nicht nur die Schrift aufleuchten, so wie es bereits geschieht, sondern auch links noch der unter den Bildern versteckte Beschreibungstext erscheinen. Genau diesen Effekt wollte ich mit dem Z-Index erzeugen. Funktioniert auch in Opera und Firefox perfekt. Zu sehen als Beispiel im vierten Punkt bei Riechen und Schmecken.
Naja, lediglich der IE macht noch Probleme.
Hat jemand ne Idee woran das liegen kann, was ich ändern muss, oder ist mein Ansatz schon völlig falsch?
Ich jedenfalls weiss jetzt erstmal nicht mehr weiter... Ich geb zurück ins Studio.
.greetz
FRIIIEEK
[edit]
Titel geändert
Keine Eyecatcher im Titel verwenden.
Zuletzt bearbeitet von tacker am So 27.08.2006 19:11, insgesamt 3-mal bearbeitet
|
|
|
|
|
xitrix
Dabei seit: 04.10.2005
Ort: Detmold
Alter: 101
Geschlecht:
|
Verfasst Di 29.08.2006 14:00
Titel
|
|
|
geht im IE nur per javascript leider. drecksding das
|
|
|
|
|
Anzeige
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 29.08.2006 14:23
Titel
|
|
|
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Tooltips</title>
<style type="text/css">
#left {
width:400px;
height:300px;
float:left;
background:#333;
}
#right {
width:200px;
height:300px;
float:left;
background:#666;
}
/* hier beginnt dann der für dich interessante Teil */
a:link, a:visited {
position:relative;
color:#FF6600;
}
a:hover, a:active {
color:#333;
background:transparent;
}
a:link span, a:visited span {
display:none;
}
a:hover span {
position:absolute;
top:0;
left:-126px;
display:block;
z-index:1;
padding:3px;
width:120px;
background:#fff;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right">
<a href="#">Test<span>Tooltip</span></a> Test Test <br />
<a href="#">Test<span>Tooltip</span></a> Test Test <br />
<a href="#">Test<span>Tooltip</span></a> Test Test <br />
<a href="#">Test<span>Tooltip</span></a> Test Test <br />
<a href="#">Test<span>Tooltip</span></a> Test Test <br />
</div>
</body>
</html> |
Versuchs mal mit der Methode..
Zuletzt bearbeitet von m am Di 29.08.2006 14:24, insgesamt 1-mal bearbeitet
|
|
|
|
|
FRIIIEEK
Threadersteller
Dabei seit: 27.08.2006
Ort: Düsseldorf
Alter: 39
Geschlecht:
|
Verfasst Do 31.08.2006 13:21
Titel
|
|
|
danke für eure hilfe.
hatte nicht mehr damit gerechnet ne antwort zu kriegen
und hab jetzt das problem ganz umgangen.
ich wechsel jetzt das BG-img im hover und active status, dadurch kann ich auch die übergroßen linkflächen vermeiden.
GIF machts möglich, dass man kaum ladezeit für den HOVER-status benötigt.
wer sichs anschauen möchte: www.closeyes.de
danke trotzdem für die angebotene Hilfe! ihr seid super!
.greetz
FRIIIEEK
@m:
Ich werd mir mal überlegen die Seite dahingehend zu überarbeiten. Nach einer solchen Lösung habe ich gesucht!
Vielen Dank!
********* THREAD CLOSED ***********
Zuletzt bearbeitet von FRIIIEEK am Do 31.08.2006 13:26, insgesamt 2-mal bearbeitet
|
|
|
|
|
|
|
|
Ähnliche Themen |
CSS background-image mit em ?
background-image & FF
[CSS] Background-image INE
CSS background-image
[CSS] alt-tag für background-image?
Imagemap auf CSS Background Image ?
|
|