position und z-index

**templer7** · 31-08-2009, 19:28

hi alle miteinander XD,
ich war mir mal nicht sicher ob das problem nun css oder javascript ist, hab mich aber für css entschieden.

also ich habe mir ein dynamisches menu mit js programmiert, welches aus 3 layern besteht:

back (für background, farbe rot)
foreground ( vordergrund, farbe grün)
text ( liegt ganz vorne mit text drin)

irgendwie vertauschen sich rot und grün aber...
warum?

www.kobudokan.de/mein-js-menu.htm

danke sven

**dkdenz** · 31-08-2009, 20:36

Ich sehe da nur sechs rote Kästen mit schwarzem Text horizontal nebeneinander...

**ToM80** · 31-08-2009, 21:04

versteh jetzt auch nicht was du willst. du hast den kästen die klasse "lid" zugewiesen und die ist numal rot udn nicht grün

**templer7** · 01-09-2009, 14:12

ja aber die class "lif" muss nach der anordnung meiner divs nun mal oben liegen. selbstt mit z-index sind die immer noch vertauscht. rot -> grün -> text.
(ich brauche diese reihenfolge, weil beim überfahren später ein fade-in effekt genutzt werden soll)
und ich möchte wissen, warum die reihenfolge nicht stimmt.
vielen dank und mfg
sven

**kkapsner** · 01-09-2009, 14:55

Das falsche Element ist position: absolute;

**templer7** · 01-09-2009, 15:27

wie meinst du das...
wenn ich position raus lasse, dann liegen sie nicht mehr übereinander... sondern untereinander und das will ich ja nicht

danke
sven

**kkapsner** · 01-09-2009, 15:32

Hab' ich auch nicht geschrieben - sondern, dass du dem Anderen position: absolute; geben sollst.

**dkdenz** · 01-09-2009, 15:40

Ich wiederhole mich gerne:

Zitat von dkdenz

Ich sehe da nur sechs rote Kästen mit schwarzem Text horizontal nebeneinander...

XP SP3, Fx 3.5.2

Edit
Und das kommt bei mir im Browser an:

PHP-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>eDragon's neues Menü</title>
        <link rel="stylesheet" type="text/css" href="menu.css">
        <script type="text/javascript" src="menu.js">
        </script>
    </head>
    <body onload="appendMyMenu();">
        <div id="menu"> 
        </div>

    </body>
</html>

**templer7** · 01-09-2009, 16:32

ich will euch ja auch nicht irgendwwie belöffeln, aber es sind 3 layer. rot grün und text. und die sind in einer falschen reihenfolge angeordnet. (so solls aussehen: grün rot text)

schick gleich noch eine erläuterung...
mfg
sven

Code:

var getIdMenu = "menu";
var getIdBack = 'back';
var getIdFore = 'forgound';
var getIdText = 'text';
var getAlt = "Button";
var getClUl = "Ul";
var getClLid = "Lid";
var getClLit = "Lit";
var getClLif = "Lif";
var getClLidsubd = "Lisubd";
var getClLidsubf = "Lisubf";
var getClLidsubt = "Lisubt";

var spalte = new Array(6);
spalte[0] = new Array("Home"); //spalte 1 hat 1ne zeile
spalte[1] = new Array("Mods", "CnC 3: TW", "Links"); 
spalte[2] = new Array("Scripts");
spalte[3] = new Array("Programming", "C++", "Java", "Links");
spalte[4] = new Array("Hausarbeiten", "Vortäge", "Facharbeiten");
spalte[5] = new Array("Kontakt", "Gästebuch", "Forum");

function appendMyMenu() {
	createSection();
	createText();
	createFore();
	createBack();}

function createSection() {
		var container = document.getElementById(getIdMenu);
		var back = document.createElement('div');
		back.id = getIdBack;
		var forground = document.createElement('div');
		forground.id = getIdFore;
		var text = document.createElement('div');
		text.id = getIdText;
		container.appendChild(back);
		container.appendChild(forground);
		container.appendChild(text); }
		
function createFore() {
	for(i = 0; i <= spalte.length - 1; i++) {
		var myMenu = document.getElementById(getIdFore); 
		var outerButton = document.createElement('ul');
		outerButton.setAttribute('class', getClUl);
		var innerButton = document.createElement('li');
		innerButton.setAttribute('class', getClLif);
		outerButton.appendChild(innerButton);
		for(k = 1; k <= spalte[i].length - 1; k++) {
			var subButton = document.createElement('li');
			subButton.setAttribute('class', getClLidsubf);
			outerButton.appendChild(subButton);
		}
		myMenu.appendChild(outerButton);
	} 
}

function createBack() {
	for(i = 0; i <= spalte.length - 1; i++) {
		var myMenu = document.getElementById(getIdBack); 
		var outerButton = document.createElement('ul');
		outerButton.setAttribute('class', getClUl);
		var innerButton = document.createElement('li');
		innerButton.setAttribute('class', getClLid);
		outerButton.appendChild(innerButton);
		for(k = 1; k <= spalte[i].length - 1; k++) {
			var subButton = document.createElement('li');
			subButton.setAttribute('class', getClLidsubd);
			outerButton.appendChild(subButton);
		}
		myMenu.appendChild(outerButton);
	} 
}

function createText() {
	for(i = 0; i <= spalte.length - 1; i++) {
		var myMenu = document.getElementById(getIdText); 
		var outerButton = document.createElement('ul');
		outerButton.setAttribute('class', getClUl);
		var innerButton = document.createElement('li');
		innerButton.setAttribute('class', getClLit);
		var myText = document.createTextNode(spalte[i][0]);
		innerButton.appendChild(myText);
		outerButton.appendChild(innerButton);
		for(k = 1; k <= spalte[i].length - 1; k++) {
			var subButton = document.createElement('li');
			subButton.setAttribute('class', getClLidsubt);
			var subText = document.createTextNode(spalte[i][k]);
			subButton.appendChild(subText);
			outerButton.appendChild(subButton);
		}
		myMenu.appendChild(outerButton);
	} 
}

link: www.kobudokan.de/menu.js

createSection() erstellt 3 div's in dem div mit der id="menu", welches du in dem source code gesehen hast.
ein div "back", ein div "foreground" und ein div "text" in dieser reihenfolge.

createFore() und createBack() machen beide das gleiche, da ich 2 layer brauche für meinen fade-in effekt. nur dass sich jetzt die classes und id's unterscheiden!!!
<ul>
<li> Hauptbutton </li>
<li> ich bin ein untermenü </li>
<li> ich bin ein untermenü </li>
<li> ich bin ein untermenü </li>
</ul>
so sieht das grund gerüst aus. diese beiden funktionen fügen keinen text in die tags.
gibt es kein untermenü (deklariert in var spalten) wird nur ein hauptbutton erstellt.

createText() erstellt das gleiche schema wie oben nur dass es jetzt den text für die buttons einfügt.

mit appendMyMenu() werden bei onload alle funktionen aufgerufen und das menü wir dgeneriert.

ich habe das nicht einfach als html geschrieben, weil es sein kann, das man einfach noch eine spalte oder ein untermenü hinzufügen bzw. entfernen möchte.

natürlich ist das auch erst ein grundgerüst, weil links und layout natürlich noch nicht in angriff genommen wurden.
wenn aber die layer nicht in der richtigen reihen folge liegen, kann ich den fade-in effekt nicht einsetzen. (wenn ich für die class vom fordergrund jetzt die vom hintergrund benutze müsste das ganze zwar funktionieren, aber man will es aj nicht zu verwechslungen kommen lassen)

hier die css datei die dazu gehört:

Code:

#menu { 			padding:0;
				margin:0;}
		
#forground {		position:absolute;}
				
#back { 			position:absolute;}

#text {			position:absolute; }
				
ul, li {			list-style-type:none; }

.Ul {			float:left; }

.Lid {			background-color:red;
				width:150px;
				height:50px;
				float:none; }
				
.Lif {			background-color:green;
				width:150px;
				height:50px;
				float:none; }
				
.Lit {			width:150px;
				height:50px; 
				float:none; }
				
.Lisubt {		width:150px;
				height:50px; 
				float:none; }

.Lisubf {		width:150px;
				height:50px; 
				float:none;
				background-color:green; }
				
.Lisubd {		width:150px;
				height:50px; 
				float:none;
				background-color:red; }

link: www.kobudokan.de/menu.css

**kkapsner** · 01-09-2009, 17:23

Ähäm -

Code:

var getIdFore = 'forgound';

**templer7** · 01-09-2009, 18:03

hehe war mir nich sicher wie das geschrieben.... (richtig = forEground)
aber mit dem fehler hat das nix zu tun, oder

**kkapsner** · 01-09-2009, 19:03

Lies' bitte meinen Post noch einmal sorgfältig durch.

**templer7** · 01-09-2009, 19:06

ahh F**K

rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

mann ey danke danke danke

jetzt gehts!!!!!!

mfg
sven

Thema: position und z-index

LinkBack

Themen-Optionen

Anzeige

position und z-index

AW: position und z-index

AW: position und z-index

AW: position und z-index

AW: position und z-index

AW: position und z-index

AW: position und z-index

AW: position und z-index

AW: position und z-index

AW: position und z-index

AW: position und z-index

AW: position und z-index

Ähnliche Themen

Position eines Bildes in Javascript erkennen

Position x und y inkl. Scrolling

Genaue Positionierung und Browser

IE zeigt alles falsch!

(CSS) margin und position absolute

Lesezeichen

Lesezeichen

Berechtigungen

json Datei parsen

const prefix

json Datei parsen

json Datei parsen

json Datei parsen

const prefix