nicht angemeldet
Grafische Schaltflächen werden nicht angezeigt
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
-
Ich denke, ein nicht zu vernachlässigendes Problem liegt in der/den Zeile/n
background-image: url(Nr_1_0.png) no-repeat;
und zwar bei dem no-repeat.
Wenn man es weglässt, funktioniert es.
Du kannst ja in die nächste Zeile dann background-repeat: no-repeat; reinsetzen oder aber direkt http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background@title=background benutzen.-
Hallo,
Menschenskinder, da lag der Hund begraben...
Vielen, vielen, vielen Dank für Deine Hilfe, da hätte ich mich vermutlich
totgesucht...Gruß
Enrico-
Hallöchen,
<http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_repeat@title=background-repeat (Wiederholungs-Effekt):
Normalerweise wird eine Hintergrundgrafik im Wallpaper-Effekt über den gesamten zur Verfügung stehenden Raum wiederholt. Sie können jedoch ein anderes Verhalten erzwingen.>Da dein Bild sowieso den gesamten Hintergrund ausfüllt, brauchst du background_repeat gar nicht.
Menschenskinder, da lag der Hund begraben...
Da ist noch ne Hundeleiche:
ul li.xxx
{
height: 26px;
left: 0px;
position: absolute;
width: 142px;
}Mit "position: absolute;" werden dir alle Schaltflächen schön übereinandergestapelt. An der Stelle dürfte "position: relative;" angebracht sein :)
MfG
vaudi-
Hallo vaudi,
wunderbar, Dein abschliessender Tip hat mein nächstes Problem auch gleich
gelöst :-)Wunderbar :-)
Besten Dank.
Gruß
Enrico
-
-
-