nicht angemeldet
zIndex ändert sich nicht in tab-menü
0 0 
MudGuard
zIndex ändert sich nicht in tab-menü
hi ich verzweifle langsam...
ich bastle seit stunden an einem tabmenü rum...
vielmehr... ich wär schon viel weiter aber der z-index der DIV´s die ich für das tabmenü benutze ändert sich nicht, der der dazugehörigen pages(gesonderte divs) lässt sich jedoch ohne probleme ändern...
hier ein link in aktion:
http://testversion01.te.funpic.de/mycontrolls/tabs2.html (das reingleitende layer ist werbung, leider freehoster, sorry)
hier der code zum drüberschauen
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>test</title>
<script type="text/javascript" language="JavaScript">
function showPage(num){
for(var i = 0;i < 3;i++) {
if(num == i) {
document.getElementById("page" + i).style.zIndex = 1;
document.getElementById("tab" + i).style.zIndex = 1;
document.getElementById("tab" + i).style.backGround.url="tab_active.png";
} else {
document.getElementById("page" + i).style.zIndex = 0;
document.getElementById("tab" + i).style.zIndex = 0;
}
}
}
</script>
<style type="text/css">
#completeform{text-align:center}
#tabs{width:400px;position:absolute;top:0px;height:25px;background-color:#ffffff}
.pge{
border-right:white 2px outset;
border-top:white 2px outset;
border-left:white 2px outset;
width:400px;
border-bottom: white 2px outset;
position:absolute;
top:25px;
height:200px;
background-color:#ffffff}
#tabs div {
float: left; text-align: center;
}
#tabs div a {
display: block;
margin-left: -8px;
width: 81px;
height: 24px;
background: url(tab.png)
no-repeat;
font-family:
tahoma, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #617289;
line-height: 24px;
}
#tabs div a:hover {background: url(tab2.png) no-repeat;}
#tabs div a.active {background: url(tab_active.png) no-repeat; cursor: default;}
</style>
</head>
<body>
<div id="tabs">
<div id="tab0" value="Page 1" name="tab0"><a class="active" style="z-index: 1;" onclick="showPage(0)">----tab 1----</a></div>
<div id="tab1" value="Page 2" name="tab1"><a style="z-index: 0;" onclick="showPage(1)">----tab 2----</a></div>
<div id="tab2" value="Page 3" name="tab2"><a style="z-index: 0;" onclick="showPage(2)">----tab 3----</a></div>
</div>
<div id="page0" class="pge" style="z-index: 1;">
<h1>seite1</h1>
</div>
<div id="page1" class="pge" style="z-index: 0;">
<h1>seite2</h1>
</div>
<div id="page2" class="pge" style="z-index: 0;">
<h1>seite3</h1>
</div>
</body>
</html>
[/CODE]
-
Hoi,
änder mal
document.getElementById("tab" + i).style.backGround.url="tab_active.png";
in
document.getElementById("tab" + i).style.background.url="tab_active.png";,
dann klappt zumindest das umschalten der Tabs.Das, was du da fabriziert hast, ist allerdings nicht wirklich valider Code.
Gruß Ben
-
hi,
änder mal
document.getElementById("tab" + i).style.backGround.url="tab_active.png";
in
document.getElementById("tab" + i).style.background.url="tab_active.png";,
dann klappt zumindest das umschalten der Tabs.Nö, das ist immer noch Quark.
background (mit kleinem g) ist eine Eigenschaft unterhalb des style-Objektes.
Da es aber eine Eigenschaft und kein Objekt ist, hat es natürlich auch keine Unter-Eigenschaften.
document.getElementById("tab" + i).style.background = "url(tab_active.png)";gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
gruß,
wahsagathx er läd nun zumindst das bild für active zwar irgedwo darunter und auch das umschalten auf adere tabs geht nichtmehr aber ich betrachte es als schritt nach vorne:D... ich such mal im css ob ich da den fehler finde... falls nochwem was auffällt immer her mit antworten:D
-
-
Das, was du da fabriziert hast, ist allerdings nicht wirklich valider Code.
Gruß Ben
hab ich gemacht ist auch nun valider code funzen tuts aber noch immer nicht das bild wechselt nur hover aber das bild für active (siehe tab1) wird nicht geladen.
ich hab nun seit gestern gegoogelt aber mir fällt immer mehr auf das ich keine tabmenüs die sich überlappen finde wo sich die überlappung ändert
-
-
Hi,
document.getElementById("tab" + i).style.backGround.url="tab_active.png";
Daß das falsch ist, wurde ja schon erwähnt.
document.getElementById("tab" + i).style.zIndex = 0;
z-Index gilt nur für positionierte Elemente.
#tabs div {
float: left; text-align: center;
}Keine Positionierung ==> z-Index darf nicht greifen.
<div id="tab0" value="Page 1" name="tab0"><a class="active" style="z-index: 1;" onclick="showPage(0)">----tab 1----</a></div>
div hat kein name-Attribut.
Für die a-Elemente sehe ich auch keine Positionierung ==> z-Index darf auch hier nicht greifen.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.