Problem mit Div, Layout, ...???

    Hallo an alle,

    Habe folgendes problem, ich habe den content extra mit viel blindtext gefüllt damit man es besser nach vollziehen kann. Scrollt man den text runter bleibt der container mit den kontaktdaten nicht unten links in der ecke.

    Das nächste problem sind die beiden container links, die navigaton und die kontaktdaten. Ich habe extra ein paar untermenüpunkte mehr eingetragen um es besser zu verdeutlichen. Wenn man zum beispiel den Browser verkleinert dann schiebt sich der container kontaktdaten über die navigation.

    Habt ihr vielleicht ein paar tips für mich.


    Hier der code:

    und hier noch css:

    Vielen dank schon mal im vorraus für eure mühe und zeit.

    Mfg crusader19

    Dieses Problem habe ich gestern bereits kommen sehen. Da ich aber nicht wusste dass du eine flexible Höhe möchtest, war ich mal lieber ruhig :lol:

    Eine einfache Lösung, die allerdings nicht ganz deinen Vorstellungen entspricht:
    Das Überlappen der Kontaktdaten mit der Navi resultiert aus der absoluten Positionierung. Bezugspunkt ist bottom:0 womit bei kleinerem Fenster der Block automatisch nach oben rutscht.
    Um dies zu verhindern definiere Kontaktdaten so:

    Code
    #kontaktdaten { height: 100px; width: 220px;}


    Außerdem integriere diesesn div in diesen:

    Code
    <div id="navlinksbg">

    indem du den div #kontaktdaten vor den schließenden div von navlinksbg setzt:

    Als Ergebnis müssten die Kontaktdaten jetzt immer unterhalb der Navi sein, jedoch noch nicht auf unterer Linie mit dem Content-Text.
    Einen Abstand zur Navi kannst du noch mit einem margin-top-Wert in Kontaktdaten herstellen.
    Im Prinzip halte ich diese Lösung für besser, da der Benutzer dann gleich die Kontaktdaten sieht, ohne im Textbereich scrollen zu müssen.

    Falls du aber darauf bestehst, die Kontaktdaten unten anzuzeigen könntest du sie z.B. als "Footer" unter den Textbereich setzen indem du den Kontaktdaten-div vor den schließenden Tag des Contents setzt.

    Willst du's unbedingt links unten haben, muss man etwas tricksen. Dafür brauch ich etwas mehr Zeit. Dann müsste ich auch wissen, ob du bei einem einheitlichen Hintergrund bleibst (wäre etwas einfacher), oder z.B. für Linksbereich und Content unterschiedliche Farben verwenden willst.

    Hallo scaexp,

    Danke für den Tipp. Als erstes ich kann mit der Seite leider nicht viel anfangen da ich in englisch ganz schlecht bin. Es sei denn du kennst ein sehr gutes übersetzungtool.

    Als nächstes, haben layer nicht was mit Macromedia zu tun???
    und was sind überhaupt layer?

    Sind die Layer mit den Div's gleich zu setzen?


    Vielen Dank nochmal für deine Mühe.

    Mfg Crusader19

    Hallo sejuma,

    Danke dir für deine Mühe. Das funktioniert schon prima.
    Da du jetzt schon so gefragt hast.

    Also die Kontaktdaten sollten eigentlich links unten sein. Was aber auch schon reichen würde wenn man im Content scrollt, soll die Navi und die Kontaktdaten stehen bleiben.
    Der linke teil fest der rechte teil beweglich.

    Stell dir eine sehr lange AGB Seite vor, man scrollt nach unten dann ist das Menü weg und man muß erst wieder nach oben scrollen um ans menü zu kommen.

    Ich hoffe es ist für dich verständlich.

    Der hintergrund wird durch ein hintergrundbild geladen 2-farbig mit farbvelauf von links nach rechts.


    Vielen Dank für deine Mühe.

    Mfg Crusader19

    Ok, das erleichtert alles ungemein.

    Dann gehen wir wieder einen Schritt zurück: Im HTML-Teil die Kontaktdaten aus dem Navi-Container nehmen und wieder wie vorher darunter setzen, also zwischen Navi und content:

    Mit folgender CSS sollte es dann funktionieren, wobei ich die Bereiche zur Verdeutlichung mal eingefärbt habe. Die Höhenwerte kannst du ja noch anpassen.

    Code
    #content {background-color:magenta; left: 220px; bottom: 0; right: 0; top: 100px; position: absolute; height:700px; overflow:auto; } 
#header { height: 100px; left: 0; top: 0; position: absolute; width: 100%; visibility: visible; } 
#kontaktdaten {background-color:yellow; clear:left; height: 100px; width: 220px;}
#logolinks { width: 189px; left: 0; top: 0; position: absolute; height: 100px; visibility: visible; } 
#logorechts { height: 100px; width: 189px; top: 0; position: absolute; right: 0; visibility: visible; } 
#navlinksbg {background-color:red; width: 220px;float:left; margin-top:100px;height:600px; }

    Viel Erfolg!

    Hallo Sejuma,

    Spitze das funktioniert sehr gut habe aber das problem das es im ie nicht funktioniert.

    Soviel ich weiß kann der ie 6 nicht mit overflow umgehen und nicht mit position:fixed.

    Was kann ich denn da machen.

    Dann habe ich naturlich gleich ausprobiert den header fest zu positionieren.

    Geht gut nur jetzt schiebt sich der content beim scrollen über den header, das heißt

    die schriften liegen übereinander. Es wäre schöner wenn der content unter dem

    header verschwindet. Kann man so was nicht mit einem versteckten Bild im header

    machen. So zu sagen als hintergrundbild????

    Oder geht das vielleicht einfacher?


    Ich bin dir sehr dankbar das du mir hier hilfst ist vorallem für mich sehr hilfreich.

    Mfg Crusader19

    Sorry für die Verspätung, aber ich musste zwischendurch mal das Bad tapezieren :roll:
    Overflow kann der IE.
    Ich habe jetzt alle absoluten Positionierungen rausgeschmissen, da die fast immer irgendwelche Probleme verursachen.
    Die folgende Seite ist getestet im FF 1.5 und IE6, sollte also jetzt funktionieren.