# div in div



## leon_20v (21. Oktober 2010)

hallo,

ich habe ein grundgerüst mit div containern.

jetzt möchte ich in einenen container ein klappmenü machen


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>2D-Ausklappmenu</title>

<link rel="stylesheet" type="text/css" href="2d-nav.css">

<!--[if IE]>
<style type="text/css" media="screen">
 #menu ul li {float: left; width: 100%;}
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;} 
}
</style>
<![endif]-->
</head>

<body>

<div id="menu">

<ul>
  <li><h2>Diskusionsthemen</h2>
    <ul>
		<li><a href="#">eins</a></li>
		<li><a href="#">zwei ...</a>
			<ul>
       			<li><a href="#">zwei a</a></li>

       			<li><a href="#">zwei b</a></li>
       			<li><a href="#">zwei c</a></li>
				<li><a href="#">zwei d</a></li>
 			</ul>
		</li>
       <li><a href="#">drei ...</a>
	   		<ul>

       			<li><a href="#">drei a</a></li>
       			<li><a href="#">drei b ...</a>
					<ul>
       					<li><a href="#">drei b i</a></li>
       					<li><a href="#">drei b ii</a></li>
       					<li><a href="#">drei b iii</a></li>

					</ul>
					</li>
       			<li><a href="#">drei c</a></li>
 			</ul>
	   </li>
    </ul>
  </li>
 </ul>

<ul>
  <li><h2>Titel 2</h2>
    <ul>
		<li><a href="#">eins</a></li>
		<li><a href="#">zwei ...</a>
			<ul>
       			<li><a href="#">zwei a</a></li>

       			<li><a href="#">zwei b</a></li>
       			<li><a href="#">zwei c</a></li>
				<li><a href="#">zwei d</a></li>
 			</ul>
		</li>
       <li><a href="#">drei ...</a>
	   		<ul>

       			<li><a href="#">drei a</a></li>
       			<li><a href="#">drei b ...</a>
					<ul>
       					<li><a href="#">drei b i</a></li>
       					<li><a href="#">drei b ii</a></li>
       					<li><a href="#">drei b iii</a></li>

					</ul>
					</li>
       			<li><a href="#">drei c</a></li>
 			</ul>
	   </li>
    </ul>
  </li>
 </ul>

<ul>
  <li><h2>Titel 3</h2>
    <ul>
		<li><a href="#">eins</a></li>
		<li><a href="#">zwei ...</a>
			<ul>
       			<li><a href="#">zwei a</a></li>

       			<li><a href="#">zwei b</a></li>
       			<li><a href="#">zwei c</a></li>
				<li><a href="#">zwei d</a></li>
 			</ul>
		</li>
       <li><a href="#">drei ...</a>
	   		<ul>

       			<li><a href="#">drei a</a></li>
       			<li><a href="#">drei b ...</a>
					<ul>
       					<li><a href="#">drei b i</a></li>
       					<li><a href="#">drei b ii</a></li>
       					<li><a href="#">drei b iii</a></li>

					</ul>
					</li>
       			<li><a href="#">drei c</a></li>
 			</ul>
	   </li>
    </ul>
  </li>
 </ul>

</div>
</body>
</html>
```


allerdings verbiebt der mir das alles dann im dreamweaver (im ff und ie wirds richtig angezeit) allerdings muss ja dann irgendwie ein fehler sein.


hier die css von meinem gründgerüst:


```
#container {
width: 970px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
background-color: #FFFFFF;
}


/* -----------------Inhalt--------------------- */
#content {
background-color: #ffffff;
padding: 0px;
margin-left: 200px;
margin-right: 0px;
}
div#content { 
min-height:370px;
height:expression(this.scrollHeight > 370 ? "auto":"370px"); 
}

p, pre{
padding: 5px 10px;
margin:0px;
}

/* --------------left navigavtion------------- */
#left {
float: left;
width: 200px;
margin: 0px;
padding: 0px;
}

/* -----------footer--------------------------- */
#footer {
clear: both;
margin: 0px;
padding: 0px;
text-align: right; }
```



irgendwie verschiebt der mir dann alles ganz komsich und der content (neben dem gefloateten div) ist garnicht mehr zu sehen


----------



## SpiceLab (22. Oktober 2010)

leon_20v hat gesagt.:


> allerdings verbiebt der mir das alles dann im dreamweaver (im ff und ie wirds richtig angezeit)


Solange die Webbrowser es richtig anzeigen, ist doch alles im Lot 

Es gab hier in der Vergangenheit schon diverse Themen, in denen Dreamweaver gegenüber den Browsern das CSS fehlinterprertiert hat, weil die Anwendung eine ältere Version des IE als Browserengine genutzt hat, die mit ihren jeweiligen bekannten Bugs geglänzt hat.

Und welchen Browser nutzt Dreamweaver in deinem System als Browserengine? Vermutlich ebenfalls IE5/6 

Lässt sich hier aber auch nicht direkt überprüfen, da du nur Fragmente deines HTML- und CSS-Codes gezeigt hast, die sich so nicht nutzen lassen, denn es fehlt der HTML-Code des Seitengerüsts und das Stylesheet des Menüs.

Wäre übrigens nett, wenn du die Netiquette des Forums beachtest, und dich an die Groß- und Kleinschreibung hälst (siehe Punkt 15) - danke!


----------



## leon_20v (22. Oktober 2010)

Ohwe Groß und Kleinschreibung,

des wird ja noch viel schlimmer. Ich kann das ja mal garnicht mehr. Im laufe der Internetzeit und der Kleinschreibung, hab ich mir das so angeeignet.

Welche gute und einfache Möglichkeit gibt es denn noch um ein Klappmenü zu erstellen. Dieses sollte aber dann auch in jedem Browser funktionieren.


----------



## Develope_PC (22. Oktober 2010)

*Dropdown oder Flyout?*

Mir ist noch nicht klar, ob du ein Flyout (horizontal) oder ein Dropdown (vertikal) Menü erstellen willst.

Wie wäre es mit Dropdown mit CSS - Editor: Kompozer?


----------



## SpiceLab (22. Oktober 2010)

leon_20v hat gesagt.:


> Welche gute und einfache Möglichkeit gibt es denn noch um ein Klappmenü zu erstellen. Dieses sollte aber dann auch in jedem Browser funktionieren.


Das tut es doch nach deiner eigenen Aussage, und Dreamweaver ist definitiv kein Browser, sondern ein WYSIWYG-Editor, der für die interne Seitenansicht eine Browserengine nutzt.

Um welche es sich hierbei handelt, hast du auf meine Frage hin nicht beantwortet - danke dafür!

Ich nehme an, dass dein Menüsystem im Grundsatz Son of Suckerfish Dropdowns folgt / ähnelt.

Dieses funktioniert in allen gängigen aktuellen Browsern, und hilft den älteren IEs (bis einschließlich "Version 6") mit etwas Javascript unter die Arme, da sie die Pseudoklasse *:hover* nur für das <a>-Element unterstützen, all diese "Klappmenüs" aber den Selektor *li:hover {}* nutzen, um beim Überfahren der Oberpunkte die versteckten Untermenüs einzublenden.

In deinem genutzten Menü bedienst du die Vorgänger des IE7 mit "csshover.htc" (http://www.xs4all.nl/~peterned/csshover.html).


----------

