Merkwürdiges Design mit Floats umsetzbar??

[istria]

Hallo,
ich habe von einer Designerin ein Layout bekommen, wo der Inhaltsbereich springen soll, je nachdem ob die Navigation obendrüber ausgeklappt ist oder nicht. Zur Veranschaulichung zwei Schema-Bilder:

1. Navigation (dunkelgrau) über dem Inhaltsbereich nicht ausgeklappt, dafür aber ein anderer Navigationsbereich (hellgrau) neben dem Inhaltsbereich (weiss mit grauer Linie). Inhaltsbereich soll sich direkt unter der Hauptnavi befinden
   

2. Navigation über dem Inhaltsbereich ist ausgeklappt, Inhaltsbereich soll dann nach unten wandern (es wird immer ein Seitenwechsel vollzogen, die Navigation öffnet nicht auf der gleichen Seite)
   

Mir ist nicht klar, kann man das mit HTML Bordmitteln so umsetzen??
Ich hoffe die Bilder sind klar?

Vielen Dank für die Hilfe

istria

[Steel]

Hallo!

Ja. Sollte sich umsetzen lassen. Auch wenn ich diese Seite lieber nicht mal besuchen will.

Die Frage ist: Was hast Du bisher versucht/ueberlegt?

[istria]

Hallo Steel,

ich habe bisher versucht, die Divs in der Navigation zu floaten und danach folgend das DIV mit dem Hauptinhalt zu platzieren, entweder floatend oder mit gecleartem float. Aber entweder dieses wird vertikal unterhalb des längsten DIVs platziert, egal wo sich dieses befindet (also 1. DIV lang, Inhalt dann unter 2. DIV platziert und Inhalt beginnt dort wo 1. DIV endet) oder aber die Höhe der oberen DIVs wird nicht berücksichtigt und der Inhalt startet direkt unterhalb des kürzesten DIVs - und läuft ggf. unterhalb des längeren ...
Daher bin ich mir nicht sicher, ob das so funktioniert. Und da es in der Tat etwas ungewöhnlich ist Inhaltsbereiche zu verschieben habe ich im Internet nichts brauchbares auftun können ...

istria

[Steel]

Hi!

Das Inhalt verschieben ist ja genau das was man mit floating und absoluter Positionierung immer verhindern will. Es ist eigentlich das Standardverhalten. Du moechtest also etwas erreichen, was normalerweise sowieso passiert - nur nicht, wenn ein bestimmtes Element ausgeklappt wird. Deshalb fragte ich nach deinen bisherigen Versuchen. Hast Du die Codestruktur oder ein Onlinebeispiel? Was soll passieren, wenn das rechte Menu oben ausgeklappt wird?

[istria]

Hi,
das Problem 1 vor dem ich stehe ist folgendes, hier der Quellcode:

<div style="background-color:#C9C; width: 200px; display:inline; float:left">lange<br />navi<br />gation</div><div style="background-color:#069; width: 200px; display:inline; float:left">kurz2</div><div style="background-color:#F3C; width: 200px; float:left">kurz3</div>  
<div style="background-color:#6F6; width: 180px; clear:both; position:relative; left: 210px;">hauptinhalt</div>  

Hierbei ist links der Bereich länger und der Inhalt fängt unterhalb dieses langen Bereichs an obwohl dieser ja links vom Inhalt ist. In diesem Fall sollte der Inhalt direkt unter dem DIV von kurz 2 anfangen.

Gleiches Problem habe ich auch wenn ich ein DIV drumherum lege und die floating divs innenrein und dann versuche einen Absatz innendrinn floaten zu lassen siehe hier:

<div style="background-color:#6F6">  
<div style="background-color:#C9C; width: 200px; display:inline; float:left">lange<br />navi<br />gation</div><div style="background-color:#069; width: 200px; display:inline; float:left">kurz2</div><div style="background-color:#F3C; width: 200px; float:left">kurz3</div><div style="clear:both"></div>  
<p style="position:relative; left: 250px;">hauptinhalt</p></div>

Ich bilde mir auch ein, dass das irgendwie gehen müsste aber wie???

[Steel]

Schau ich mir später mal in einer Pause auf der Arbeit an. Bis dahin ein kleiner Rat: CSS Formatierungen gehören erstmal nciht in style attribute sondern am Besten in eine eigene Datei, wenigstens aber in einen CSS Bereich im Dokument, vorzugsweise natürlich im head. So ist das erstmal nur unübersichtlich.

[Istria]

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 :-)
vielen dank
istria

[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.

[Istrai]

Hallo Steel,
vielen Dank, das sieht brauchbar aus. Habs gerade mal etwas ausgetestet. Aus meiner Sicht immernoch etwas fragwürdig wie sinnvoll das ist, aber wenns der Grafiker so will ...
viele grüße
istria