divx mit faux columns - firefox und ie wollen beide nicht

  • moin,

    erstmal guten tag hier alle zusammen. bin neu hier und hoffe deshalb, die beschreibung entspricht den forderungen und ihr könnt mir hilfen :)

    ich habe derzeit folgendes problem: ich habe bei meiner homepage drei verschachtelte divs, ein mutter und zwei tochter divs. das mutter-div, page, steht über menue und content. menue ist hierbei eine simple sidebar, content das text- und inhaltsfeld und page eben der gesamte oberblock.

    mithilfe der faux columns methode habe ich das menue-div bis zum seitenende mitwachsen lassen, bekomme nun jedoch einen fatalen fehler (zunächst firefox). sobald des ende des menue-divs erreicht ist, springt der inhalt des content-divs nach links, sprich steht nun unter dem menue-div und nicht rechts, wo er eigentlich sollte. außerdem bekomme ich bei tabellen das problem, das diese das content-feld auf der rechten seite sprengen. dies geschieht nur bei den tabellen; ich suche hier auch einen einfacheren weg als jede tabelle zu verkleinern, da es ja einen allgemeinen befehl geben müsste.

    im ie sind die symptome ähnlich, hier fängt jedoch der komplette inhalt erst nach dem ende des menue-divs an, sprich alles auf der höhe der sidebar ist im content-feld frei, danach läuft alles ungeniert und "schön" links (sollte natürlich rechts stehen) - auch hier wieder das gleiche mit tabellen.

    hier noch ein kleiner auszug aus der extern ausgelagerten css-datei:

    (hinweis: ich habe content dem page-div untergeordnet, weil ich das durch googlen bei einem ähnlichen beispiel gefunden hatte und dadurch für mich ein weiteres problem eliminiert wurde. wenn ich menue nun auch noch page unterordne, wird die sidebar allerdings bis zum content-feld hin nach rechts breiter und der inhalt beginnt erst weiter unten. sehr konfus das ganze.

    und nun die index.php:

    komischerweise will das ganze nicht mit code-bbtag, deswegen hier als txt-file auszug auf meinem server: auszug der index.php

    ich bin mir sicher, die antwort liegt direkt vor meiner nase und ich bin vor lauter augenkrämpfen und rumprobieren nur zu blind, sie zu entdecken -- trotzdem bin ich für jegliche hilfe äußerst dankbar :)

    Aus anschaulichen Gründen habe ich eine Testseite erstellt, an der ihr meine Probleme sehen könnt. In den einzelnen Textabschnitten steht vor den Lorem ipsum Texten immer eine kleine Erläuterung des ganzen. Die Tabelle habe ich mit einem Rahmen von 1px ausgestattet, damit diese deutlich zu erkennen ist.


    lieben gruß,
    mr.tino

  • Abgesehen von diesen Fehlern macht es einfach wenig Sinn, den divs id's zu geben, und sie dann im CSS per Klasse anzusprechen :wink:

    Code
    <div id="content"></div>
    Code
    #content {}

    und nicht

    Code
    .content{}

    Dies hättest du mit Firebug übrigens sehr schnell selbst bemerkt, nur so als Tipp.

    Gruß,
    Jojo


  • Hi,

    #page hat width:878px + 5px margin = 883px wahre Breite

    #content hat width:702px + margin:180px =882px wahre Breite
    #menü hat width:175px + margin:10px =185px wahre Breite

    Da #content und #menü durch float nebeneinander stehen sind sie insgesamt
    1067px breit

    Sie passen also nicht in #page, der sie umschließt. :wink:

    koslowski

  • vielen, vielen dank, jojo und koslowski!

    eure tipps habe ich angewandt und sie haben auch beide einwandfrei mein problem gelöst. nur leider bin ich dann wieder so weit wie vorher, ohne die faux columns .. :( der ie stellt diese mittlerweile (gottseidank!) dar, im firefox ist immer noch sense. das table problem besteht weiterhin (s. testseite). im quelltext steht <table width="100%">, NUR auf was beziehen sich diese 100%?! anscheinend muss es im content-div liegen, darf also maximal 702px groß sein, bewegt sich momentan etwa um die 820px.

    nun also nach den vorschlägen meiner 2 vorredner:

    achja, wo wir gerade bei faux columns sind: im moment läuft es (im ie, und später höffentlich auch im firefox) so ab, dass die columns bis zum ende des content-divs mitlaufen. was noch schöner wäre, das sie bis zum ende der aktuellen seite mitlaufen, sprich wenn meine bildschirmauflösung ein browserfeld von 1200px zulässt (height) und die aktuelle seite nach 800px schon aufhört, dass die column trotzdem bis 1200px mitläuft. sozusagen min-height, aber ohne festen wert wegen unterschiedlicher auflösungen .. ist so etwas möglich?

    danke für die schnelle hilfe :)

  • 1. Faux-Columns

    füge nach dem content-div folgendes in den Quelltext:

    Code
    <div style="clear:both;"></div>

    Grund:
    Da der content-div gefloated ist, befindet er sich nicht mehr im textfluss, was wiederum bedeutet, dass sich die Höhe des #page divs nicht mehr nach ihm richtet und somit nach dem Menu endet.

    Aber:
    2. Faux-columns bis zum unteren Browserrand.

    Das geht recht einfach :wink:
    Gib einfach dem Body die faux-columns Hintergrundgrafik, damit hat sich auch erstens erledigt.

    3. Die Tabelle

    Hab ich jetzt nur überflogen und kenne mich auch nicht gut damit aus (hätte das ebenfalls mit divs gelöst), aber du gibst der einen <td> ne Breite von 80%, verstehe nicht, warum, da du den anderen wiederum 50% zuweist, vielleicht liegts daran.

    Gruß,
    Jojo


  • BOMBE! klappt alles. fehlt nur noch die tabelle, werde mir das morgen aber selbst noch einmal genauer anschauen.

    besten dank,
    tino

    ps: wer sich wundern sollte: der titel sollte natürlich divs, nicht divx beinhalten ;)

  • pps: achso, wer noch hinweise zur tabelle hat - ich nehm' sie gerne an ;) vielen dank und größte grüße,