mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 06.12.2016 17:08 Benutzername: Passwort: Auto-Login

Thema: AlphaImageLoader / CSS Navi mit Rollover vom 26.10.2005


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> AlphaImageLoader / CSS Navi mit Rollover
Seite: 1, 2, 3, 4  Weiter
Autor Nachricht
funkeffekt
Threadersteller

Dabei seit: 31.03.2005
Ort: -
Alter: 33
Geschlecht: Weiblich
Verfasst Mi 26.10.2005 20:28
Titel

AlphaImageLoader / CSS Navi mit Rollover

Antworten mit Zitat Zum Seitenanfang

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. * grmbl *

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 * Keine Ahnung... *
  View user's profile Private Nachricht senden
Doppelplusgut

Dabei seit: 06.10.2005
Ort: Zimmer 101
Alter: 47
Geschlecht: Männlich
Verfasst Mi 26.10.2005 20:35
Titel

Antworten mit Zitat Zum Seitenanfang

Was ist denn das für ne lustige CSS Au weia!

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?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
funkeffekt
Threadersteller

Dabei seit: 31.03.2005
Ort: -
Alter: 33
Geschlecht: Weiblich
Verfasst Mi 26.10.2005 20:43
Titel

Antworten mit Zitat Zum Seitenanfang

nach Validität hab ich nicht gefragt *zwinker*

AlphaImageLoader
  View user's profile Private Nachricht senden
Doppelplusgut

Dabei seit: 06.10.2005
Ort: Zimmer 101
Alter: 47
Geschlecht: Männlich
Verfasst Mi 26.10.2005 20:51
Titel

Antworten mit Zitat Zum Seitenanfang

funkeffekt hat geschrieben:
nach Validität hab ich nicht gefragt *zwinker*

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?
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
funkeffekt
Threadersteller

Dabei seit: 31.03.2005
Ort: -
Alter: 33
Geschlecht: Weiblich
Verfasst Mi 26.10.2005 20:56
Titel

Antworten mit Zitat Zum Seitenanfang

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 20:58, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
neele

Dabei seit: 21.08.2004
Ort: Kiel
Alter: 38
Geschlecht: Weiblich
Verfasst Mi 26.10.2005 20:58
Titel

Antworten mit Zitat Zum Seitenanfang

Zeig mal die Seite. Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Doppelplusgut

Dabei seit: 06.10.2005
Ort: Zimmer 101
Alter: 47
Geschlecht: Männlich
Verfasst Mi 26.10.2005 21:01
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
funkeffekt
Threadersteller

Dabei seit: 31.03.2005
Ort: -
Alter: 33
Geschlecht: Weiblich
Verfasst Mi 26.10.2005 21:05
Titel

Antworten mit Zitat Zum Seitenanfang

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 *Schnief*
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] AlphaImageLoader + Background-Positionierung
[Javascript][CSS] JavaScrip-Rollover-Bild in CSS-Dropdown
CSS UL LI NAVI
Problem mit css navi
CSS Navi barrierefrei?
3 navi (css) probleme
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3, 4  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.