Div-Container übereinander legen, rest aber noch dynamisch

Maddin_91 · 07.08.2009

Hallo,

ich habe folgendes Problem.
Ich will eine Tab-Navi machen und diese auf einer seite verwirklichen.
Ich habe deswegen div-container angelegt und ihre position absolut gesetzt, damit sie übereinander liegen.
Jedoch werden diese auch von den anderen div container überlagert, obwohl diese mit nach unten wander sollen.

Zurzeit sieht es so bei mir aus:

Den Code kann ich leider nicht kopieren, aber die Struktur sieht so aus:

HTML:

<div name="inhalt" style="float:right";>
<div style:"position:relative">
   <div style:"position:absolute">
   </div>
   <div style:"position:absolute">
   </div> 
</div>
</div>
<div name="footer" style:"float:right;">
</div>

Ich hoffe das kann helfen. Ansonsten, könnt ihr auf der seite noch mal den quellcode gucken.

Das original CSS gibt es unter:

Bitte helft mir

Viele Grüße Maddin

cebito · 07.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Vielleicht sind deine Überlegungen ja einfach falsch, kannst du mal 'nen Screen machen, wie es deiner Meinung nach aussehen sollte? Versteh nämlich nicht, warum da absolute positioniert werden soll, welchem Zweck soll es denn dienen?

Maddin_91 · 07.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Das ist jetzt gerade nicht so günstig eins zu machen.
Aber eig sieht man das schon auf der seite die ich angegeben hab.
Der footer soll einfach mit nach unten rutschen, nur er "reagiert" nicht auf die absolute gesetzten felder.
Und nun such ich eine Möglichkeit wie ich das umgehen könnte nur ich hab schon einiges aus probiert.

Shuilar · 07.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Hi,

kopier doch den Code von den Filialen ... da ist es doch, wie Du es möchtest ... Text und Bilder tauschen ... fertig.

Edit: Oder? ... Jetzt überleg ich gerade, ob Du meinst, dass die Navi wie in einem Frameset stehen bleiben soll ... kann das sein?

LG
Shu

Maddin_91 · 07.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Das hab ich auch zuerst gedacht, nur habe ich diesmal auch text und mit text geht das nicht. dann hab ich es versucht mit einzelnen variablen zumachen und dort den html code zu speichern. jedoch hat er diesen nicht hin geschrieben.

Letzendlich hatte ich die idee die einfach übereiander zulegen, aber dies ging ja auch voll in die hose. Aber nun hat mich der ehrgeiz gepackt und nun will ich wissen wie man dieses problem lösen kann.

@Shuilar: Ja, sozusagen. Im Grunde ist es so wie beim Firefox die Tab-leiste. Nur die Seite will nicht so lang wie der Inhalt werden, und das ist ein wenig störend.

Shuilar · 07.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Also lustig finde ich das

Firefox

Opera

Sehe ich das jetzt richtig, dass Du eigentlich gerne die Operavariante mit nem Rahmen drum hättest?

Ich bin jetzt mal einen Moment nicht am Rechner ... komme aber gegen später wieder.

Wenn ich ne Antwort habe, was Du eigentlich gerne möchtest, dann schau ich mir den Quelltext mal an.

LG
Shu

cebito · 07.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

ganz ohne "position" ersetz mal "Fahrlehrer Nummer" mit deinen Tabellen..

HTML:

<div style="margin:0 auto; height:50px; width:900px;"></div><!-- der header -->
<div style="margin:0 auto; width:900px;"><!-- main-bereich -->
  <div style="float:left; width:650px; height:10px; height:auto;"><!-- links-Fahrlehrer -->  
    <div>Fahrlehrer 1</div>
    <div>Fahrlehrer 2</div>  
    <div>Fahrlehrer 3</div>
    <div>Fahrlehrer 4</div>
  </div>
  <div style="width:250px; height:10px;  "></div><!-- rechts-navi -->
  <div style="clear:left;"></div><!-- clearen -->
</div>
<div style="margin:0 auto; height:50px; width:900px;  "></div><!-- footer unten ;o) -->

Maddin_91 · 07.08.2009

Ich glaube das liegt daran, das der Firefox das PNG nicht wieder gibt.
Keine Ahnung woran das jetzt liegt, aber bei allen Browsern, die ich getestet hab (Firefox 3.0, Safari, Iexplorer und Google Chrome) sieht es wie bei dem Opera aus.

nein geht leider nicht. ich hab die seite mal aktualisiert, damit du siehst was es für auswirkungen hatte.

cebito · 07.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Maddin_91 schrieb:
nein geht leider nicht. ich hab die seite mal aktualisiert, damit du siehst was es für auswirkungen hatte.

Eine Anrede wär nicht schlecht, wen meinst du denn grad?

Maddin_91 · 07.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

@cebito: Dich, sonst ist ja leider keiner mehr da.^^
Ich hab jetzt mal die größen auf die Seite angepasst.
Der Content ist übrigens 540px breit
und die ganze seite 800px.
Habe es nochmal aktualisiert. Nur Sie sind jetzt nicht mehr übereinander.

Shuilar · 07.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

kurz wieder da ... bei mir passt das jetzt ... in FF, Opera und IE6 ... und wieder weg ... (haben heute ein neues WII-Spiel gekauft ... ich muss den Becker besiegen *g*)

Maddin_91 · 07.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

@Shuila: Hast du eine Lösung oder wolltest du nur hallo sagen?
Übrigens ist PS3 viel besser

Ich hab inzwischen mein Javascript repariert und nun verstecken sie sich wenn man eins anwählt und das was man angewählt hat wird sichtbar. Nur müssen die noch übereinander nur wie ist die frage.

Ich hab mir gedacht ob ich nicht einfach die höhe festlegen soll und es so "fixiere. Nur wäre so der Inhalt nicht mehr dynamisch, was ich nur sehr ungern mache.

Aber was anderes fällt mir leider nicht ein, euch vlt?

Maddin_91 · 08.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Soo, die "Notlösung", ist ganz gut und läuft soweit. Ich habe halt ne feste größe, aber wenigstens liegen sie über einander. Wäre aber trotzdem schön, wenn ihr ne bessere Lösung wisst, da dieses Problem bei mir öfter vorkommt und immer musste ich ne andere möglichkeit nehmen, die mir nicht wirklich passte.

Schreibt ruhig noch was, vlt klappt es ja^^

stroyer · 08.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Ich hätte eine andere Idee: Am Anfang lass alles sichtbar, bei onLoad setze jede Höhe auf 0 (und overflow:hidden

.
Wenn ein DIV aufgehen soll, löscht du das height:0px; einfach raus. Du musst schauen, dass ein eventuell noch offenes DIV geschlossen wird.

Maddin_91 · 08.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Ahh endlich hab ich es verstanden wie du es meinst...

Das ist auf jedefall eine sehr gute alternative. Ich probiere sie direkt mal aus

Shuilar · 08.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

ich glaube langsam ich weiß nicht, was Maddin will ... aber egal ... wenn Ihr Beide Euch nur versteht *g*

Ich schau mir das morgen mal an ... (die Navratilova hat mich grad voll fertig gemacht ... 29:52 Minuten Tennis ... 6:4 verloren ... ich find die WII cool ... man schwitzt nur so elendiglich als alte Dame)

LG
Shu

Maddin_91 · 08.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

So die Lösung mit der Höhe auf 0 setzten ist perfekt. Genau das was ich gesucht hab.
Vielen dank^^

Shuilar · 08.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Du meinst jetzt die margin, ja?

Aber egal ... Hauptsache es klappt.

LG
Shu

stroyer · 08.08.2009

AW: Div-Container übereinander legen, rest aber noch dynamisch

Er meint bei allen DIVs Height auf 0 setzen und nur bei dem, das angezeigt werden soll keine Höhe angeben (flexibel).
Per Frameworks wie mootools oder jquery könnte man das ganze auch noch animieren.