Klaus: Probleme beim Positionieren der DIVs

Hallo zusammen,

ich bin noch ein ziemlicher Noob was die CSS-Positionierung betrifft, lange Zeit haben es die Tabellen getan, doch ich dachte, es wird Zeit, dass sich das mal ändert. ;-))

Die Positionierung soll jetzt mittels CSS und DIV passieren.
Mein größtest Problem ist jetzt, dass in dem DIV 'mainframe' die nachfolgenden 4 DIVS (Saeule-#1-4) reingeschoben sind und nicht komplett unter dem DIV 'mainframe' stehen (wie von mir beabsichtigt).
Die sollten gleichverteilt darunter stehen.

Aber auch die einfachen Links schieben sich oben über das DIV hinaus und auch das DIV 'mainframe'.

Könnte da vielleicht jemand helfen, was ich da falsch und was ich besser machen sollte?

Hier der Code: Beispiel-Code

Klaus

  1. Om nah hoo pez nyeetz, Klaus!

    Mein größtest Problem ist jetzt, dass in dem DIV 'mainframe' die nachfolgenden 4 DIVS (Saeule-#1-4) reingeschoben sind und nicht komplett unter dem DIV 'mainframe' stehen (wie von mir beabsichtigt).
    Die sollten gleichverteilt darunter stehen.

    Wenn man sich vom Tabellenlayout trennen möchte, muss man sich komplett vom Denken in Tabellen trennen.

    Div ist so ein ganz allgemeines Element. header, nav, footer (HTML5) sind aussagekräftiger.

    Matthias

    --
    1/z ist kein Blatt Papier.

    1. Hallo Matthias,

      Wenn man sich vom Tabellenlayout trennen möchte, muss man sich komplett vom Denken in Tabellen trennen.

      Div ist so ein ganz allgemeines Element. header, nav, footer (HTML5) sind aussagekräftiger.

      Wie sieht es dann mit der Kompatibilität aus zu älteren Browsern oder mobile Geräte aus?

      Das irgendein Schnick-Schnack, wie Gradients oder Transitions nicht funktionieren, beeinträchtigt nicht das Layout oder die Funktionm, aber unbekannte Tags können da schon was zerhackstückeln, oder nicht?

      Klaus

      1. Hi,

        Div ist so ein ganz allgemeines Element. header, nav, footer (HTML5) sind aussagekräftiger.

        Wie sieht es dann mit der Kompatibilität aus zu älteren Browsern oder mobile Geräte aus?

        IE < 9 hat ein Problem damit, allerdings gibt's da workarounds.

        ~dave

  2. Hallo,

      
    <div id="mainframe">  
        Main  
    <div>  
    
    

    hier ist dir wohl ein "/" abhanden gekommen. Also </div>.

    Tschau

    Tobias

    --
    Speedswimming? Finswimming? Flossenschwimmen?
    ie:{ fl:| br:> va:) ls:[ fo:| rl:( n4:° ss:| de:] ch:? mo:) zu:)
    Die Erklärung zum Selfcode findest du hier: http://emmanuel.dammerer.at/selfcode.html
    Einen Decoder für den Selfcode findest du hier: http://peter.in-berlin.de/projekte/selfcode
    1. Hallo Tobias,

      hier ist dir wohl ein "/" abhanden gekommen. Also </div>.

      vielen Dank für den Hinweis. Ich hab da bestimmt schon 1000 Mal draufgeschaut und habs nicht gesehen *würg*

      Jetzt bleiben "nur" noch die Fragen, wie bekomme ich die 4 Säulen gleichmäßig verteilt und wieso ragen die Elemente aus dem DIVs heraus (wie z.B. der oberere Rand von den Links)

      Klaus

      1. @@Klaus:

        nuqneH

        vielen Dank für den Hinweis. Ich hab da bestimmt schon 1000 Mal draufgeschaut und habs nicht gesehen *würg*

        Tja, hätteste 1 Mal den Validator draufschauen lassen …

        Qapla'

        --
        „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
        1. Tja, hätteste 1 Mal den Validator draufschauen lassen …

          Ich werde es mir zu Herzen nehmen (und damit sicher hier und da viel Zeit sparen ;-))

          Die Links hab ich auch mittlerweile etwas nach unten setzen können.
          Aber die 4 Säulen wollen sich nicht gleichmäßig verteilen (oder werden aneinander geklatscht, trotz fester Breite und padding-Wert)

          Habt Ihr da noch ne Idee?