Ergebnis 1 bis 13 von 13
  1. #1
    templer7 ist offline Eroberer
    registriert
    24-12-2008
    Beiträge
    60

    position und z-index

    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

  2. #2
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: position und z-index

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

  3. #3
    ToM80 ist offline Foren-Gott
    registriert
    27-03-2006
    Ort
    Neuss
    Beiträge
    2.729

    AW: position und z-index

    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

  4. #4
    templer7 ist offline Eroberer
    registriert
    24-12-2008
    Beiträge
    60

    AW: position und z-index

    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

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: position und z-index

    Das falsche Element ist position: absolute;

  6. #6
    templer7 ist offline Eroberer
    registriert
    24-12-2008
    Beiträge
    60

    AW: position und z-index

    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

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: position und z-index

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

  8. #8
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: position und z-index

    Ich wiederhole mich gerne:
    Zitat Zitat von dkdenz Beitrag anzeigen
    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> 
    Geändert von dkdenz (01-09-2009 um 16:10 Uhr)

  9. #9
    templer7 ist offline Eroberer
    registriert
    24-12-2008
    Beiträge
    60
    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
    Geändert von dkdenz (01-09-2009 um 17:05 Uhr) Grund: Beiträge zusammengeführt...

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: position und z-index

    Ähäm -
    Code:
    var getIdFore = 'forgound';

  11. #11
    templer7 ist offline Eroberer
    registriert
    24-12-2008
    Beiträge
    60

    AW: position und z-index

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

  12. #12
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: position und z-index

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

  13. #13
    templer7 ist offline Eroberer
    registriert
    24-12-2008
    Beiträge
    60

    AW: position und z-index

    ahh F**K

    rrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

    mann ey danke danke danke

    jetzt gehts!!!!!!

    mfg
    sven

Ähnliche Themen

  1. Position eines Bildes in Javascript erkennen
    Von Shakespeare17 im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-06-2009, 23:17
  2. Position x und y inkl. Scrolling
    Von FunkyMonkey im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 25-06-2007, 16:55
  3. Genaue Positionierung und Browser
    Von ~red~ im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 31-10-2005, 17:01
  4. IE zeigt alles falsch!
    Von cuychactao im Forum CSS und (X)HTML
    Antworten: 16
    Letzter Beitrag: 23-12-2004, 12:53
  5. (CSS) margin und position absolute
    Von Konfusion im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 11-12-2002, 22:32

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •