Anzeige

Div-Container übereinander legen, rest aber noch dynamisch

Div-Container übereinander legen, rest aber noch dynamisch | PSD-Tutorials.de

Erstellt von Maddin_91, 07.08.2009.

  1. Maddin_91

    Maddin_91 Noch nicht viel geschrieben

    Dabei seit:
    18.11.2008
    Beiträge:
    41
    Geschlecht:
    männlich
    Ort:
    Pulheim
    Software:
    Dreamweaver und PS CS3
    Kameratyp:
    Nikon D80
    Div-Container übereinander legen, rest aber noch dynamisch
    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:
    Fahrschule Walter Wolf - Unser Team

    Den Code kann ich leider nicht kopieren, aber die Struktur sieht so aus:
    HTML:
    1.  
    2.  
    3. <div name="inhalt" style="float:right";>
    4. <div style:"position:relative">
    5.    <div style:"position:absolute">
    6.    </div>
    7.    <div style:"position:absolute">
    8.    </div>
    9. </div>
    10. </div>
    11. <div name="footer" style:"float:right;">
    12. </div>
    13.  
    Ich hoffe das kann helfen. Ansonsten, könnt ihr auf der seite noch mal den quellcode gucken.

    Das original CSS gibt es unter:
    http://kingstar91.ki.funpic.de/basis_css.css

    Bitte helft mir

    Viele Grüße Maddin
     
    #1      
  2. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Div-Container übereinander legen, rest aber noch dynamisch
    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?
     
    Zuletzt bearbeitet: 07.08.2009
    #2      
  3. Maddin_91

    Maddin_91 Noch nicht viel geschrieben

    Dabei seit:
    18.11.2008
    Beiträge:
    41
    Geschlecht:
    männlich
    Ort:
    Pulheim
    Software:
    Dreamweaver und PS CS3
    Kameratyp:
    Nikon D80
    Div-Container übereinander legen, rest aber noch dynamisch
    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.
     
    #3      
  4. Shuilar

    Shuilar prof. herr. Betatester

    712
    Dabei seit:
    03.04.2009
    Beiträge:
    2.507
    Geschlecht:
    weiblich
    Software:
    CS5 Design Premium Suite
    Div-Container übereinander legen, rest aber noch dynamisch
    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
     
    #4      
  5. Maddin_91

    Maddin_91 Noch nicht viel geschrieben

    Dabei seit:
    18.11.2008
    Beiträge:
    41
    Geschlecht:
    männlich
    Ort:
    Pulheim
    Software:
    Dreamweaver und PS CS3
    Kameratyp:
    Nikon D80
    Div-Container übereinander legen, rest aber noch dynamisch
    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.
     
    Zuletzt bearbeitet: 07.08.2009
    #5      
  6. Shuilar

    Shuilar prof. herr. Betatester

    712
    Dabei seit:
    03.04.2009
    Beiträge:
    2.507
    Geschlecht:
    weiblich
    Software:
    CS5 Design Premium Suite
    Div-Container übereinander legen, rest aber noch dynamisch
    AW: Div-Container übereinander legen, rest aber noch dynamisch

    Also lustig finde ich das

    Firefox
    [​IMG]

    Opera
    [​IMG]

    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
     
    #6      
  7. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Div-Container übereinander legen, rest aber noch dynamisch
    AW: Div-Container übereinander legen, rest aber noch dynamisch

    ganz ohne "position" ersetz mal "Fahrlehrer Nummer" mit deinen Tabellen..
    HTML:
    1. <div style="margin:0 auto; height:50px; width:900px;"></div><!-- der header -->
    2. <div style="margin:0 auto; width:900px;"><!-- main-bereich -->
    3.   <div style="float:left; width:650px; height:10px; height:auto;"><!-- links-Fahrlehrer -->  
    4.     <div>Fahrlehrer 1</div>
    5.     <div>Fahrlehrer 2</div>  
    6.     <div>Fahrlehrer 3</div>
    7.     <div>Fahrlehrer 4</div>
    8.   </div>
    9.   <div style="width:250px; height:10px;  "></div><!-- rechts-navi -->
    10.   <div style="clear:left;"></div><!-- clearen -->
    11. </div>
    12. <div style="margin:0 auto; height:50px; width:900px;  "></div><!-- footer unten ;o) -->
     
    Zuletzt bearbeitet: 07.08.2009
    #7      
  8. Maddin_91

    Maddin_91 Noch nicht viel geschrieben

    Dabei seit:
    18.11.2008
    Beiträge:
    41
    Geschlecht:
    männlich
    Ort:
    Pulheim
    Software:
    Dreamweaver und PS CS3
    Kameratyp:
    Nikon D80
    Div-Container übereinander legen, rest aber noch dynamisch
    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.
     
    Zuletzt von einem Moderator bearbeitet: 07.08.2009
    #8      
  9. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Div-Container übereinander legen, rest aber noch dynamisch
    AW: Div-Container übereinander legen, rest aber noch dynamisch

    Eine Anrede wär nicht schlecht, wen meinst du denn grad?
     
    #9      
  10. Maddin_91

    Maddin_91 Noch nicht viel geschrieben

    Dabei seit:
    18.11.2008
    Beiträge:
    41
    Geschlecht:
    männlich
    Ort:
    Pulheim
    Software:
    Dreamweaver und PS CS3
    Kameratyp:
    Nikon D80
    Div-Container übereinander legen, rest aber noch dynamisch
    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.
     
    #10      
  11. Shuilar

    Shuilar prof. herr. Betatester

    712
    Dabei seit:
    03.04.2009
    Beiträge:
    2.507
    Geschlecht:
    weiblich
    Software:
    CS5 Design Premium Suite
    Div-Container übereinander legen, rest aber noch dynamisch
    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*)
     
    #11      
  12. Maddin_91

    Maddin_91 Noch nicht viel geschrieben

    Dabei seit:
    18.11.2008
    Beiträge:
    41
    Geschlecht:
    männlich
    Ort:
    Pulheim
    Software:
    Dreamweaver und PS CS3
    Kameratyp:
    Nikon D80
    Div-Container übereinander legen, rest aber noch dynamisch
    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:p

    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?
     
    #12      
  13. Maddin_91

    Maddin_91 Noch nicht viel geschrieben

    Dabei seit:
    18.11.2008
    Beiträge:
    41
    Geschlecht:
    männlich
    Ort:
    Pulheim
    Software:
    Dreamweaver und PS CS3
    Kameratyp:
    Nikon D80
    Div-Container übereinander legen, rest aber noch dynamisch
    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^^
     
    #13      
  14. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Div-Container übereinander legen, rest aber noch dynamisch
    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.
     
    #14      
  15. Maddin_91

    Maddin_91 Noch nicht viel geschrieben

    Dabei seit:
    18.11.2008
    Beiträge:
    41
    Geschlecht:
    männlich
    Ort:
    Pulheim
    Software:
    Dreamweaver und PS CS3
    Kameratyp:
    Nikon D80
    Div-Container übereinander legen, rest aber noch dynamisch
    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
     
    #15      
  16. Shuilar

    Shuilar prof. herr. Betatester

    712
    Dabei seit:
    03.04.2009
    Beiträge:
    2.507
    Geschlecht:
    weiblich
    Software:
    CS5 Design Premium Suite
    Div-Container übereinander legen, rest aber noch dynamisch
    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
     
    #16      
  17. Maddin_91

    Maddin_91 Noch nicht viel geschrieben

    Dabei seit:
    18.11.2008
    Beiträge:
    41
    Geschlecht:
    männlich
    Ort:
    Pulheim
    Software:
    Dreamweaver und PS CS3
    Kameratyp:
    Nikon D80
    Div-Container übereinander legen, rest aber noch dynamisch
    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^^
     
    #17      
  18. Shuilar

    Shuilar prof. herr. Betatester

    712
    Dabei seit:
    03.04.2009
    Beiträge:
    2.507
    Geschlecht:
    weiblich
    Software:
    CS5 Design Premium Suite
    Div-Container übereinander legen, rest aber noch dynamisch
    AW: Div-Container übereinander legen, rest aber noch dynamisch

    Du meinst jetzt die margin, ja?

    Aber egal ... Hauptsache es klappt. :D

    LG
    Shu
     
    #18      
  19. stroyer

    stroyer Aktives Mitglied

    Dabei seit:
    03.01.2009
    Beiträge:
    567
    Div-Container übereinander legen, rest aber noch dynamisch
    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.
     
    #19      
x
×
×