CSS und position:absolute

Dieses Thema im Forum "Programmieren" wurde erstellt von pcschröder76, 5. August 2005.

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. pcschröder76

    pcschröder76 Megabyte

    Registriert seit:
    16. Oktober 2003
    Beiträge:
    1.026
    Hi Leute,

    Folgendes Problem: ich möchte Daten, die aus einer Datenbank ausgelesen werden, mithilfe von CSS am oberen Rand der Seite darstellen. Meine index.php ist bisher folgendermassen aufgebaut:

    Code:
    
    <body>
    
    <INHALT DER SEITE>
    
    <div style="position:absolute; margin-top:10px">
    
    </body>

    Sämtliche Unterseiten werden aus der Index.php sowie der entsprechenden Unterseite.php zusammengesetzt, wodurch sich eine jeweils unterschiedliche Länge der einzelnen Seiten ergibt.

    Stünde der Code zum Darstellen der Daten ganz am Anfang (z.B. direkt nach dem <body>-Tag), so würde ich immer die "alten" Daten angezeigt bekommen, da die Daten bei jedem Seitenaufbau neu berechnet werden.

    Wie kann ich nun, unabhängig von der Länge der gerade dargestellten Unterseite, die Daten an der immer selben Position am oberen Rand darstellen?



    Danke Kalweit,



    mfg

    Michael
     
  2. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.472
    Ohne dich wirklich verstanden zu haben, suchst du vielleicht: "left: xxx px; top: xxx px;"?
     
  3. pcschröder76

    pcschröder76 Megabyte

    Registriert seit:
    16. Oktober 2003
    Beiträge:
    1.026
    Was ist denn der Unterschied zwischen top: und margin-top:?

    Das richtet sich doch beides nach dem übergeordneten Element...

    :confused:



    mfg

    Michael
     
  4. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.472
    "margin" beschreibt den Außenabstand eines Elements zum Elternelement. "position" hat auf diesen Wert keinen Einfluss. "top" hingegen bezeichnet die obere Position eines Elementes. Ob es einen Bezug zum Elternelement gibt, entscheidet sich durch "position" - default ist hier "relative", d.h. das "top" würde zum "top" bzw. "height" (je nach ausgeführten Zeilenumbruch) des Elternelemetes addiert. Bei "position:absolute" bezieht sich "top" aber auf den <body>.
     
  5. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.472
    PS: "margin-top" ist nur ein "einseitiges" margin und hat mit dem alleinstehenden "top" nichts zu tun.
     
  6. pcschröder76

    pcschröder76 Megabyte

    Registriert seit:
    16. Oktober 2003
    Beiträge:
    1.026
    So, jetzt ist es an mir, nix zu verstehen. Aber immer wieder faszinierend, dieses CSS.

    Ich werd mal weiterforschen, und mich bei Bedarf wieder melden.

    Danke für die Hinweise Kalweit,


    mfg

    Michael
     
  7. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.472
    Warum tippst du nicht einfach <div style="position:absolute; top:0px; left:0px"> ein und schaust was passiert...
     
  8. pcschröder76

    pcschröder76 Megabyte

    Registriert seit:
    16. Oktober 2003
    Beiträge:
    1.026
    Hab ich längst. Mir sind hier eine ganze Reihe von Dingen unklar, z.B. weshalb folgende Code-Auszüge sich unterschiedlich verhalten:

    Code:
    <body>
    
    <div style="position:absolute; top:0px; left:0px">
    
    <INHALT DER SEITE>
    
    </body>
    
    und

    Code:
    <body>
    
    <INHALT DER SEITE>
    
    <div style="position:absolute; top:0px; left:0px">
    
    </body>
    

    Der erste Code stellt das Element am oberen Rand dar, ganz wie gewünscht.

    Der zweite Code stellt das Element unterhalb des Inhaltes der Seite dar, obwohl durch das absolute Attribut doch gewährleistet sein müsste, dass sich die Positionierung am übergeordneten Element, meines Erachtens <body>, orientieren müsste...



    mfg

    Michael
     
  9. kalweit

    kalweit Hüter der Glaskugel

    Registriert seit:
    18. April 2000
    Beiträge:
    31.472
    Das Verhalten wird daran liegen, dass der abschließende </div> TAG fehlt - btw: wäre es hilfreich, wenn du mal ein wenig mehr Quellcode posten würdest...
     
  10. pcschröder76

    pcschröder76 Megabyte

    Registriert seit:
    16. Oktober 2003
    Beiträge:
    1.026
    Alles klar, es haut hin.

    Nun muss ich mir deine Ausführungen zum Thema top und margin-top nochmals durchlesen, um auch zu blicken, was ich denn nun genau gemacht habe...


    Dankeschön,



    mfg

    Michael
     
Status des Themas:
Es sind keine weiteren Antworten möglich.

Diese Seite empfehlen