div in div

L

leon_20v

Erfahrenes Mitglied
hallo,

ich habe ein grundgerüst mit div containern.

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

HTML: 
<!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:

HTML: 
#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
 
leon_20v hat gesagt.:
allerdings verbiebt der mir das alles dann im dreamweaver (im ff und ie wirds richtig angezeit)
Zum Vergrößern anklicken....
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 :D

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!
 
Zuletzt bearbeitet:
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.
 
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.
Zum Vergrößern anklicken....
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).
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück