Merkwürdiges Design mit Floats umsetzbar??

[Steel]

Danke für Deinen Rat. Ich benutze das style attribut nur, wenn ich in Dateien teste, ansonsten natürliche eine oder mehrere ausgelagerte CSS-Dateien :-)

Das verstehe ich. Ich muss auf der Arbeit den IE benutzen. Seitdem wir den IE8 haben, benutze ich die Developer Tools zum experimentieren mit CSS. Leider werden neue Eigenschaften da auch inline erstellt. Wenn man den Code dann kopiert, hat man auch erstmal alles inline.

Vorher hab ich immer das CSS File offen gehabt, bearbeitet und dann immer neu geladen. Gab besseren Code, war aber etwas aufwaendiger und zeitintensiver.

Zu dem Problem:

Eigentlich wuerde es reichen, drei elemente nebeneinander zu platzieren. In Deinem Fall koennte man sich gut 3 Listen vorstellen deren Listenpunkte dann die Links enthalten. Damit hast Du ein Menue. Das ganze realisiert man mit display:inline-block, das erste Menu bekommt stattdessen float oder position:absolute (nimmt beides das element aus dem Fluss heraus) und die beiden anderen werden relativ positioniert und mit left unter dem floatendem hervorgeschoben.
Darunter dann ein Divcontainer der die Seitenelemente enthaelt und je nach Belieben (z.b. per border) ausreichen weit vom linken Rand positioniert wird. Schon wuerde das erste Menue lustig am Container vorbeiklappen und die beiden anderen wuerden den Container verschieben, da sie nicht floaten.

Aber: wenn Du das so machst wird das 3. Menue immer an das untere Ende des ausgeklapten 2. Menues gedrueckt. Ich wuesste jetzt auch keine Loesung, das so zu verhindern.

Wir benoetigen also eine andere Loesung:

Was ich persoenlich nicht so gerne mag, was aber hier schnell zum gewuenschten Effekt fuehrt, ist display: table-cell. Aeltere Browser (IE) haben damit Probleme, aber jeder halbwegs aktuelle Browser sollte das koennen.

Dafuer definierst Du Dir wieder 3 Elemente fuer deine 3 Untermenues. Die bekommen display:table-cell. Das erste bekommt float dazu oder wird absolut positioniert. Ich habe nicht viel Erfahrung mit table-cell. Mein IE8 hier braucht trotz float keine Verschiebungen der anderen beiden Elemente, wenn die alle table-cell haben. Lediglich eine Marginanpassung ist noietig.

Damit haettest Du schon dein Ding. Wenn du jetzt Menue 2 oder 3 aufpumpst wird das jeweils andere aber genauso gross. Eventuell reicht bei dir schon eine Formatierung der <li> Elemente oder du muesstest was anderes als <ul> mit table-cell versehen und die ul z.B. in divs packen.

Basisstruktur:

	<ul id="menu1">  
		<li>MENU1</li>  
		<li>Link</li>  
		<li>Link</li>  
		<li>Link</li>  
	</ul>  
	<ul id="menu2">  
		<li>MENU2</li>  
	</ul>  
	<ul id="menu3">  
		<li>MENU3</li>  
	</ul>  
	  
	<div id="content">  
		<p>Narf! Zork! BOAH EY!</p>  
	</div>

CSS:

	div  
	{  
		border:1px solid #66F;  
	}  
	  
	ul  
	{  
		display:table-cell;  
		width:200px;  
		border:1px solid #F66;  
	}  
	  
	#menu1  
	{  
		float:left;  
		margin:0;  
	}  
  
  
	#content  
	{  
		border-left:250px solid #66F;  
		  
	}

Ich denk, daraus kannst Du Dir was passendes basteln.