| Autor |
Nachricht |
funkeffekt
Threadersteller
Dabei seit: 31.03.2005
Ort: -
Alter: 40
Geschlecht: 
|
Verfasst Mi 26.10.2005 21:28
Titel AlphaImageLoader / CSS Navi mit Rollover |
  |
|
Hallo,
ich sitze seit ner Stunde an meiner CSS Navi und komme nicht weiter. Blöder Weise benötige ich bei der Navigation transparente pngs wegen dem Schlagschatten - die Menüpunkte liegen außerhalb der eigentlichen "Oberfläche", der body hat einen gekachelten (strukturierten) Hintergrund.
Das altbekannte Problem, mit der nicht unterstützten Transparenz der pngs im IE, habe ich soweit mit dem AlphaImageLoader gelöst. Funktioniert auch alles schön, außer die Rolloverfunktion. 
Der Code soweit:
| 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>
<title>funkeffekt.design</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url(css/layout.css);
</style>
<!--[if IE]>
<style type="text/css">
@import url(css/iealpha.css);
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="center">
<div id="navi">
<ul id="navi-links">
<li><a href="links.html" id="button-links">Links</a></li>
<li><a href="artcase.html" id="button-artcase">Artcase</a></li>
<li><a href="funkeffekt.html" id="button-funkeffekt">Funkeffekt</a></li>
<li></li>
</ul>
</div>
<div id="main">
<div id="content"></div>
</div>
<div id="right"></div>
</div>
<div id="footer">
<ul id="navi-unten">
<li><a href="impressum.html" id="button-impressum">Impressum</a></li>
</ul>
</div>
</div>
</body>
</html> |
die dazugehörige CSS "layout.css" auf den Menüpunkt "links" in der navi-links reduziert.
| Code: | ul#navi-links {
position:absolute;
z-index:10;
left:0;
top:0;
list-style-type:none;
}
ul#navi-links a {
display:block;
text-decoration:none;
margin:0 2px 0 0;
text-indent:-3000px;
font-size:1px;
}
a#button-links {
width:47px;
height:97px;
top:39px;
left:0;
position:absolute;
}
head:first-child+body a#button-links {
background:url(../images/links.png) 0 0 no-repeat;
}
a#button-links:hover {
width:47px;
height:97px;
top:39px;
left:0;
position:absolute;
}
head:first-child+body a#button-links:hover {
background:url(../images/links.png) -47px 0 no-repeat;
}
|
und die iealpha.css für den AlphaImageLoader hatte ich mir folgendermaßen überlegt:
| Code: | div#button-links a {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/links.png');
}
div#button-links a:hover {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/links.png');
} |
Funktioniert aber nicht.
Ich schätze, dass für den IE der "Befehl" des Verschiebens von links.png 47px nach rechts fehlt, weiß aber nicht so recht, wie ich den einbauen soll.
Hab ich irgendeinen Denkfehler?
Ich hab jetzt schon einiges ausprobiert.
Hilfe 
|
|
| |
  |
 |
Doppelplusgut
Dabei seit: 06.10.2005
Ort: Zimmer 101
Alter: 55
Geschlecht: 
|
Verfasst Mi 26.10.2005 21:35
Titel
|
|
|
Was ist denn das für ne lustige CSS 
Der Validator schlägt auch die Hände über dem Kopf zusammen:
| Zitat: | * Zeile: 2 Kontext : div#button-links a
Versuche ein Semikolon vor dem Eigenschaftsnamen zu finden. Füge es hinzu.
* Zeile: 2 Kontext : div#button-links a
Die Eigenschaft progid existiert nicht : DXImageTransform
* Zeile: 2 Kontext : div#button-links a
Einlese-Fehler - DXImageTransform.Microsoft.AlphaImageLoader(src='images/links.png');
* Zeile: 3 Kontext : div#button-links a
Parse error - Unrecognized : }
* Zeile: 6 Kontext : div#button-links a:hover
Versuche ein Semikolon vor dem Eigenschaftsnamen zu finden. Füge es hinzu.
* Zeile: 6 Kontext : div#button-links a:hover
Die Eigenschaft progid existiert nicht : DXImageTransform
* Zeile: 6 Kontext : div#button-links a:hover
Einlese-Fehler - DXImageTransform.Microsoft.AlphaImageLoader(src='images/links.png');
* Zeile: 7 Kontext : div#button-links a:hover
Parse error - Unrecognized : }
|
Gestatte mir doch mal die Frage, was das für Anweisungen sind, die Du da verwendest, habe ich noch nie gesehen... ist das was Besonderes? Muss man das kennen?
|
|
| |
 |
|
|
Anzeige
|
|
|
funkeffekt
Threadersteller
Dabei seit: 31.03.2005
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Mi 26.10.2005 21:43
Titel
|
|
|
nach Validität hab ich nicht gefragt 
AlphaImageLoader
|
|
| |
|
|
Doppelplusgut
Dabei seit: 06.10.2005
Ort: Zimmer 101
Alter: 55
Geschlecht:
|
Verfasst Mi 26.10.2005 21:51
Titel
|
|
|
| funkeffekt hat geschrieben: | nach Validität hab ich nicht gefragt
AlphaImageLoader |
Ja nee, is klar... kannte das nun mal bis gerade eben nicht; ist das wissentlich ausschließlich für den IE gedacht? Kommen keine Leute mit anderen Browsern auf diese Seite?
|
|
| |
|
|
funkeffekt
Threadersteller
Dabei seit: 31.03.2005
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Mi 26.10.2005 21:56
Titel
|
|
|
ja, nur für den IE, weil der keine transparenten pngs anzeigen kann. Dementsprechend sieht meine Seite scheiße aus, da die Transparenz im IE grau ist. Wundervoll!
Alle anderen Browers können 's ja. Da ist es ja kein Problem.
Dass ziemlich viele User noch den IE benutzen, ist dir sicherlich bewußt, deshalb kann ich die ja nicht ausschließen.
Ich hab 's sogar schon so probiert, dass ich für den IE extra Images und CSS laden lasse, bei der ich die Kachel einfach weggelassen habe, aber das sieht einfach bescheuert aus. Die Kachel rundet das ganze Layout ab, will also nicht unbedingt darauf verzichten, deshalb frage ich ja um Hilfe ..
Zuletzt bearbeitet von funkeffekt am Mi 26.10.2005 21:58, insgesamt 1-mal bearbeitet
|
|
| |
|
|
neele
Dabei seit: 21.08.2004
Ort: Kiel
Alter: 46
Geschlecht:
|
Verfasst Mi 26.10.2005 21:58
Titel
|
|
|
Zeig mal die Seite. 
|
|
| |
|
|
Doppelplusgut
Dabei seit: 06.10.2005
Ort: Zimmer 101
Alter: 55
Geschlecht:
|
Verfasst Mi 26.10.2005 22:01
Titel
|
|
|
Ah jetzt ja, so langsam dämmerts... tja, den IE kann man leider nicht ignorieren, auch wenn es wünschenswert wäre. Wenn ich es richtig verstanden habe (korrigiere mich, wenn ich falsch liege), soll das Dingen bei a:hover um 47px verschoben werden. Hast Du schon mal
| Code: | div#button-links a:hover {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/links.png');
left:47px;
}
|
oder sowas probiert? Ansonsten könnte ggf auch die absolute Positionierung nicht unproblematisch sein
|
|
| |
|
|
funkeffekt
Threadersteller
Dabei seit: 31.03.2005
Ort: -
Alter: 40
Geschlecht:
|
Verfasst Mi 26.10.2005 22:05
Titel
|
|
|
die Seite sieht so aus http://www.funkeffekt.de/index1.html
da ist der AlphaImageLoader noch nicht drin. Im IE hab ich die Kachel weggelassen. Sieht echt fad aus!
@Doppelplusgut: klappt leider nicht 
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[CSS] AlphaImageLoader + Background-Positionierung
AlphaImageLoader greift nicht
CSS UL LI NAVI
Horizontale ul-Navi
3 navi (css) probleme
CSS Navi barrierefrei?
|
|
Willkommen auf dem Portal für Mediengestalter
