nicht angemeldet
Hallo,
ich bin gerade dabei, meine DVD-Verwaltung komplett über css-Definitionen
zu layouten, um so von der Verwendung von Frames wegzukommen.
So weit, so gut.
Alle Definitionen werden mir angezeigt, ausgenommen die grafischen Schaltflächen
(habe ich als Liste definiert) und ich habe keine Ahnung, warum.
Die Pfade stimmen, die Grafiken existieren auch und werden mir auch in IrfanView
korrekt angezeigt, wenn ich sie aufrufe, ich habe kein Komma vergessen,...
An der noch nicht eingebundenen js-Datei zum Wechseln der css-Klassen der
Schaltflächen kann es auch nicht liegen, da Fire-Bug bzw. die Fehlerkonsole
von Firefox keinen Fehler ausspuckt, was wiederum auch logisch ist, da ich
ja gar _keine_ Schaltflächen habe, nach deren Anklicken ein Fehler ausgelöst
werden könnte *haare-rauf*
Ich komme einfach nicht dahinter.
Mit z-Index habe ich es auch schon versucht, ebenfalls ohne gewünschtem Resultat.
Sowohl im Firefox als auch im IE werden mir die Schaltflächen nicht angezeigt.
Hier der Code:
Ich habe hier nur eine Schaltfläche aufgeführt, da alle nach dem gleichen
Schema aufgebaut sind:
<html>
<head>
<style type="text/css">
html
{
height: 100%;
margin: 0px;
overflow: hidden;
padding: 0px;
width: 100%;
}
.Rahmen_Oben
{
background-image: url(Rahmen_Oben.png);
background-repeat: repeat-x;
height: 22px;
left: 0px;
margin-left: 0px;
margin-right: 0px;
position: absolute;
top: 0px;
width: 100%;
}
.Rahmen_Unten
{
background-image: url(Rahmen_Unten.png);
background-repeat: repeat-x;
bottom: 0px;
height: 22px;
left: 0px;
margin-left: 0px;
margin-right: 0px;
position: absolute;
width: 100%;
}
.Rahmen_Links
{
background-image: url(Rahmen_Links.png);
background-repeat: repeat-y;
height: 100%;
left: 0px;
margin-bottom: 0px;
margin-top: 0px;
position: absolute;
top: 0px;
width: 194px;
}
.Rahmen_Rechts
{
background-image: url(Rahmen_Rechts.png);
background-repeat: repeat-y;
height: 100%;
margin-bottom: 0px;
margin-top: 0px;
position: absolute;
right: 0px;
top: 0px;
width: 22px;
}
.Eck_Rechts_Oben
{
background-image: url(Eck_Rechts_Oben.png);
background-repeat: no-repeat;
height: 22px;
position: absolute;
right: 0px;
top: 0px;
width: 22px;
}
.Eck_Rechts_Unten
{
background-image: url(Eck_Rechts_Unten.png);
background-repeat: no-repeat;
bottom: 0px;
height: 22px;
position: absolute;
right: 0px;
width: 22px;
}
.Container_Schaltflaechen_Oben
{
background-image: url(Container_Schaltflaechen_Oben.png);
background-repeat: no-repeat;
height: 186px;
left: 0px;
position: absolute;
top: 0px;
width: 194px;
}
.Container_Schaltflaechen_Unten
{
background-image: url(Container_Schaltflaechen_Unten.png);
background-repeat: no-repeat;
bottom: 0px;
height: 136px;
left: 0px;
position: absolute;
width: 194px;
}
ul.Schaltflaechen_Oben
{
left: 22px;
list-style-type: none;
margin: 0px;
padding: 0px;
position: absolute;
top: 22px;
width: 142px;
}
ul li.Nr_inaktiv,
ul li.Nr_0_0,
ul li.Nr_0_0:hover,
ul li.Nr_1_0,
ul li.Nr_1_0:hover,
ul li.Nr_2_0,
ul li.Nr_2_0:hover,
ul li.Titel_inaktiv,
ul li.Titel_0_0,
ul li.Titel_0_0:hover,
ul li.Titel_1_0,
ul li.Titel_1_0:hover,
ul li.Titel_2_0,
ul li.Titel_2_0:hover,
ul li.Genre_inaktiv,
ul li.Genre_0_0,
ul li.Genre_0_0:hover,
ul li.Genre_1_0,
ul li.Genre_1_0:hover,
ul li.Genre_2_0,
ul li.Genre_2_0:hover,
ul li.FSK_inaktiv,
ul li.FSK_0_0,
ul li.FSK_0_0:hover,
ul li.FSK_1_0,
ul li.FSK_1_0:hover,
ul li.FSK_2_0,
ul li.FSK_2_0:hover
{
height: 26px;
left: 0px;
position: absolute;
width: 142px;
}
ul li.Nr_inaktiv,
ul li.Nr_0_0,
ul li.Nr_0_0:hover,
ul li.Nr_1_0,
ul li.Nr_1_0:hover,
ul li.Nr_2_0,
ul li.Nr_2_0:hover
{
top: 0px;
}
ul li.Titel_inaktiv,
ul li.Titel_0_0,
ul li.Titel_0_0:hover,
ul li.Titel_1_0,
ul li.Titel_1_0:hover,
ul li.Titel_2_0,
ul li.Titel_2_0:hover
{
top: 43px;
}
ul li.Genre_inaktiv,
ul li.Genre_0_0,
ul li.Genre_0_0:hover,
ul li.Genre_1_0,
ul li.Genre_1_0:hover,
ul li.Genre_2_0,
ul li.Genre_2_0:hover
{
top: 86px;
}
ul li.FSK_inaktiv,
ul li.FSK_0_0,
ul li.FSK_0_0:hover,
ul li.FSK_1_0,
ul li.FSK_1_0:hover,
ul li.FSK_2_0,
ul li.FSK_2_0:hover
{
top: 129px;
}
ul li.Nr_inaktiv
{
background-image: url(Nr_inaktiv.png) no-repeat;
}
ul li.Nr_0_0
{
background-image: url(Nr_0_0.png) no-repeat;
}
ul li.Nr_0_0:hover
{
background-image: url(Nr_0_1.png) no-repeat;
}
ul li.Nr_1_0
{
background-image: url(Nr_1_0.png) no-repeat;
}
ul li.Nr_1_0:hover
{
background-image: url(Nr_1_1.png) no-repeat;
}
ul li.Nr_2_0
{
background-image: url(Nr_2_0.png) no-repeat;
}
ul li.Nr_2_0:hover
{
background-image: url(Nr_2_1.png) no-repeat;
}
img
{
border: 0px;
}
</style>
</head>
<body>
<div class="Rahmen_Oben"></div>
<div class="Rahmen_Unten"></div>
<div class="Rahmen_Links"></div>
<div class="Rahmen_Rechts"></div>
<div class="Eck_Rechts_Oben"></div>
<div class="Eck_Rechts_Unten"></div>
<div class="Container_Schaltflaechen_Oben"></div>
<ul class="Schaltflaechen_Oben">
<li id="Nr" class="Nr_1_0" onclick="Klasse_wechseln('Nr');this.blur();"></li>
</ul>
<div class="Container_Schaltflaechen_Unten"></div>
</body>
</html>
Ich habe sicherheitshalber die komplette Seite eingefügt, nicht dass der
Fehler an ganz anderer Stelle liegt.
Vielen Dank für Eure Hilfe.
Gruß
Enrico