# Aufklapp menu per mouse over/klick



## R-M-D (7. September 2008)

HI,

sry wenn ich ech auf die Nerven gehe aber kaum ist das eine gelöst kommt schon das nächste Problem ^^"

und zwar : Ich würde zu dem einen Button gerne einen Aufklapp-Menu hinzufügen dass sobalt man mit der Maus rüberfährt oder per one-klick sich ein unter-Menu öffnet.
Müsste man dass ganze mit JS lösen oder geht das ganze auch per CSS ?

Habe es schon bei selfhtml.org versucht aber ist nicht wirklich was draus geworden ...

Es soll so in etwa ausschauen

-Grafik 
.....|_menu 1
.....|
.....|_menu 2
.....|
.....|_menu 3 

Hoffe ihr könnt mir hierbei wieder helfen ...


LG


----------



## Maik (7. September 2008)

Hi,

Stu Nicholls' Demo CSS only vertical sliding menu funktioniert beim Überfahren des Links mit CSS, und Simple click menu (in einer horizontalen Menü-Variante) beim Klick des Links mit JS.

mfg Maik


----------



## R-M-D (7. September 2008)

erstmal danke für deine antwort,
aber wie soll ich dass ganze anpssen ?

http://img15.myimg.de/testd4b6f.jpg (Maus über dem Info button und das menu erscheint)
So soll es aussehen, nur kommt bei diesen Script immer wieder werben sobalt man draufklickt...

Kann ich dass ganze auch in Dreamveawer erstellen und somit einiges vereinfachen ?

LG


----------



## R-M-D (7. September 2008)

Hab hier ein Demo gefunden :
http://www.stunicholls.com/menu/click_through.html#nogo
Könnte man dies evtl nachbasteln und demnach anpassen ?

LG
edit: sry fürs Doppelposting, hatte vergessen zu editieren ...


----------



## Maik (7. September 2008)

R-M-D hat gesagt.:


> erstmal danke für deine antwort,
> aber wie soll ich dass ganze anpssen ?
> 
> http://img15.myimg.de/testd4b6f.jpg (Maus über dem Info button und das menu erscheint)
> So soll es aussehen, nur kommt bei diesen Script immer wieder werben sobalt man draufklickt...



Wie du das Anpassen sollst, kann ich dir derzeit nicht sagen, da ich den Quellcode deiner Seite, insbesondere das Markup des Menüs nicht kenne. 

Und bei  welchem Script erscheint bei dir Werbung?

Bei meiner Empfehlung auf jeden Fall schon mal nicht, die ich dir hier der besseren Übersicht wegen auf die  wesentlichen Komponenten abgespeckt, und das Menü auf einen Menüpunkt mit Submenü reduziert habe:


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_R-M-D</title>

<script type="text/javascript">
clickMenu = function(menu) {
        var getEls = document.getElementById(menu).getElementsByTagName("LI");
        var getAgn = getEls;

        for (var i=0; i<getEls.length; i++) {
                        getEls[i].onclick=function() {
                                for (var x=0; x<getAgn.length; x++) {
                                getAgn[x].className=getAgn[x].className.replace("unclick", "");
                                getAgn[x].className=getAgn[x].className.replace("click", "unclick");
                                }
                        if ((this.className.indexOf('unclick'))!=-1) {
                                this.className=this.className.replace("unclick", "");;
                                }
                                else {
                                this.className+=" click";
                                }
                        }
                }
        }
</script>

<style type="text/css">
#menu li {list-style:none;}
#menu ul {position:absolute;left:-9999px;width:128px;}
#menu li.click ul{left:50px; top:30px;}
</style>

</head>
<body onload="clickMenu('menu')">

<ul id="menu">
<li class="sub">INFO
                <ul>
                        <li><a href="#nogo1">PSP FAQ</a></li>
                        <li><a href="#nogo2">NDS FAQ</a></li>
                        <li><a href="#nogo3">Wii FAQ</a></li>
                        <li><a href="#nogo4">XBOX360 FAQ</a></li>
                </ul>
</li>
<li>FILMELISTE</li>
<li>SPIELELISTE</li>
</ul>

</body>
</html>
```
Wie ich vorhin anmerkte, demonstriert der Autor mit diesem JS-Code ein horizontal ausgerichtetes Menü, das sich aber genau so in vertikaler Ausrichtung nutzen lässt.

Bei deiner gefundenen Variante müsste der JS-Code komplett überarbeitet werden, da laut deinem Screenshot die Sublinks überhaupt keine weiteren Submenüs enthalten.

mfg Maik


----------



## R-M-D (7. September 2008)

danke,
aber sobalt ich es versuche einzubauen verwindet das ganze  

Weißt du vllt woran das liegen könnte ?

LG


----------



## Maik (7. September 2008)

R-M-D hat gesagt.:


> aber sobalt ich es versuche einzubauen verwindet das ganze
> 
> Weißt du vllt woran das liegen könnte ?


Solange du hier keinen Quellcode zeigst, oder den Link zu deiner Seite nennst, kann ich dazu auch nichts sagen.

mfg Maik


----------



## R-M-D (7. September 2008)

hier der gesamte Code :


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

#apDiv1 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
	background-attachment: fixed;
	background-image: url(Bilder/pinwand_02.gif);
	background-repeat: repeat-x;
	background-position: left top;
}
#apDiv2 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:2;
	background-image: url(Bilder/pinwand_01.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#apDiv3 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:3;
	background-image: url(Bilder/pinwand_04.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#apDiv4 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:4;
	background-image: url(Bilder/Bilder/pinwand_07_02.gif);
	background-repeat: no-repeat;
	background-position: center top;
}
#apDiv5 {
	display:block;
	position:absolute;
	left:2%;
	top:42px;
	width:78px;
	height:27px;
	z-index:5;
	background-image: url(Bilder/off/pinwand_11.gif);
	background-repeat: no-repeat;
	page-break-after: auto;
	background-attachment: scroll;
	cursor: default;
}
    #apDiv5:hover { background-image:url(Bilder/on/pinwand2_11.gif); }
#apDiv6 {
	display:block;
	position:absolute;
	right:2%;
	top:42px;
	width:78px;
	height:24px;
	z-index:6;
	background-image: url(Bilder/off/pinwand_14.gif);
	background-repeat: no-repeat;
}
   #apDiv6:hover { background-image:url(Bilder/on/pinwand2_14.gif); }
#apDiv7 {
	position:absolute;
	width:627px;
	height:95px;
	z-index:7;
	background-image: url(Bilder/off/pinwand_07.gif);
	background-repeat: no-repeat;
        top: 35px;
        left: 50%;
        margin-left: -313.5px;
}
    #apDiv7:hover { background-image:url(Bilder/on/pinwand2_07.gif); }
#apDiv8 {
	position:absolute;
	left:50%;
	top:127px;
	width:333px;
	height:35px;
	z-index:8;
	background-image: url(Bilder/off/pinwand_19.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
}
    #apDiv8:hover { background-image:url(Bilder/on/pinwand2_19.gif); }
#apDiv9 {
	position:absolute;
	left:50%;
	top:162px;
	width:333px;
	height:35px;
	z-index:9;
	background-image: url(Bilder/off/pinwand_22.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv9:hover { background-image:url(Bilder/on/pinwand2_22.gif); }
#apDiv10 {
	position:absolute;
	left:50%;
	top:197px;
	width:333px;
	height:35px;
	z-index:10;
	background-image: url(Bilder/off/pinwand_25.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv10:hover { background-image:url(Bilder/on/pinwand2_25.gif); }
#apDiv11 {
	position:absolute;
	left:50%;
	top:338px;
	width:333px;
	height:35px;
	z-index:11;
	background-image: url(Bilder/off/pinwand_41.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv11:hover { background-image:url(Bilder/on/pinwand2_41.gif); }
#apDiv12 {
	position:absolute;
	left:50%;
	top:250px;
	width:333px;
	height:24px;
	z-index:12;
	background-image: url(Bilder/off/pinwand_29.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv12:hover { background-image:url(Bilder/on/pinwand2_29.gif); }
#apDiv13 {
	position:absolute;
	left:50%;
	top:278px;
	width:333px;
	height:24px;
	z-index:13;
	background-image: url(Bilder/off/pinwand_33.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv13:hover { background-image:url(Bilder/on/pinwand2_33.gif); }
#apDiv14 {
	position:absolute;
	left:50%;
	top:305px;
	width:333px;
	height:24px;
	z-index:14;
	background-image: url(Bilder/off/pinwand_37.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv14:hover { background-image:url(Bilder/on/pinwand2_37.gif); }

</style>
</head>

<body>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5" onclick="window.location.href='http://www.skype.com/intl/en/share/publicchats/join/?skypename=laruna92&topic=SvN+Chat&blob=4ZaAWmT10ZbrbivT4rWDWJQ50ZINtNj3n0ANVClXYfalH0_Kzyrky4EBLSSzZFZWtqyCGDiGroFxZLmXZAiMECG1ayXmtQICAq6pJ_-vfhOMfrS7hvUsz1hXCG-kKA'"></div>
<div id="apDiv6" onclick="window.location.href='http://www.psp-versus-nds.net/external.php?&lastpost=1'"></div>
<div id="apDiv7" onclick="window.location.href='http://piost.pi.ohost.de/Files/root/pinwand/info.html'"></div>
<div id="apDiv8" onclick="window.location.href='http://www.psp-versus-nds.net/showthread.php?t=30704'"></div>
<div id="apDiv9" onclick="window.location.href='http://www.psp-versus-nds.net/releases.php?'"></div>
<div id="apDiv10" onclick="window.location.href='http://www.psp-versus-nds.net/showthread.php?t=35340'"></div>
<div id="apDiv11" onclick="window.location.href='http://www.psp-versus-nds.net/showgroups.php'"></div>
<div id="apDiv12" onclick="window.location.href='http://google.de'"></div>
<div id="apDiv13" onclick="window.location.href='http://google.de'"></div>
<div id="apDiv14" onclick="window.location.href='http://google.de'"></div>
</body>
</html>
```


----------



## Maik (7. September 2008)

Und weiter?

Ich kann nämlich darin die erforderlichen "Komponenten" des Menüs oder meines Beispiels nirgends finden.

mfg Maik


----------



## R-M-D (7. September 2008)

Ja, weil ich es wieder ausgebaut hatte...


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
clickMenu = function(menu) {
        var getEls = document.getElementById(menu).getElementsByTagName("LI");
        var getAgn = getEls;

        for (var i=0; i<getEls.length; i++) {
                        getEls[i].onclick=function() {
                                for (var x=0; x<getAgn.length; x++) {
                                getAgn[x].className=getAgn[x].className.replace("unclick", "");
                                getAgn[x].className=getAgn[x].className.replace("click", "unclick");
                                }
                        if ((this.className.indexOf('unclick'))!=-1) {
                                this.className=this.className.replace("unclick", "");;
                                }
                                else {
                                this.className+=" click";
                                }
                        }
                }
        }
</script>
<style type="text/css">
#menu li {list-style:none;}
#menu ul {position:absolute;left:-9999px;width:128px;}
#menu li.click ul{left:50px; top:30px;}

#apDiv1 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
	background-attachment: fixed;
	background-image: url(Bilder/pinwand_02.gif);
	background-repeat: repeat-x;
	background-position: left top;
}
#apDiv2 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:2;
	background-image: url(Bilder/pinwand_01.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#apDiv3 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:3;
	background-image: url(Bilder/pinwand_04.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#apDiv4 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:4;
	background-image: url(Bilder/Bilder/pinwand_07_02.gif);
	background-repeat: no-repeat;
	background-position: center top;
}
#apDiv5 {
	display:block;
	position:absolute;
	left:2%;
	top:42px;
	width:78px;
	height:27px;
	z-index:5;
	background-image: url(Bilder/off/pinwand_11.gif);
	background-repeat: no-repeat;
	page-break-after: auto;
	background-attachment: scroll;
	cursor: default;
}
    #apDiv5:hover { background-image:url(Bilder/on/pinwand2_11.gif); }
#apDiv6 {
	display:block;
	position:absolute;
	right:2%;
	top:42px;
	width:78px;
	height:24px;
	z-index:6;
	background-image: url(Bilder/off/pinwand_14.gif);
	background-repeat: no-repeat;
}
   #apDiv6:hover { background-image:url(Bilder/on/pinwand2_14.gif); }
#apDiv7 {
	position:absolute;
	width:627px;
	height:95px;
	z-index:7;
	background-image: url(Bilder/off/pinwand_07.gif);
	background-repeat: no-repeat;
        top: 35px;
        left: 50%;
        margin-left: -313.5px;
}
    #apDiv7:hover { background-image:url(Bilder/on/pinwand2_07.gif); }
#apDiv8 {
	position:absolute;
	left:50%;
	top:127px;
	width:333px;
	height:35px;
	z-index:8;
	background-image: url(Bilder/off/pinwand_19.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
}
    #apDiv8:hover { background-image:url(Bilder/on/pinwand2_19.gif); }
#apDiv9 {
	position:absolute;
	left:50%;
	top:162px;
	width:333px;
	height:35px;
	z-index:9;
	background-image: url(Bilder/off/pinwand_22.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv9:hover { background-image:url(Bilder/on/pinwand2_22.gif); }
#apDiv10 {
	position:absolute;
	left:50%;
	top:197px;
	width:333px;
	height:35px;
	z-index:10;
	background-image: url(Bilder/off/pinwand_25.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv10:hover { background-image:url(Bilder/on/pinwand2_25.gif); }
#apDiv11 {
	position:absolute;
	left:50%;
	top:338px;
	width:333px;
	height:35px;
	z-index:11;
	background-image: url(Bilder/off/pinwand_41.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv11:hover { background-image:url(Bilder/on/pinwand2_41.gif); }
#apDiv12 {
	position:absolute;
	left:50%;
	top:250px;
	width:333px;
	height:24px;
	z-index:12;
	background-image: url(Bilder/off/pinwand_29.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv12:hover { background-image:url(Bilder/on/pinwand2_29.gif); }
#apDiv13 {
	position:absolute;
	left:50%;
	top:278px;
	width:333px;
	height:24px;
	z-index:13;
	background-image: url(Bilder/off/pinwand_33.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv13:hover { background-image:url(Bilder/on/pinwand2_33.gif); }
#apDiv14 {
	position:absolute;
	left:50%;
	top:305px;
	width:333px;
	height:24px;
	z-index:14;
	background-image: url(Bilder/off/pinwand_37.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv14:hover { background-image:url(Bilder/on/pinwand2_37.gif); }

</style>
</head>
<body onload="clickMenu('menu')">

<ul id="menu">
<li class="sub"> INFO
                <ul>
                        <li><a href="#nogo1">PSP FAQ</a></li>
                        <li><a href="#nogo2">NDS FAQ</a></li>
                        <li><a href="#nogo3">Wii FAQ</a></li>
                        <li><a href="#nogo4">XBOX360 FAQ</a></li>
                </ul>
</li>
<li>FILMELISTE</li>
<li>SPIELELISTE</li>
</ul>

<body>
<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5" onclick="window.location.href='http://www.skype.com/intl/en/share/publicchats/join/?skypename=laruna92&topic=SvN+Chat&blob=4ZaAWmT10ZbrbivT4rWDWJQ50ZINtNj3n0ANVClXYfalH0_Kzyrky4EBLSSzZFZWtqyCGDiGroFxZLmXZAiMECG1ayXmtQICAq6pJ_-vfhOMfrS7hvUsz1hXCG-kKA'"></div>
<div id="apDiv6" onclick="window.location.href='http://www.psp-versus-nds.net/external.php?&lastpost=1'"></div>
<div id="apDiv7" onclick="window.location.href='http://piost.pi.ohost.de/Files/root/pinwand/info.html'"></div>
<div id="apDiv8" onclick="window.location.href='http://www.psp-versus-nds.net/showthread.php?t=30704'"></div>
<div id="apDiv9" onclick="window.location.href='http://www.psp-versus-nds.net/releases.php?'"></div>
<div id="apDiv10" onclick="window.location.href='http://www.psp-versus-nds.net/showthread.php?t=35340'"></div>
<div id="apDiv11" onclick="window.location.href='http://www.psp-versus-nds.net/showgroups.php'"></div>
<div id="apDiv12" onclick="window.location.href='http://google.de'"></div>
<div id="apDiv13" onclick="window.location.href='http://google.de'"></div>
<div id="apDiv14" onclick="window.location.href='http://google.de'"></div>
</body>
</html>
```

LG


----------



## Maik (7. September 2008)

Die ausgebaute Version hilft mir da aber nicht weiter, um der Fehlerursache auf den Grund zu gehen.

Dieser Teil des Quellcodes:


```
<body onload="clickMenu('menu')">
<ul id="menu">
<li class="sub"> INFO
                <ul>
                        <li><a href="#nogo1">PSP FAQ</a></li>
                        <li><a href="#nogo2">NDS FAQ</a></li>
                        <li><a href="#nogo3">Wii FAQ</a></li>
                        <li><a href="#nogo4">XBOX360 FAQ</a></li>
                </ul>
</li>
<li>FILMELISTE</li>
<li>SPIELELISTE</li>
</ul>
```
 muß natürlich im vorhandenen Dokumentkörper *<body> ... </body>* eingefügt werden. 

Ob es eines und welches der apDIVs das ist, lässt sich hier als Außenstehender nicht nachvollziehen, aber das wirst du wohl selber am besten wissen.

Den onload-Eventhandler für das body-Element überträgst du in dein vorhandenes Element, und entfernst das doppelt vorhande *<body>* wieder aus dem Quellcode, da es darin nur einmal enthalten sein darf.

mfg Maik


----------



## R-M-D (7. September 2008)

Hmm, ich versteh nciht so ganz welche Version du genau haben wills


hab mal den 

```
<body onload="clickMenu('menu')">
<ul id="menu">
<li class="sub"> INFO
                <ul>
                        <li><a href="#nogo1">PSP FAQ</a></li>
                        <li><a href="#nogo2">NDS FAQ</a></li>
                        <li><a href="#nogo3">Wii FAQ</a></li>
                        <li><a href="#nogo4">XBOX360 FAQ</a></li>
                </ul>
</li>
</ul>
```
ins apDiv12 reineditiert
... aber es sieht iwie komisch aus :
http://img15.myimg.de/fgxbb63e2.jpg

alles ist verschoben, 
kannst du mir bitte erklären wie ich das Bild ("info") bearbeiten kann, so dass man das menu per klick auf die Grafik sich öffnen lässt ?

LG
edit:
so sieht der code aus :


```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript">
clickMenu = function(menu) {
        var getEls = document.getElementById(menu).getElementsByTagName("LI");
        var getAgn = getEls;

        for (var i=0; i<getEls.length; i++) {
                        getEls[i].onclick=function() {
                                for (var x=0; x<getAgn.length; x++) {
                                getAgn[x].className=getAgn[x].className.replace("unclick", "");
                                getAgn[x].className=getAgn[x].className.replace("click", "unclick");
                                }
                        if ((this.className.indexOf('unclick'))!=-1) {
                                this.className=this.className.replace("unclick", "");;
                                }
                                else {
                                this.className+=" click";
                                }
                        }
                }
        }
</script>
<style type="text/css">
#menu li {list-style:none;}
#menu ul {position:absolute;left:-9999px;width:128px;}
#menu li.click ul{left:50px; top:30px;}

#apDiv1 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:1;
	background-attachment: fixed;
	background-image: url(Bilder/pinwand_02.gif);
	background-repeat: repeat-x;
	background-position: left top;
}
#apDiv2 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:2;
	background-image: url(Bilder/pinwand_01.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
#apDiv3 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:3;
	background-image: url(Bilder/pinwand_04.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#apDiv4 {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:4;
	background-image: url(Bilder/Bilder/pinwand_07_02.gif);
	background-repeat: no-repeat;
	background-position: center top;
}
#apDiv5 {
	display:block;
	position:absolute;
	left:2%;
	top:42px;
	width:78px;
	height:27px;
	z-index:5;
	background-image: url(Bilder/off/pinwand_11.gif);
	background-repeat: no-repeat;
	page-break-after: auto;
	background-attachment: scroll;
	cursor: default;
}
    #apDiv5:hover { background-image:url(Bilder/on/pinwand2_11.gif); }
#apDiv6 {
	display:block;
	position:absolute;
	right:2%;
	top:42px;
	width:78px;
	height:24px;
	z-index:6;
	background-image: url(Bilder/off/pinwand_14.gif);
	background-repeat: no-repeat;
}
   #apDiv6:hover { background-image:url(Bilder/on/pinwand2_14.gif); }
#apDiv7 {
	position:absolute;
	width:627px;
	height:95px;
	z-index:7;
	background-image: url(Bilder/off/pinwand_07.gif);
	background-repeat: no-repeat;
        top: 35px;
        left: 50%;
        margin-left: -313.5px;
}
    #apDiv7:hover { background-image:url(Bilder/on/pinwand2_07.gif); }
#apDiv8 {
	position:absolute;
	left:50%;
	top:127px;
	width:333px;
	height:35px;
	z-index:8;
	background-image: url(Bilder/off/pinwand_19.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
}
    #apDiv8:hover { background-image:url(Bilder/on/pinwand2_19.gif); }
#apDiv9 {
	position:absolute;
	left:50%;
	top:162px;
	width:333px;
	height:35px;
	z-index:9;
	background-image: url(Bilder/off/pinwand_22.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv9:hover { background-image:url(Bilder/on/pinwand2_22.gif); }
#apDiv10 {
	position:absolute;
	left:50%;
	top:197px;
	width:333px;
	height:35px;
	z-index:10;
	background-image: url(Bilder/off/pinwand_25.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv10:hover { background-image:url(Bilder/on/pinwand2_25.gif); }
#apDiv11 {
	position:absolute;
	left:50%;
	top:338px;
	width:333px;
	height:35px;
	z-index:11;
	background-image: url(Bilder/off/pinwand_41.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv11:hover { background-image:url(Bilder/on/pinwand2_41.gif); }
#apDiv12 {
	position:absolute;
	left:50%;
	top:250px;
	width:333px;
	height:24px;
	z-index:12;
	background-image: url(Bilder/off/pinwand_29.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv12:hover { background-image:url(Bilder/on/pinwand2_29.gif); }
#apDiv13 {
	position:absolute;
	left:50%;
	top:278px;
	width:333px;
	height:24px;
	z-index:13;
	background-image: url(Bilder/off/pinwand_33.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv13:hover { background-image:url(Bilder/on/pinwand2_33.gif); }
#apDiv14 {
	position:absolute;
	left:50%;
	top:305px;
	width:333px;
	height:24px;
	z-index:14;
	background-image: url(Bilder/off/pinwand_37.gif);
	background-repeat: no-repeat;
	margin-left: -166.5px;
	background-position: center;
}
    #apDiv14:hover { background-image:url(Bilder/on/pinwand2_37.gif); }

</style>
</head>
<body>

<div id="apDiv1"></div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
<div id="apDiv4"></div>
<div id="apDiv5" onclick="window.location.href='http://www.skype.com/intl/en/share/publicchats/join/?skypename=laruna92&topic=SvN+Chat&blob=4ZaAWmT10ZbrbivT4rWDWJQ50ZINtNj3n0ANVClXYfalH0_Kzyrky4EBLSSzZFZWtqyCGDiGroFxZLmXZAiMECG1ayXmtQICAq6pJ_-vfhOMfrS7hvUsz1hXCG-kKA'"></div>
<div id="apDiv6" onclick="window.location.href='http://www.psp-versus-nds.net/external.php?&lastpost=1'"></div>
<div id="apDiv7" onclick="window.location.href='http://piost.pi.ohost.de/Files/root/pinwand/info.html'"></div>
<div id="apDiv8" onclick="window.location.href='http://www.psp-versus-nds.net/showthread.php?t=30704'"></div>
<div id="apDiv9" onclick="window.location.href='http://www.psp-versus-nds.net/releases.php?'"></div>
<div id="apDiv10" onclick="window.location.href='http://www.psp-versus-nds.net/showthread.php?t=35340'"></div>
<div id="apDiv11" onclick="window.location.href='http://www.psp-versus-nds.net/showgroups.php'"></div>
<div id="apDiv12" 
<body onload="clickMenu('menu')">

<ul id="menu">
<li class="sub"> INFO
                <ul>
                        <li><a href="#nogo1">PSP FAQ</a></li>
                        <li><a href="#nogo2">NDS FAQ</a></li>
                        <li><a href="#nogo3">Wii FAQ</a></li>
                        <li><a href="#nogo4">XBOX360 FAQ</a></li>
                </ul>
</li>
</ul></div>
<div id="apDiv13" onclick="window.location.href='http://google.de'"></div>
<div id="apDiv14" onclick="window.location.href='http://google.de'"></div>
</body>
</html>
```


----------



## Maik (7. September 2008)

Tja, dann wirst du das Hintergrundbild für *#apDIV12* in weitere Teile zerschneiden müssen, um daraus die grafische Umsetzung der Menüpunkte  "Info" usw. im eigentlichen Menü verwenden zu können.

mfg Maik


----------



## R-M-D (7. September 2008)

Sry..
ich versteh nicht was du mit "zerschneiden" meinst


----------



## Maik (7. September 2008)

Ergeben die Hintergrundbilder der einzelnen DIVs kein Gesamtbild des Seitendesigns? Und wurde dieses etwa  nicht in diese Einzelteile zerschnitten, Stichwort "Slice-Images"?

Denn so, wie sich dein Screenshot nach dem Einfügen des Menüs im *#apDiv12* darstellt, muß eben der Bereich für das Menü aus dem Hintergrundbild herausgenommen werden, um ihn in dem Menü einzusetzen.

Und wie ich vorhin darauf hingewiesen hatte, darf ein HTML-Dokument nur einen  *<body>*-Tag besitzen.

mfg Maik


----------



## R-M-D (7. September 2008)

sry aber ich versteh immer noch nicht wie ich das ganze nun zu ändern (zerschneiden habe)...

Ich hab dir mal alles angehang damit du es mit den Bildern sehen kannst.
http://rapidshare.com/files/143457796/pinwand.rar.html
Vllt kannst du es mir ja an einem bsp demonstrieren...

Sry wenn ich dir zu viel Stress bereite aber ich lerne 


LG


----------



## Maik (8. September 2008)

Hi,

ich bin bislang davon ausgegangen, dass die DIVs Seitenbereiche einrichten, und nicht für jeden einzelnen Menü-Button stehen 

Divitis. Ein paar Gedanken zum übermäßigen Gebrauch von <div>

mfg Maik


----------



## R-M-D (8. September 2008)

Maik hat gesagt.:


> Hi,
> 
> ich bin bislang davon ausgegangen, dass die DIVs Seitenbereiche einrichten, und nicht für jeden einzelnen Menü-Button stehen
> 
> ...



Habe mir nun alles durchgelesen aber ...was bedeutet das nun im Endeffekt ...? 
Hab ich nu alles falsch gemacht ?


----------



## Maik (8. September 2008)

Kann man so sagen 

Wie ein Menü in HTML ausgezeichnet wird, hab ich dir anhand des Beispiels von Stu Nicholls gezeigt, denn ein Link wird mit dem dafür vorgesehenen a-Element ausgezeichnet, und benötigt dann auch kein Javascript, um das Verweisziel im Fenster zu öffnen.

Falls der Seitenbesucher nämlich in seinem Browser Javascript deaktiviert hat, war es das dann mit der Navigation.

Oder willst du etwa in der Seite jeden Schnipsel in ein div-Element packen?

Beschäftige dich also erstmal mit den Grundlagen der Auszeichnungssprache HTML, und dem semantischen Markup, bevor du in die Formatierungssprache CSS einsteigst, und dich an der DIV-Suppe verschluckst.

mfg Maik


----------

